Skip to content

Iframe block, pattern and template previews #28165

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

Merged
ellatrix merged 14 commits into from
Aug 19, 2021
Merged

Iframe block, pattern and template previews #28165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
77be816
Iframe block preview
ellatrix Jan 13, 2021
ae8037b
Fix styles, restore padding, remove appender
ellatrix Jul 8, 2021
9e01e7a
Fix sizing
ellatrix Jul 8, 2021
ad40930
Disable block toolbar compat layer
ellatrix Jul 9, 2021
6d302fe
Revert remounting on blocks change
ellatrix Jul 10, 2021
c6c34be
Omit iframe name and fix padding
ellatrix Jul 10, 2021
4a02838
Adjust column viewport
ellatrix Jul 10, 2021
c32317c
Fix widgets screen
ellatrix Jul 10, 2021
bb1d9c3
Fix customize widgets screen
ellatrix Jul 10, 2021
10ce651
Igone 2020 theme error
ellatrix Jul 10, 2021
0eeed17
Fix template part test
ellatrix Jul 11, 2021
0f563ee
Use example viewport width in style previews
ellatrix Jul 11, 2021
8d7042d
Don't allow tabbing into preview
ellatrix Aug 11, 2021
bc50888
Revert package lock change
ellatrix Aug 11, 2021
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
8 changes: 8 additions & 0 deletions lib/client-assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -730,6 +730,8 @@ function gutenberg_extend_block_editor_settings_with_fse_theme_flag( $settings )
* Sets the editor styles to be consumed by JS.
*/
function gutenberg_extend_block_editor_styles_html() {
global $pagenow;

$script_handles = array();
$style_handles = array(
'wp-block-editor',
Expand All @@ -738,6 +740,11 @@ function gutenberg_extend_block_editor_styles_html() {
'wp-edit-blocks',
);

if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) {
$style_handles[] = 'wp-widgets';
$style_handles[] = 'wp-edit-widgets';
}

$block_registry = WP_Block_Type_Registry::get_instance();

foreach ( $block_registry->get_all_registered() as $block_type ) {
Expand Down Expand Up @@ -789,6 +796,7 @@ function gutenberg_extend_block_editor_styles_html() {
add_action( 'admin_footer-toplevel_page_gutenberg-edit-site', 'gutenberg_extend_block_editor_styles_html' );
add_action( 'admin_footer-post.php', 'gutenberg_extend_block_editor_styles_html' );
add_action( 'admin_footer-post-new.php', 'gutenberg_extend_block_editor_styles_html' );
add_action( 'admin_footer-widgets.php', 'gutenberg_extend_block_editor_styles_html' );

/**
* Adds a polyfill for object-fit in environments which do not support it.
Expand Down
52 changes: 35 additions & 17 deletions packages/block-editor/src/components/block-preview/auto.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,15 @@
*/
import { Disabled } from '@wordpress/components';
import { useResizeObserver, pure } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import BlockList from '../block-list';
import Iframe from '../iframe';
import EditorStyles from '../editor-styles';
import { store } from '../../store';

// This is used to avoid rendering the block list if the sizes change.
let MemoizedBlockList;
Expand All @@ -18,37 +22,51 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
{ width: containerWidth },
] = useResizeObserver();
const [
containtResizeListener,
contentResizeListener,
{ height: contentHeight },
] = useResizeObserver();
const styles = useSelect( ( select ) => {
return select( store ).getSettings().styles;
} );

// Initialize on render instead of module top level, to avoid circular dependency issues.
MemoizedBlockList = MemoizedBlockList || pure( BlockList );

const scale =
( containerWidth - 2 * __experimentalPadding ) / viewportWidth;
const scale = containerWidth / viewportWidth;

return (
<div
className="block-editor-block-preview__container editor-styles-wrapper"
aria-hidden
style={ {
height: contentHeight * scale + 2 * __experimentalPadding,
} }
>
<div className="block-editor-block-preview__container">
{ containerResizeListener }
<Disabled
className="block-editor-block-preview__content"
style={ {
transform: `scale(${ scale })`,
width: viewportWidth,
left: __experimentalPadding,
right: __experimentalPadding,
top: __experimentalPadding,
height: contentHeight * scale,
Copy link
Contributor

@youknowriad youknowriad Nov 15, 2021

Choose a reason for hiding this comment

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

There's a weird behavior that is happening now in the patterns explorer because of this component (I think). When you switch to the "buttons" then the "columns" category tab in the modal patterns explorer, you'll notice that the patterns using columns (for example the three columns with images ones) jump between a full width image into the real output (kind of like moving from small screens to bigger) when first rendering. I tried solving this issue but failure for the moment, I'm not sure yet why it's rendering first like if it wasn't scaled (small screen) and then when scaled down, it shows the right sizes...

} }
className="block-editor-block-preview__content"
>
{ containtResizeListener }
<MemoizedBlockList />
<Iframe
head={ <EditorStyles styles={ styles } /> }
contentRef={ ( bodyElement ) => {
const {
ownerDocument: { documentElement },
} = bodyElement;
documentElement.style.position = 'absolute';
documentElement.style.width = '100%';
bodyElement.style.padding =
__experimentalPadding + 'px';
} }
aria-hidden
tabIndex={ -1 }
style={ {
position: 'absolute',
width: viewportWidth,
height: contentHeight,
pointerEvents: 'none',
} }
>
{ contentResizeListener }
<MemoizedBlockList renderAppender={ false } />
</Iframe>
</Disabled>
</div>
);
Expand Down
3 changes: 0 additions & 3 deletions packages/block-editor/src/components/block-preview/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@
// This element receives inline styles for width, height, and transform-scale.
// Those inline styles are calculated to fit a perfect thumbnail.

// Position above the padding.
position: absolute;

// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
top: 0;
left: 0;
Expand Down
7 changes: 6 additions & 1 deletion packages/block-editor/src/components/block-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ function BlockStyles( {
return (
<BlockStyleItem
genericPreviewBlock={ genericPreviewBlock }
viewportWidth={ type.example?.viewportWidth ?? 500 }
className={ className }
isActive={ activeStyle === style }
key={ style.name }
Expand All @@ -127,6 +128,7 @@ function BlockStyles( {

function BlockStyleItem( {
genericPreviewBlock,
viewportWidth,
style,
isActive,
onBlur,
Expand Down Expand Up @@ -165,7 +167,10 @@ function BlockStyleItem( {
aria-label={ style.label || style.name }
>
<div className="block-editor-block-styles__item-preview">
<BlockPreview viewportWidth={ 500 } blocks={ previewBlocks } />
<BlockPreview
viewportWidth={ viewportWidth }
blocks={ previewBlocks }
/>
</div>
<div className="block-editor-block-styles__item-label">
{ style.label || style.name }
Expand Down
9 changes: 4 additions & 5 deletions packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ async function loadScript( doc, { id, src } ) {
} );
}

function Iframe( { contentRef, children, head, ...props }, ref ) {
function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
const [ , forceRender ] = useReducer( () => ( {} ) );
const [ iframeDocument, setIframeDocument ] = useState();
const styles = useParsedAssets( window.__editorAssets.styles );
Expand Down Expand Up @@ -279,13 +279,12 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {

return (
<>
{ before }
{ tabIndex >= 0 && before }
<iframe
{ ...props }
ref={ useMergeRefs( [ ref, setRef ] ) }
tabIndex="0"
tabIndex={ tabIndex }
title={ __( 'Editor canvas' ) }
name="editor-canvas"
>
{ iframeDocument &&
createPortal(
Expand All @@ -296,7 +295,7 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
) }
{ iframeDocument && createPortal( head, iframeDocument.head ) }
</iframe>
{ after }
{ tabIndex >= 0 && after }
</>
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/columns/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const settings = {
icon,
variations,
example: {
viewportWidth: 600, // Columns collapse "@media (max-width: 599px)".
Copy link
Member Author

@ellatrix ellatrix Jul 11, 2021

Choose a reason for hiding this comment

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

Note that this is an existing API. The viewportWidth property already exists. Previously we didn't need to set if for these blocks, because the preview viewport would be the same as the main parent window. A lot of previews are setting the default viewport width to 500. Maybe we should change the default to be a bit larger.

innerBlocks: [
{
name: 'core/column',
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/media-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export { metadata, name };
export const settings = {
icon,
example: {
viewportWidth: 601, // Columns collapse "@media (max-width: 600px)".
Copy link
Member

@jorgefilipecosta jorgefilipecosta Aug 3, 2021

Choose a reason for hiding this comment

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

I think if we want we can avoid adding a new viewPortWidth setting by using isStackedOnMobile false attributes on columns and media-text blocks.

Copy link
Member Author

@ellatrix ellatrix Aug 10, 2021

Choose a reason for hiding this comment

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

That could work, yes.

Copy link
Member Author

@ellatrix ellatrix Aug 11, 2021

Choose a reason for hiding this comment

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

I'm not sure if that's the best approach though. Why do we set previews to such a small width by default?

Copy link
Member

@jorgefilipecosta jorgefilipecosta Aug 17, 2021

Choose a reason for hiding this comment

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

Good question, I'm not sure why the previews are so small by default. I guess it may make sense to explore changing the default.

attributes: {
mediaType: 'image',
mediaUrl:
Expand Down
4 changes: 3 additions & 1 deletion packages/e2e-tests/specs/experiments/template-part.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,9 @@ describe( 'Template Part', () => {
chooseExistingButtonSelector
);
await chooseExistingButton.click();
const preview = await page.waitForXPath( testContentSelector );
const preview = await page.waitForSelector(
'.block-editor-block-preview__content iframe'
);
expect( preview ).toBeTruthy();

await preview.click();
Expand Down
18 changes: 18 additions & 0 deletions packages/e2e-tests/specs/widgets/customizing-widgets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ import {
// eslint-disable-next-line no-restricted-imports
import { find } from 'puppeteer-testing-library';

const twentyTwentyError = `Stylesheet twentytwenty-block-editor-styles-css was not properly added.
For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`;
Copy link
Member Author

@ellatrix ellatrix Jul 11, 2021

Choose a reason for hiding this comment

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

The 2020 theme is not adding editor styles through add_editor_style. For some reason the widgets tests are using this theme. It's outside the scope of this PR to fix this.


describe( 'Widgets Customizer', () => {
beforeEach( async () => {
await deleteAllWidgets();
Expand Down Expand Up @@ -158,6 +162,8 @@ describe( 'Widgets Customizer', () => {
name: 'My Search',
selector: '.widget-content *',
} ).toBeFound( findOptions );

expect( console ).toHaveErrored( twentyTwentyError );
} );

it( 'should open the inspector panel', async () => {
Expand Down Expand Up @@ -243,6 +249,8 @@ describe( 'Widgets Customizer', () => {
} ).toBeFound();

await expect( inspectorHeading ).not.toBeVisible();

expect( console ).toHaveErrored( twentyTwentyError );
} );

it( 'should handle the inserter outer section', async () => {
Expand Down Expand Up @@ -350,6 +358,8 @@ describe( 'Widgets Customizer', () => {
name: 'Add a block',
level: 2,
} ).not.toBeFound();

expect( console ).toHaveErrored( twentyTwentyError );
} );

it( 'should move focus to the block', async () => {
Expand Down Expand Up @@ -445,6 +455,8 @@ describe( 'Widgets Customizer', () => {
text: 'First Heading',
} );
await expect( headingBlock ).toHaveFocus();

expect( console ).toHaveErrored( twentyTwentyError );
} );

it( 'should clear block selection', async () => {
Expand Down Expand Up @@ -507,6 +519,8 @@ describe( 'Widgets Customizer', () => {
role: 'toolbar',
name: 'Block tools',
} ).not.toBeFound();

expect( console ).toHaveErrored( twentyTwentyError );
} );

it( 'should handle legacy widgets', async () => {
Expand Down Expand Up @@ -685,6 +699,8 @@ describe( 'Widgets Customizer', () => {
selector: '*[aria-live="polite"][aria-relevant="additions text"]',
} ).toBeFound();
await expect( paragraphBlock ).toBeVisible();

expect( console ).toHaveErrored( twentyTwentyError );
} );

it( 'should move (inner) blocks to another sidebar', async () => {
Expand Down Expand Up @@ -744,6 +760,8 @@ describe( 'Widgets Customizer', () => {
await expect( movedParagraphBlockQuery ).toBeFound();
const movedParagraphBlock = await find( movedParagraphBlockQuery );
await expect( movedParagraphBlock ).toHaveFocus();

expect( console ).toHaveErrored( twentyTwentyError );
} );
} );

Expand Down
12 changes: 12 additions & 0 deletions packages/e2e-tests/specs/widgets/editing-widgets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ import {
import { find, findAll } from 'puppeteer-testing-library';
import { groupBy, mapValues } from 'lodash';

const twentyTwentyError = `Stylesheet twentytwenty-block-editor-styles-css was not properly added.
For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`;

describe( 'Widgets screen', () => {
beforeEach( async () => {
await visitWidgetsScreen();
Expand Down Expand Up @@ -245,6 +249,8 @@ describe( 'Widgets screen', () => {
</div></div>",
}
` );

expect( console ).toHaveErrored( twentyTwentyError );
} );

it.skip( 'Should insert content using the inline inserter', async () => {
Expand Down Expand Up @@ -613,6 +619,8 @@ describe( 'Widgets screen', () => {
expect( editedWidgets[ 'sidebar-1' ][ 0 ] ).toBe(
initialWidgets[ 'sidebar-1' ][ 0 ]
);

expect( console ).toHaveErrored( twentyTwentyError );
} );

it( 'Should display legacy widgets', async () => {
Expand Down Expand Up @@ -809,6 +817,8 @@ describe( 'Widgets screen', () => {
</div></div>",
}
` );

expect( console ).toHaveErrored( twentyTwentyError );
} );

it( 'Allows widget deletion to be undone', async () => {
Expand Down Expand Up @@ -866,6 +876,8 @@ describe( 'Widgets screen', () => {
</div></div>",
}
` );

expect( console ).toHaveErrored( twentyTwentyError );
} );
} );

Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ function MaybeIframe( {
ref={ ref }
contentRef={ contentRef }
style={ { width: '100%', height: '100%', display: 'block' } }
name="editor-canvas"
>
{ children }
</Iframe>
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-post/src/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { size, map, without, omit } from 'lodash';
import { size, map, without } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -109,7 +109,7 @@ function Editor( {

const editorSettings = useMemo( () => {
const result = {
...omit( settings, [ 'styles' ] ),
Copy link
Member Author

@ellatrix ellatrix Jul 11, 2021

Choose a reason for hiding this comment

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

The omission was added in https://github.com/WordPress/gutenberg/pull/27947/files#diff-d00cfe048041886ee9b16f6f42422317b6e770cbea20cbe0e4d0ca7c8e0ec0e1R102. It's not clear to me why at this point in the code. It prevents the block editor from being able to access this setting. Cc @youknowriad.

...settings,
__experimentalPreferredStyleVariations: {
value: preferredStyleVariations,
onChange: updatePreferredStyleVariations,
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/block-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
head={ <EditorStyles styles={ settings.styles } /> }
ref={ ref }
contentRef={ mergedRefs }
name="editor-canvas"
>
<BlockList
className="edit-site-block-editor__block-list"
Expand Down