[WIP] Try manipulating the DOM to add the 'Preview AMP' button #3392
Conversation
This still needs more testing. But so far, it looks like it's working. It inserts the button into the DOM on domReady, and in that component's componentDidUpdate(), it moves it back to the correct position if needed.
| .wp-core-ui .editor-post-preview { | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| } |
There was a problem hiding this comment.
@todo: this styling for the non-AMP preview button should only apply if there is a 'Preview AMP' button:
| @@ -2,7 +2,7 @@ | |||
| /** | |||
| * External dependencies | |||
| */ | |||
| import { errorMessages, isStandardMode } from 'amp-block-editor-data'; | |||
| import { errorMessages } from 'amp-block-editor-data'; | |||
There was a problem hiding this comment.
@todo: there's a console error related to amp-block-editor-data, though probably not caused by this line:
Uncaught ReferenceError: ampBlockEditor is not defined
at Object.amp-block-editor-data (amp-block-validation.js:5180)
at __webpack_require__ (amp-block-validation.js:20)
at Module../assets/src/block-editor/components/amp-preview.js (amp-block-validation.js:114)
at __webpack_require__ (amp-block-validation.js:20)
at Module../assets/src/block-editor/components/index.js (amp-block-validation.js:471)
at __webpack_require__ (amp-block-validation.js:20)
at Module../assets/src/block-editor/helpers/index.js (amp-block-validation.js:907)
at __webpack_require__ (amp-block-validation.js:20)
at Module../assets/src/block-validation/index.js (amp-block-validation.js:2512)
at __webpack_require__ (amp-block-validation.js:20)
| /** | ||
| * Moves the (non-AMP) 'Preview' button to before this 'Preview AMP' button, if it's not there already. | ||
| */ | ||
| moveButton() { |
There was a problem hiding this comment.
Calling this in the 'Preview AMP' button's componentDidUpdate() method moves it back to the correct place.
Without this, here's what it looks like:
| return; | ||
| } | ||
|
|
||
| const buttonWrapper = document.createElement( 'div' ); | ||
| postPreviewButton.parentElement.insertBefore( buttonWrapper, postPreviewButton.nextSibling ); | ||
| buttonWrapper.id = AMP_PREVIEW_BUTTON_WRAPPER_ID; | ||
|
|
||
| render( | ||
| <AMPPreview />, | ||
| buttonWrapper | ||
| ); |
There was a problem hiding this comment.
This renders the button into the DOM:
|
What do you think about this DOM rendering? Hi @swissspidy, Following up on #2934 (comment), what do you think of this approach of rendering the 'Preview AMP' button into the DOM?
It's not ideal, as it could break with changes in Gutenberg. But as far as I've tested it, the button seems to work. There are some Thanks, Pascal! |
This allows the (non-AMP) preview button to align with the end of the .edit-post-sidebar.
|
Hm...it looks like the button is unexpectedly moved on first creating a post and editing it. But for other cases, this looks alright. Update: this should be fixed with 89bc7e8 |
… post On creating a new post and making the first edit, the 'Preview AMP' button appeared out of place.
|
Question About Overall Approach Hi @swissspidy, What do you think of the overall approach here: rendering the AMP preview button into the DOM with
On This is a little brittle, as it could break with future versions of Gutenberg. But it works so far in my testing. Thanks, Pascal! |
|
@kienstra The approach is promising and the implementation looks reasonable. In terms of breakage, it doesn't seem to work on WordPress 5.3 RC (either with or without Gutenberg) with all these new styles. |
|
Thanks, Pascal! Good point, I'll look at how it works with WP 5.3 RC. |
|
Merging this |
domReady, and in that component'scomponentDidUpdate(), it moves it back to the correct position if needed.<Header>had moved the button, as it was inserted in the DOM, but this adds an operation to move it:This is a possible approach for PR #3323, so it's targeting that branch. For reference, here's full diff against develop.
Related to #2934