Add Gutenberg 'Enable AMP' toggle #1275
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| **/*.min.js | ||
| **/node_modules/** | ||
| **/vendor/** | ||
| **/assets/js/*-compiled.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| **/*.min.js | ||
| **/node_modules/** | ||
| **/vendor/** | ||
| **/assets/js/*-compiled.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| const { __ } = wp.i18n; | ||
| const { FormToggle, Notice } = wp.components; | ||
| const { Fragment } = wp.element; | ||
| const { withSelect, withDispatch } = wp.data; | ||
| const { PluginPostStatusInfo } = wp.editPost; | ||
| const { compose, withInstanceId } = wp.compose; | ||
|
|
||
| /** | ||
| * Exported via wp_localize_script(). | ||
| */ | ||
| const { possibleStati, defaultStatus, errorMessages } = window.wpAmpEditor; | ||
|
|
||
| /** | ||
| * Adds an 'Enable AMP' toggle to the block editor 'Status & Visibility' section. | ||
| * | ||
| * If there are error(s) that block AMP from being enabled or disabled, | ||
| * this only displays a Notice with the error(s), not a toggle. | ||
| * Error(s) are imported as errorMessages via wp_localize_script(). | ||
| * | ||
| * @return {Object} AMPToggle component. | ||
| */ | ||
| function AMPToggle( { enabledStatus, onAmpChange } ) { | ||
| return ( | ||
| <Fragment> | ||
| <PluginPostStatusInfo> | ||
| { ! errorMessages.length && __( 'Enable AMP', 'amp' ) } | ||
| { | ||
| ! errorMessages.length && | ||
| ( | ||
| <FormToggle | ||
| checked={ 'enabled' === enabledStatus } | ||
| onChange={ () => onAmpChange( enabledStatus ) } | ||
| id={ 'amp-enabled' } | ||
| /> | ||
| ) | ||
| } | ||
| { | ||
| !! errorMessages.length && | ||
| ( | ||
| <Notice | ||
| status={ 'warning' } | ||
| isDismissible={ false } | ||
| > | ||
| { | ||
| errorMessages.map( function( message ) { | ||
| let minSplitLength = 2; | ||
|
|
||
| if ( 'string' === typeof message ) { | ||
| // The message is only a string, so return it. | ||
| return message; | ||
| } | ||
| if ( message[ 0 ].split( '%s' ).length > minSplitLength ) { | ||
| /** | ||
| * The message is an array with the text in the 0 index, and the href in the 1 index. | ||
| * And the text should have two %s as placeholders for <a>, like 'AMP cannot be enabled because this %spost type does not support it%s.'. | ||
| * So split it along %s, to construct the message with the <a>, like: | ||
| * 'AMP cannot be enabled because this <a href="foo">post type does not support it</a>.'. | ||
| */ | ||
| let splitMessage = message[ 0 ].split( '%s' ); | ||
| return ( <p>{ splitMessage[ 0 ] }<a href={ message[ 1 ] }>{ splitMessage[ 1 ] }</a>{ splitMessage[ 2 ] }</p> ); | ||
| } | ||
| } ) | ||
| } | ||
| </Notice> | ||
| ) | ||
| } | ||
| </PluginPostStatusInfo> | ||
| </Fragment> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * The AMP Toggle component, composed with the enabledStatus and a callback for when it's changed. | ||
| * | ||
| * @return {Object} The composed AMP toggle. | ||
| */ | ||
| function ComposedAMPToggle() { | ||
| return compose( [ | ||
| withSelect( ( select ) => { | ||
| /** | ||
| * Gets the AMP enabled status. | ||
| * | ||
| * Uses select from the enclosing function to get the meta value. | ||
| * If it doesn't exist, it uses the default value. | ||
| * This applies especially for a new post, where there probably won't be a meta value yet. | ||
| * | ||
| * @return {string} Enabled status, either 'enabled' or 'disabled'. | ||
| */ | ||
| let getEnabledStatus = function() { | ||
| let metaSetatus = select( 'core/editor' ).getEditedPostAttribute( 'meta' ).amp_status; | ||
| if ( possibleStati.includes( metaSetatus ) ) { | ||
| return metaSetatus; | ||
| } | ||
| return defaultStatus; | ||
| }; | ||
|
|
||
| return { enabledStatus: getEnabledStatus() }; | ||
| } ), | ||
| withDispatch( ( dispatch ) => ( { | ||
| onAmpChange: function( enabledStatus ) { | ||
| let newStatus = 'enabled' === enabledStatus ? 'disabled' : 'enabled'; | ||
| dispatch( 'core/editor' ).editPost( { meta: { amp_status: newStatus } } ); | ||
| } | ||
| } ) ), | ||
| withInstanceId | ||
| ] )( AMPToggle ); | ||
| } | ||
|
|
||
| export default wp.plugins.registerPlugin( 'amp', { | ||
| icon: 'hidden', | ||
| render: ComposedAMPToggle() | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -39,36 +39,7 @@ | |
| </fieldset> | ||
| <?php else : ?> | ||
| <div class="inline notice notice-warning notice-alt"> | ||
|
There was a problem hiding this comment. This section is moved to get_raw_error_messages(). |
||
| <p><?php echo implode( ' ', $error_messages ); // WPCS: xss ok. ?></p> | ||
| </div> | ||
| <?php endif; ?> | ||
| <div class="amp-status-actions"> | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is duplication between PHP here and the JS in
PluginPostStatusInfo. I appreciate the concern to notdangerouslySetInnerHTMLbut since the error messages are coming from a trusted source, I think it would be better to do so in this case. Even in Gutenberg, for example, there is aRawHTMLcomponent for this purpose. This component is publicly available already in Gutenberg viawp.element.RawHTML.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, I'm working on this now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These commits simplify the error messages to use
RawHTMLlike you suggested.