From 75306f65ab9cfaa9ad26647c72081038aa35f63a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 13 Jul 2021 17:31:12 +0300 Subject: [PATCH 1/2] Block editor: iframe: load inline styles --- .../src/components/iframe/index.js | 23 ++++++-- .../plugins/iframed-inline-styles.php | 39 +++++++++++++ .../plugins/iframed-inline-styles/block.json | 15 +++++ .../plugins/iframed-inline-styles/editor.css | 6 ++ .../plugins/iframed-inline-styles/editor.js | 15 +++++ .../plugins/iframed-inline-styles/style.css | 9 +++ .../plugins/iframed-masonry-block/editor.js | 2 +- .../iframed-inline-styles.test.js.snap | 7 +++ .../iframed-masonry-block.test.js.snap | 2 +- .../plugins/iframed-inline-styles.test.js | 55 +++++++++++++++++++ .../plugins/iframed-masonry-block.test.js | 2 +- 11 files changed, 166 insertions(+), 9 deletions(-) create mode 100644 packages/e2e-tests/plugins/iframed-inline-styles.php create mode 100644 packages/e2e-tests/plugins/iframed-inline-styles/block.json create mode 100644 packages/e2e-tests/plugins/iframed-inline-styles/editor.css create mode 100644 packages/e2e-tests/plugins/iframed-inline-styles/editor.js create mode 100644 packages/e2e-tests/plugins/iframed-inline-styles/style.css create mode 100644 packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap create mode 100644 packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index ebcab57b1173fd..445139fee139f4 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -239,12 +239,23 @@ function Iframe( { contentRef, children, head, ...props }, ref ) { head = ( <> - { styles.map( ( { tagName, href, id, rel, media }, index ) => { - const TagName = tagName.toLowerCase(); - return ( - - ); - } ) } + { styles.map( + ( { tagName, href, id, rel, media, textContent } ) => { + const TagName = tagName.toLowerCase(); + + if ( TagName === 'style' ) { + return ( + + { textContent } + + ); + } + + return ( + + ); + } + ) } { head } ); diff --git a/packages/e2e-tests/plugins/iframed-inline-styles.php b/packages/e2e-tests/plugins/iframed-inline-styles.php new file mode 100644 index 00000000000000..dd2532eebc53d1 --- /dev/null +++ b/packages/e2e-tests/plugins/iframed-inline-styles.php @@ -0,0 +1,39 @@ + { + const { createElement: el } = element; + const { registerBlockType } = blocks; + const { useBlockProps } = blockEditor; + + registerBlockType( 'test/iframed-inline-styles', { + apiVersion: 2, + edit: function Edit() { + return el( 'div', useBlockProps(), 'Edit' ); + }, + save: function Save() { + return el( 'div', useBlockProps.save(), 'Save' ); + }, + } ); +} )( window ); diff --git a/packages/e2e-tests/plugins/iframed-inline-styles/style.css b/packages/e2e-tests/plugins/iframed-inline-styles/style.css new file mode 100644 index 00000000000000..23ddfa85290811 --- /dev/null +++ b/packages/e2e-tests/plugins/iframed-inline-styles/style.css @@ -0,0 +1,9 @@ +/** + * The following styles get applied both on the front of your site and in the + * editor. + */ +.wp-block-test-iframed-inline-styles { + background-color: #21759b; + color: #fff; + padding: 2px; +} diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/editor.js b/packages/e2e-tests/plugins/iframed-masonry-block/editor.js index 5bf8beaf3c390a..82b0c8d83a7da6 100644 --- a/packages/e2e-tests/plugins/iframed-masonry-block/editor.js +++ b/packages/e2e-tests/plugins/iframed-masonry-block/editor.js @@ -28,7 +28,7 @@ el( 'div', { className: 'grid-item' } ), el( 'div', { className: 'grid-item' } ), el( 'div', { className: 'grid-item grid-item--height2' } ), - ] + ]; registerBlockType( 'test/iframed-masonry-block', { apiVersion: 2, diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap new file mode 100644 index 00000000000000..46d3e807bff832 --- /dev/null +++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`iframed inline styles should load inline styles in iframe 1`] = ` +" +
Save
+" +`; diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap index 1c0d56386164f5..0033b3aff44d12 100644 --- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap +++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`changing image size should load script and dependencies in iframe 1`] = ` +exports[`iframed masonry block should load script and dependencies in iframe 1`] = ` "
" diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js new file mode 100644 index 00000000000000..aa5b90037fbbee --- /dev/null +++ b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ +import { + activatePlugin, + createNewPost, + deactivatePlugin, + insertBlock, + getEditedPostContent, + openDocumentSettingsSidebar, + clickButton, + canvas, +} from '@wordpress/e2e-test-utils'; + +async function getPadding( context ) { + return await context.evaluate( () => { + const container = document.querySelector( + '.wp-block-test-iframed-inline-styles' + ); + return window.getComputedStyle( container ).padding; + } ); +} + +describe( 'iframed inline styles', () => { + beforeEach( async () => { + await activatePlugin( 'gutenberg-test-iframed-inline-styles' ); + await createNewPost( { postType: 'page' } ); + } ); + + afterEach( async () => { + await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' ); + } ); + + it( 'should load inline styles in iframe', async () => { + await insertBlock( 'Iframed Inline Styles' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + expect( await getPadding( page ) ).toBe( '20px' ); + + await openDocumentSettingsSidebar(); + await clickButton( 'Page' ); + await clickButton( 'Template' ); + await clickButton( 'New' ); + await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'Tab' ); + await page.keyboard.type( 'Iframed Test' ); + await clickButton( 'Create' ); + await page.waitForSelector( 'iframe[name="editor-canvas"]' ); + await canvas().waitForSelector( + '.wp-block-test-iframed-inline-styles' + ); + + expect( await getPadding( canvas() ) ).toBe( '20px' ); + } ); +} ); diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js index 5c12f2abb1b6aa..7877442e5695ef 100644 --- a/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js +++ b/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js @@ -26,7 +26,7 @@ async function didMasonryLoadCorrectly( context ) { } ); } -describe( 'changing image size', () => { +describe( 'iframed masonry block', () => { beforeEach( async () => { await activatePlugin( 'gutenberg-test-iframed-masonry-block' ); await createNewPost( { postType: 'page' } ); From 5a692a2f1696dcd3bbf7f040301bedf613d92b10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 13 Jul 2021 18:34:19 +0300 Subject: [PATCH 2/2] Fix inline styles through compat layer --- .../src/components/iframe/index.js | 16 +++++++++++- .../plugins/iframed-inline-styles.php | 15 ++++++++++- .../iframed-inline-styles/compat-style.css | 4 +++ .../plugins/iframed-inline-styles.test.js | 26 ++++++++++++++----- 4 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 packages/e2e-tests/plugins/iframed-inline-styles/compat-style.css diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 445139fee139f4..f06f140e028491 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -49,6 +49,12 @@ function styleSheetsCompat( doc ) { return; } + // Generally, ignore inline styles. We add inline styles belonging to a + // stylesheet later, which may or may not match the selectors. + if ( ownerNode.tagName !== 'LINK' ) { + return; + } + // Don't try to add the reset styles, which were removed as a dependency // from `edit-blocks` for the iframe since we don't need to reset admin // styles. @@ -69,9 +75,17 @@ function styleSheetsCompat( doc ) { `Stylesheet ${ ownerNode.id } 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).`, - ownerNode + ownerNode.outerHTML ); doc.head.appendChild( ownerNode.cloneNode( true ) ); + + // Add inline styles belonging to the stylesheet. + const inlineCssId = ownerNode.id.replace( '-css', '-inline-css' ); + const inlineCssElement = document.getElementById( inlineCssId ); + + if ( inlineCssElement ) { + doc.head.appendChild( inlineCssElement.cloneNode( true ) ); + } } } ); } diff --git a/packages/e2e-tests/plugins/iframed-inline-styles.php b/packages/e2e-tests/plugins/iframed-inline-styles.php index dd2532eebc53d1..f54c8eb83e6233 100644 --- a/packages/e2e-tests/plugins/iframed-inline-styles.php +++ b/packages/e2e-tests/plugins/iframed-inline-styles.php @@ -33,7 +33,20 @@ function() { array(), filemtime( plugin_dir_path( __FILE__ ) . 'iframed-inline-styles/style.css' ) ); - wp_add_inline_style( 'iframed-inline-styles-style', '.wp-block-test-iframed-inline-styles{padding: 20px}' ); + wp_add_inline_style( 'iframed-inline-styles-style', '.wp-block-test-iframed-inline-styles{padding:20px}' ); register_block_type_from_metadata( __DIR__ . '/iframed-inline-styles' ); } ); + +add_action( + 'enqueue_block_editor_assets', + function() { + wp_enqueue_style( + 'iframed-inline-styles-compat-style', + plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/compat-style.css', + array(), + filemtime( plugin_dir_path( __FILE__ ) . 'iframed-inline-styles/compat-style.css' ) + ); + wp_add_inline_style( 'iframed-inline-styles-compat-style', '.wp-block-test-iframed-inline-styles{border-width:2px}' ); + } +); diff --git a/packages/e2e-tests/plugins/iframed-inline-styles/compat-style.css b/packages/e2e-tests/plugins/iframed-inline-styles/compat-style.css new file mode 100644 index 00000000000000..4455269d53b024 --- /dev/null +++ b/packages/e2e-tests/plugins/iframed-inline-styles/compat-style.css @@ -0,0 +1,4 @@ +/* Random rule with `wp-block` in the selector. */ +.wp-block-test-iframed-inline-styles { + display: block; +} diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js index aa5b90037fbbee..e8f8a83a8c1f91 100644 --- a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js +++ b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js @@ -12,13 +12,13 @@ import { canvas, } from '@wordpress/e2e-test-utils'; -async function getPadding( context ) { - return await context.evaluate( () => { +async function getComputedStyle( context, property ) { + return await context.evaluate( ( prop ) => { const container = document.querySelector( '.wp-block-test-iframed-inline-styles' ); - return window.getComputedStyle( container ).padding; - } ); + return window.getComputedStyle( container )[ prop ]; + }, property ); } describe( 'iframed inline styles', () => { @@ -35,7 +35,8 @@ describe( 'iframed inline styles', () => { await insertBlock( 'Iframed Inline Styles' ); expect( await getEditedPostContent() ).toMatchSnapshot(); - expect( await getPadding( page ) ).toBe( '20px' ); + expect( await getComputedStyle( page, 'padding' ) ).toBe( '20px' ); + expect( await getComputedStyle( page, 'border-width' ) ).toBe( '2px' ); await openDocumentSettingsSidebar(); await clickButton( 'Page' ); @@ -50,6 +51,19 @@ describe( 'iframed inline styles', () => { '.wp-block-test-iframed-inline-styles' ); - expect( await getPadding( canvas() ) ).toBe( '20px' ); + // Inline styles of properly enqueued stylesheet should load. + expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' ); + + // Inline styles of stylesheet loaded with the compatibility layer + // should load. + expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe( + '2px' + ); + + expect( console ).toHaveErrored( + `Stylesheet iframed-inline-styles-compat-style-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). ` + ); } ); } );