Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admin Page: Add actionable card for creating a Portfolio item when the post type is active #10936

Merged
merged 4 commits into from
Dec 11, 2018
Merged

Admin Page: Add actionable card for creating a Portfolio item when the post type is active #10936

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
160ed8f
Add basic actionable item below postfoilo card in Writing settings wh…
oskosk Dec 11, 2018
203c299
Run prettier on the file
oskosk Dec 11, 2018
a23ea93
Replace add portfolio for add portfolio item
oskosk Dec 11, 2018
00c07cd
Use template literals for clarity
oskosk Dec 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 64 additions & 55 deletions _inc/client/writing/custom-content-types.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/**
* External dependencies
*
* @format
*/

import React from 'react';
import { connect } from 'react-redux';
import { translate as __ } from 'i18n-calypso';
Expand All @@ -20,55 +23,57 @@ import SettingsGroup from 'components/settings-group';
export class CustomContentTypes extends React.Component {
state = {
testimonial: this.props.getOptionValue( 'jetpack_testimonial', 'custom-content-types' ),
portfolio: this.props.getOptionValue( 'jetpack_portfolio', 'custom-content-types' )
portfolio: this.props.getOptionValue( 'jetpack_portfolio', 'custom-content-types' ),
};

updateCPTs = type => {
const deactivate = 'testimonial' === type
? ! ( ( ! this.state.testimonial ) || this.state.portfolio )
: ! ( ( ! this.state.portfolio ) || this.state.testimonial );
const deactivate =
'testimonial' === type
? ! ( ! this.state.testimonial || this.state.portfolio )
: ! ( ! this.state.portfolio || this.state.testimonial );

this.props.updateFormStateModuleOption( 'custom-content-types', 'jetpack_' + type, deactivate );

this.setState( {
[ type ]: ! this.state[ type ]
[ type ]: ! this.state[ type ],
} );
};

linkIfActiveCPT = type => {
return this.props.getSettingCurrentValue( 'jetpack_' + type, 'custom-content-types' )
? <a href={ this.props.siteAdminUrl + 'edit.php?post_type=jetpack-' + type } />
: <span />;
return this.props.getSettingCurrentValue( `jetpack_${ type }`, 'custom-content-types' ) ? (
<a href={ `${ this.props.siteAdminUrl }edit.php?post_type=jetpack-${ type }` } />
) : (
<span />
);
};

handleTestimonialToggleChange = () => {
this.updateCPTs( 'testimonial' );
}
};

handlePortfolioToggleChange = () => {
this.updateCPTs( 'portfolio' );
}
};

