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

Jump to bottom

[WIP] Try manipulating the DOM to add the 'Preview AMP' button #3392

Merged
merged 3 commits into from
Oct 21, 2019
Merged

[WIP] Try manipulating the DOM to add the 'Preview AMP' button #3392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3459cbf
Try maniplating the DOM to add the 'Preview AMP' button
kienstra Sep 30, 2019
097ba95
Adjust styling of the non-AMP 'Preview' button
kienstra Sep 30, 2019
89bc7e8
Fix an issue where the 'Preview AMP' button was out of place on a new…
kienstra Oct 20, 2019
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
34 changes: 34 additions & 0 deletions assets/css/src/amp-block-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,37 @@
flex: 0 0 auto;
margin-right: 1rem;
}

/* AMP preview button wrapper */
.wp-core-ui #amp-wrapper-post-preview {
border: 0;
margin-left: -4px;
padding: 0;
position: relative;
}

/* AMP preview button */
.wp-core-ui .amp-editor-post-preview {
height: 33px;
padding-left: 6px;
padding-right: 6px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.wp-core-ui .amp-editor-post-preview svg {
width: 15px;
height: 15px;
margin: 0;
}

/*
* Remove right border radius on the (non-AMP) 'Preview' button, as it'll be next to the AMP button.
* @todo: only apply this if the 'Preview AMP' button displays.
*/
.wp-core-ui .editor-post-preview {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding-left: 10px;
padding-right: 10px;
}
Copy link
Contributor Author

@kienstra kienstra Sep 30, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@todo: this styling for the non-AMP preview button should only apply if there is a 'Preview AMP' button:

non-amp-preview

5 changes: 5 additions & 0 deletions assets/images/amp-black-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 0 additions & 18 deletions assets/src/block-editor/components/amp-black-icon.js
View file
Open in desktop

This file was deleted.

54 changes: 43 additions & 11 deletions assets/src/block-editor/components/amp-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
/**
* WordPress dependencies
*/
import { Component, renderToString } from '@wordpress/element';
import { Button } from '@wordpress/components';
import { Component, createRef, renderToString } from '@wordpress/element';
import { Icon, IconButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { withSelect, withDispatch } from '@wordpress/data';
import { DotTip } from '@wordpress/nux';
Expand All @@ -19,8 +19,10 @@ import { addQueryArgs } from '@wordpress/url';
/**
* Internal dependencies
*/
import ampIcon from './amp-black-icon';
import ampBlackIcon from '../../../images/amp-black-icon.svg';
import ampFilledIcon from '../../../images/amp-icon.svg';
import { isAMPEnabled } from '../helpers';
import { POST_PREVIEW_CLASS } from '../constants';

/**
* Writes the message and graphic in the new preview window that was opened.
Expand All @@ -34,7 +36,10 @@ import { isAMPEnabled } from '../helpers';
function writeInterstitialMessage( targetDocument ) {
let markup = renderToString(
<div className="editor-post-preview-button__interstitial-message">
{ ampIcon }
<Icon
icon={ ampBlackIcon }
viewBox="0 0 98 98"
/>
<p>{ __( 'Generating AMP preview…', 'amp' ) }</p>
</div>
);
Expand Down Expand Up @@ -73,8 +78,8 @@ function writeInterstitialMessage( targetDocument ) {
}
}
.editor-post-preview-button__interstitial-message svg {
width: 192px;
height: 192px;
width: 198px;
height: 198px;
stroke: #555d66;
stroke-width: 0.75;
}
Expand All @@ -100,7 +105,10 @@ function writeInterstitialMessage( targetDocument ) {
}

/**
* Forked from the Core component <PostPreviewButton>.
* A 'Preview AMP' button, forked from the Core 'Preview' button: <PostPreviewButton>.
*
* Rendered into the DOM with renderPreviewButton() in helpers/index.js.
* This also moves the (non-AMP) 'Preview' button to before this, if it's not already there.
*
* @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js
*/
Expand All @@ -113,6 +121,8 @@ class AMPPreview extends Component {
constructor( ...args ) {
super( ...args );
this.openPreviewWindow = this.openPreviewWindow.bind( this );
this.moveButton = this.moveButton.bind( this );
this.buttonRef = createRef();
}

/**
Expand All @@ -129,6 +139,25 @@ class AMPPreview extends Component {
if ( previewLink && ! prevProps.previewLink ) {
this.setPreviewWindowLink( previewLink );
}

this.moveButton();
}

/**
* Moves the (non-AMP) 'Preview' button to before this 'Preview AMP' button, if it's not there already.
*/
moveButton() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

amp-render-moved

const buttonWrapper = get( this, [ 'buttonRef', 'current', 'parentNode' ], false );
if ( ! buttonWrapper ) {
return;
}

if ( ! buttonWrapper.previousSibling || ! buttonWrapper.previousSibling.classList.contains( POST_PREVIEW_CLASS ) ) {
const postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` );
if ( get( postPreviewButton, 'nextSibling' ) ) {
buttonWrapper.parentNode.insertBefore( buttonWrapper, postPreviewButton.nextSibling );
}
}
}

/**
Expand Down Expand Up @@ -206,18 +235,21 @@ class AMPPreview extends Component {
// changes that were autosaved since the post was last published. Otherwise,
// just link to the post's URL.
const href = previewLink || currentPostLink;
const buttonIcon = <Icon viewBox="0 0 62 62" icon={ ampFilledIcon } />;

return (
isEnabled && ! errorMessages.length && ! isStandardMode && (
<Button
<IconButton
icon={ buttonIcon }
isLarge
className="editor-post-preview"
className="amp-editor-post-preview"
href={ href }
label={ __( 'Preview AMP', 'amp' ) }
target={ this.getWindowTarget() }
disabled={ ! isSaveable }
onClick={ this.openPreviewWindow }
ref={ this.buttonRef }
>
{ __( 'AMP Preview', 'amp' ) }
<span className="screen-reader-text">
{
/* translators: accessibility text */
Expand All @@ -227,7 +259,7 @@ class AMPPreview extends Component {
<DotTip tipId="core/editor.preview">
{ __( 'Click “Preview” to load a preview of this page in AMP, so you can make sure you’re happy with your blocks.', 'amp' ) }
</DotTip>
</Button>
</IconButton>
)
);
}
Expand Down
3 changes: 3 additions & 0 deletions assets/src/block-editor/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,6 @@ export const MEDIA_BLOCKS = [

export const DEFAULT_WIDTH = 608; // Max-width in the editor.
export const DEFAULT_HEIGHT = 400;

export const AMP_PREVIEW_BUTTON_WRAPPER_ID = 'amp-wrapper-post-preview';
export const POST_PREVIEW_CLASS = 'editor-post-preview';
15 changes: 9 additions & 6 deletions assets/src/block-editor/helpers/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { select } from '@wordpress/data';
/**
* Internal dependencies
*/
import { TEXT_BLOCKS, MEDIA_BLOCKS, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../constants';
import { AMP_PREVIEW_BUTTON_WRAPPER_ID, TEXT_BLOCKS, MEDIA_BLOCKS, DEFAULT_HEIGHT, DEFAULT_WIDTH, POST_PREVIEW_CLASS } from '../constants';
import { MIN_FONT_SIZE, MAX_FONT_SIZE } from '../../common/constants';
import { AMPPreview } from '../components';

Expand Down Expand Up @@ -942,19 +942,22 @@ export const isAMPEnabled = () => {
};

/**
* Replaces the button to preview the post with one that also previews AMP.
* Renders the 'Preview AMP' button in the DOM right after the (non-AMP) 'Preview' button.
*/
export const replacePreviewButton = () => {
const postPreviewButton = document.querySelector( '.editor-post-preview' );
if ( ! postPreviewButton ) {
export const renderPreviewButton = () => {
const postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` );
if ( ! postPreviewButton || document.getElementById( AMP_PREVIEW_BUTTON_WRAPPER_ID ) ) {
return;
}

const buttonWrapper = document.createElement( 'div' );
postPreviewButton.parentElement.insertBefore( buttonWrapper, postPreviewButton.nextSibling );
buttonWrapper.id = AMP_PREVIEW_BUTTON_WRAPPER_ID;

render(
<AMPPreview />,
buttonWrapper
);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This renders the button into the DOM:

amp-preview-button


// Insert this after the (non-AMP) 'Preview' button.
postPreviewButton.parentNode.insertBefore( buttonWrapper, postPreviewButton.nextSibling );
};
6 changes: 3 additions & 3 deletions assets/src/block-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import domReady from '@wordpress/dom-ready';
*/
import { withFeaturedImageNotice } from '../common/components';
import { withMediaLibraryNotice } from './components';
import { addAMPAttributes, addAMPExtraProps, filterBlocksEdit, filterBlocksSave, replacePreviewButton } from './helpers';
import { addAMPAttributes, addAMPExtraProps, filterBlocksEdit, filterBlocksSave, renderPreviewButton } from './helpers';
import { getMinimumFeaturedImageDimensions } from '../common/helpers';
import './store';

Expand Down Expand Up @@ -80,10 +80,10 @@ blocks.keys().forEach( ( modulePath ) => {
} );

/**
* Replace the preview button with one that also previews AMP.
* Render the 'Preview AMP' button, and move it to after the (non-AMP) 'Preview' button.
*/
if ( isWebsiteEnabled() ) {
domReady( () => {
replacePreviewButton();
renderPreviewButton();
} );
}
10 changes: 1 addition & 9 deletions assets/src/block-editor/plugins/amp-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/**
* External dependencies
*/
import { errorMessages, isStandardMode } from 'amp-block-editor-data';
import { errorMessages } from 'amp-block-editor-data';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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)

import PropTypes from 'prop-types';

/**
Expand All @@ -19,7 +19,6 @@ import { compose, withInstanceId } from '@wordpress/compose';
* Internal dependencies
*/
import { isAMPEnabled } from '../helpers';
import { AMPPreview } from '../components';

/**
* Adds an 'Enable AMP' toggle to the block editor 'Status & Visibility' section.
Expand Down Expand Up @@ -61,13 +60,6 @@ function AMPToggle( { isEnabled, onChange } ) {
)
}
</PluginPostStatusInfo>
{
isEnabled && ! isStandardMode && (
<PluginPostStatusInfo>
<AMPPreview />
</PluginPostStatusInfo>
)
}
</>
);
}
Expand Down