render() {
if ( ! this.props.isModuleFound( 'custom-content-types' ) ) {
return null;
}

const module = this.props.module( 'custom-content-types' );
const disabledByOverride = ( 'inactive' === this.props.getModuleOverride( 'custom-content-types' ) );
const disabledReason = disabledByOverride && __( 'This feature has been disabled by a site administrator.' );
const disabledByOverride =
'inactive' === this.props.getModuleOverride( 'custom-content-types' );
const disabledReason =
disabledByOverride && __( 'This feature has been disabled by a site administrator.' );
return (
<SettingsCard
{ ...this.props }
module="custom-content-types"
hideButton>
<SettingsCard { ...this.props } module="custom-content-types" hideButton>
<SettingsGroup
hasChild
module={ module }
support={ {
link: 'https://jetpack.com/support/custom-content-types/',
} }
>
>
<p>
{ __(
'Add {{testimonialLink}}testimonials{{/testimonialLink}} to ' +
Expand All @@ -77,8 +82,8 @@ export class CustomContentTypes extends React.Component {
'shortcode to display them on your site.',
{
components: {
testimonialLink: this.linkIfActiveCPT( 'testimonial' )
}
testimonialLink: this.linkIfActiveCPT( 'testimonial' ),
},
}
) }
</p>
Expand All @@ -87,35 +92,30 @@ export class CustomContentTypes extends React.Component {
disabled={ this.props.isSavingAnyOption( 'jetpack_testimonial' ) || disabledByOverride }
onChange={ this.handleTestimonialToggleChange }
disabledReason={ disabledReason }
>
<span className="jp-form-toggle-explanation">
{
__( 'Testimonials' )
}
</span>
>
<span className="jp-form-toggle-explanation">{ __( 'Testimonials' ) }</span>
</CompactFormToggle>
<FormFieldset>
<p className="jp-form-setting-explanation">
{ __( 'Testimonials shortcode: [testimonials]' ) }
</p>
</FormFieldset>
</SettingsGroup>
{
this.props.testimonialActive && (
<CompactCard
className="jp-settings-card__configure-link"
href={ `${ this.props.siteAdminUrl }post-new.php?post_type=jetpack-testimonial` }>
{ __( 'Add a testimonial' ) }
</CompactCard>
)
}
{ this.props.testimonialActive && (
<CompactCard
className="jp-settings-card__configure-link"
href={ `${ this.props.siteAdminUrl }post-new.php?post_type=jetpack-testimonial` }
>
{ __( 'Add a testimonial' ) }
</CompactCard>
) }
<SettingsGroup
hasChild
module={ module }
support={ {
link: 'https://jetpack.com/support/custom-content-types/',
} }
>
>
<p>
{ __(
'Use {{portfolioLink}}portfolios{{/portfolioLink}} on your ' +
Expand All @@ -124,8 +124,8 @@ export class CustomContentTypes extends React.Component {
'display them on your site.',
{
components: {
portfolioLink: this.linkIfActiveCPT( 'portfolio' )
}
portfolioLink: this.linkIfActiveCPT( 'portfolio' ),
},
}
) }
</p>
Expand All @@ -134,35 +134,44 @@ export class CustomContentTypes extends React.Component {
disabled={ this.props.isSavingAnyOption( 'jetpack_portfolio' ) || disabledByOverride }
onChange={ this.handlePortfolioToggleChange }
disabledReason={ disabledReason }
>
<span className="jp-form-toggle-explanation">
{
__( 'Portfolios' )
}
</span>
>
<span className="jp-form-toggle-explanation">{ __( 'Portfolios' ) }</span>
</CompactFormToggle>
<FormFieldset>
<p className="jp-form-setting-explanation">
{
__( 'Portfolios shortcode: [portfolio]' )
}
{ __( 'Portfolios shortcode: [portfolio]' ) }
</p>
</FormFieldset>
</SettingsGroup>
{ this.props.portfolioActive && (
<CompactCard
className="jp-settings-card__configure-link"
href={ `${ this.props.siteAdminUrl }post-new.php?post_type=jetpack-portfolio` }
>
{ __( 'Add a portfolio item' ) }
</CompactCard>
) }
</SettingsCard>
);
}
}

export default withModuleSettingsFormHelpers( connect(
( state, ownProps ) => {
const testimonialActive = ownProps.getSettingCurrentValue( 'jetpack_testimonial', 'custom-content-types' );
export default withModuleSettingsFormHelpers(
connect( ( state, ownProps ) => {
const portfolioActive = ownProps.getSettingCurrentValue(
'jetpack_portfolio',
'custom-content-types'
);
const testimonialActive = ownProps.getSettingCurrentValue(
'jetpack_testimonial',
'custom-content-types'
);
return {
module: ( module_name ) => getModule( state, module_name ),
isModuleFound: ( module_name ) => _isModuleFound( state, module_name ),
getModuleOverride: ( module_name ) => getModuleOverride( state, module_name ),
module: module_name => getModule( state, module_name ),
isModuleFound: module_name => _isModuleFound( state, module_name ),
getModuleOverride: module_name => getModuleOverride( state, module_name ),
portfolioActive,
testimonialActive,
};
}
)( CustomContentTypes ) );

} )( CustomContentTypes )
);