From f970099b1b8512304dfcd764a7057b57eeecb5d7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 23 Oct 2018 15:27:18 +0100 Subject: [PATCH 1/8] Update the editor styles wrapper to avoid specificity issues --- docs/extensibility/theme-support.md | 2 +- packages/edit-post/src/components/visual-editor/index.js | 2 +- packages/editor/src/components/block-preview/index.js | 2 +- packages/editor/src/components/provider/index.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/extensibility/theme-support.md b/docs/extensibility/theme-support.md index e6c79d9c8b13ef..d444d2ad29e745 100644 --- a/docs/extensibility/theme-support.md +++ b/docs/extensibility/theme-support.md @@ -194,7 +194,7 @@ This flag will make sure users are only able to choose colors from the `editor-c Gutenberg supports the theme's [editor styles](https://codex.wordpress.org/Editor_Style). This support is opt-in because these styles are applied differently from the classic editor. - In the classic editor, the stylesheet is applied as is in the iframe of the post content editor. - - Since Gutenberg doesn't make use of iFrames, this is not possible. Instead Gutenberg wrap all the provided styles with `.editor-block-list__block` to avoid leaking styles outside the editor's content area. + - Since Gutenberg doesn't make use of iFrames, this is not possible. Instead Gutenberg wrap all the provided styles with `.editor-styles-wrapper` to avoid leaking styles outside the editor's content area. This technique should allow the editor styles to work properly in both editors in most cases. diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 886b0cf542e7a5..03dbcdb3f047be 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -22,7 +22,7 @@ import PluginBlockSettingsMenuGroup from '../block-settings-menu/plugin-block-se function VisualEditor() { return ( - + diff --git a/packages/editor/src/components/block-preview/index.js b/packages/editor/src/components/block-preview/index.js index 35063cab137b39..9a75152f5350d8 100644 --- a/packages/editor/src/components/block-preview/index.js +++ b/packages/editor/src/components/block-preview/index.js @@ -34,7 +34,7 @@ function BlockPreview( props ) { export function BlockPreviewContent( { name, attributes } ) { const block = createBlock( name, attributes ); return ( - + { const transforms = [ editorWidth, - wrap( '.editor-block-list__block', [ '.wp-block' ] ), + wrap( '.editor-styles-wrapper', [ '.wp-block' ] ), ]; if ( baseURL ) { transforms.push( urlRewrite( baseURL ) ); From e86d3fc3dd9e53dd1d4acf2881cdc2da00cc8492 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 23 Oct 2018 17:48:58 +0100 Subject: [PATCH 2/8] Rework wide alignments editor styles --- .../src/components/visual-editor/style.scss | 12 ------ packages/edit-post/src/style.scss | 13 ++++++ .../editor/src/components/block-list/block.js | 3 +- .../default-block-appender/index.js | 4 +- .../editor/src/components/post-title/index.js | 4 +- .../editor/src/components/provider/index.js | 5 +-- .../src/components/writing-flow/index.js | 2 +- packages/editor/src/editor-styles.scss | 11 ----- packages/editor/src/editor-styles/index.js | 1 - .../editor-styles/transforms/editor-width.js | 42 ------------------- .../test/__snapshots__/editor-width.js.snap | 15 ------- .../transforms/test/editor-width.js | 21 ---------- 12 files changed, 24 insertions(+), 109 deletions(-) delete mode 100644 packages/editor/src/editor-styles/transforms/editor-width.js delete mode 100644 packages/editor/src/editor-styles/transforms/test/__snapshots__/editor-width.js.snap delete mode 100644 packages/editor/src/editor-styles/transforms/test/editor-width.js diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index bc13e6d2cbaa1b..2795f5330ba361 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -11,7 +11,6 @@ // Collapse to minimum height of 50px, to fully occupy editor bottom pad. height: 50px; width: 100%; - max-width: $content-width; // Offset for: Visual editor padding, block (default appender) margin. margin: #{ -1 * $block-spacing } auto -50px; } @@ -20,7 +19,6 @@ .edit-post-visual-editor .editor-block-list__block { margin-left: auto; margin-right: auto; - max-width: $content-width; @include break-small() { // Compensate for side UI width. @@ -53,14 +51,6 @@ } } } - - &[data-align="wide"] { - max-width: 1100px; - } - - &[data-align="full"] { - max-width: none; - } } // The base width of the title should match that of blocks even if it isn't a block @@ -73,7 +63,6 @@ .edit-post-visual-editor .editor-post-title__block { margin-left: auto; margin-right: auto; - max-width: $content-width; // Space title similarly to other blocks. // This uses negative margins so as to not affect the default block margins. @@ -97,7 +86,6 @@ .edit-post-visual-editor { .editor-default-block-appender { // Default to centered and content-width, like blocks - max-width: $content-width; margin-left: auto; margin-right: auto; position: relative; diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index c37abde1f2cb9c..a6fc964afc82cf 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -288,3 +288,16 @@ body.block-editor-page { } } } + +// These are default editor styles in case the theme don't provide them +.wp-block { + max-width: $content-width; + + &[data-align="wide"] { + max-width: 1100px; + } + + &[data-align="full"] { + max-width: none; + } +} diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js index 11df32719a09f0..498c79c3da5534 100644 --- a/packages/editor/src/components/block-list/block.js +++ b/packages/editor/src/components/block-list/block.js @@ -409,8 +409,9 @@ export class BlockListBlock extends Component { const shouldShowInsertionPoint = ( isPartOfMultiSelection && isFirst ) || ! isPartOfMultiSelection; const canShowInBetweenInserter = ! isEmptyDefaultBlock && ! isPreviousBlockADefaultEmptyBlock; + // The wp-block className is important for editor styles. // Generate the wrapper class names handling the different states of the block. - const wrapperClassName = classnames( 'editor-block-list__block', { + const wrapperClassName = classnames( 'wp-block editor-block-list__block', { 'has-warning': ! isValid || !! error || isUnregisteredBlock, 'is-selected': shouldAppearSelected, 'is-multi-selected': isPartOfMultiSelection, diff --git a/packages/editor/src/components/default-block-appender/index.js b/packages/editor/src/components/default-block-appender/index.js index afabf7c50c9ddb..f850fff57f1d53 100644 --- a/packages/editor/src/components/default-block-appender/index.js +++ b/packages/editor/src/components/default-block-appender/index.js @@ -47,8 +47,10 @@ export function DefaultBlockAppender( { // // See: https://gist.github.com/cvrebert/68659d0333a578d75372 + // The wp-block className is important for editor styles. + return ( -
+
{ const transforms = [ - editorWidth, - wrap( '.editor-styles-wrapper', [ '.wp-block' ] ), + wrap( '.editor-styles-wrapper' ), ]; if ( baseURL ) { transforms.push( urlRewrite( baseURL ) ); diff --git a/packages/editor/src/components/writing-flow/index.js b/packages/editor/src/components/writing-flow/index.js index 6f85e5ed1e8af2..b90458368c6614 100644 --- a/packages/editor/src/components/writing-flow/index.js +++ b/packages/editor/src/components/writing-flow/index.js @@ -334,7 +334,7 @@ class WritingFlow extends Component { aria-hidden tabIndex={ -1 } onClick={ this.focusLastTextField } - className="editor-writing-flow__click-redirect" + className="wp-block editor-writing-flow__click-redirect" />
); diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss index 02584224934814..574435d625b50a 100644 --- a/packages/editor/src/editor-styles.scss +++ b/packages/editor/src/editor-styles.scss @@ -1,14 +1,3 @@ -.wp-block { - width: $content-width; -} - -body { - font-family: $editor-font; - line-height: $editor-line-height; - color: $dark-gray-900; - font-size: $editor-font-size; -} - p { font-size: $editor-font-size; } diff --git a/packages/editor/src/editor-styles/index.js b/packages/editor/src/editor-styles/index.js index 1d53fff364337c..35baab8d590b66 100644 --- a/packages/editor/src/editor-styles/index.js +++ b/packages/editor/src/editor-styles/index.js @@ -1,4 +1,3 @@ export { default as traverse } from './traverse'; export { default as urlRewrite } from './transforms/url-rewrite'; export { default as wrap } from './transforms/wrap'; -export { default as editorWidth } from './transforms/editor-width'; diff --git a/packages/editor/src/editor-styles/transforms/editor-width.js b/packages/editor/src/editor-styles/transforms/editor-width.js deleted file mode 100644 index 8a057b32a7b6d9..00000000000000 --- a/packages/editor/src/editor-styles/transforms/editor-width.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * External dependencies - */ -import { find } from 'lodash'; - -export const getEditorWidthRules = ( width ) => { - return { - type: 'rule', - selectors: [ - 'body.block-editor-page .editor-post-title__block', - 'body.block-editor-page .editor-default-block-appender', - 'body.block-editor-page .editor-block-list__block', - ], - declarations: [ - { - type: 'declaration', - property: 'max-width', - value: width, - }, - ], - }; -}; - -const editorWidth = ( node ) => { - if ( - node.type === 'rule' && - find( node.selectors, ( selector ) => selector.trim() === '.wp-block' ) - ) { - const widthDeclaration = find( - node.declarations, - ( declaration ) => declaration.property === 'width' - ); - - if ( widthDeclaration ) { - return getEditorWidthRules( widthDeclaration.value ); - } - } - - return node; -}; - -export default editorWidth; diff --git a/packages/editor/src/editor-styles/transforms/test/__snapshots__/editor-width.js.snap b/packages/editor/src/editor-styles/transforms/test/__snapshots__/editor-width.js.snap deleted file mode 100644 index a6aab4bda887bd..00000000000000 --- a/packages/editor/src/editor-styles/transforms/test/__snapshots__/editor-width.js.snap +++ /dev/null @@ -1,15 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Editor Width should generate the editor width styles 1`] = ` -"body.block-editor-page .editor-post-title__block, -body.block-editor-page .editor-default-block-appender, -body.block-editor-page .editor-block-list__block { -max-width: 300px; -}" -`; - -exports[`Editor Width should only replace the html declaration 1`] = ` -"h1 { -width: 300px; -}" -`; diff --git a/packages/editor/src/editor-styles/transforms/test/editor-width.js b/packages/editor/src/editor-styles/transforms/test/editor-width.js deleted file mode 100644 index 5b5b20b98edac3..00000000000000 --- a/packages/editor/src/editor-styles/transforms/test/editor-width.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Internal dependencies - */ -import traverse from '../../traverse'; -import editorWidth from '../editor-width'; - -describe( 'Editor Width', () => { - it( 'should only replace the html declaration', () => { - const input = `h1 { width: 300px; }`; - const output = traverse( input, editorWidth ); - - expect( output ).toMatchSnapshot(); - } ); - - it( 'should generate the editor width styles', () => { - const input = `.wp-block { width: 300px; }`; - const output = traverse( input, editorWidth ); - - expect( output ).toMatchSnapshot(); - } ); -} ); From 6908f138eba2fdc9c78a9d8b7797324873a703fe Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 23 Oct 2018 19:09:16 +0100 Subject: [PATCH 3/8] Fix unit tests --- .../default-block-appender/test/__snapshots__/index.js.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap index ee4db832dc9d3f..a3b6b410ce3eef 100644 --- a/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap @@ -2,7 +2,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
@@ -31,7 +31,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1 exports[`DefaultBlockAppender should match snapshot 1`] = `
@@ -53,7 +53,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = ` exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
From fe6b604485fb77bc85b52e28159bd815fe131bb3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 24 Oct 2018 15:05:11 +0100 Subject: [PATCH 4/8] Avoid clicking on the placeholder buttons to fix e2e tests --- test/e2e/specs/block-deletion.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/block-deletion.test.js b/test/e2e/specs/block-deletion.test.js index 2a504f83de4ef9..7da0695f1ab436 100644 --- a/test/e2e/specs/block-deletion.test.js +++ b/test/e2e/specs/block-deletion.test.js @@ -80,7 +80,7 @@ describe( 'block deletion -', () => { await page.click( '.editor-post-title' ); // Click on the third (image) block so that its wrapper is selected and backspace to delete it. - await page.click( '.editor-block-list__block:nth-child(3)' ); + await page.click( '.editor-block-list__block:nth-child(3) .components-placeholder__label' ); await page.keyboard.press( 'Backspace' ); expect( await getEditedPostContent() ).toMatchSnapshot(); From cf1fb27a936b80bda1eeb13e3405137449c6972e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 24 Oct 2018 15:35:39 +0100 Subject: [PATCH 5/8] Updadte the editor styles documentation to uses the new recommended approach --- docs/extensibility/theme-support.md | 29 ++++------------------------- 1 file changed, 4 insertions(+), 25 deletions(-) diff --git a/docs/extensibility/theme-support.md b/docs/extensibility/theme-support.md index d444d2ad29e745..890c89ed298af0 100644 --- a/docs/extensibility/theme-support.md +++ b/docs/extensibility/theme-support.md @@ -204,25 +204,6 @@ Enabling editor styles support is done using: add_theme_support( 'editor-styles' ); ``` -Alternatively, a theme can provide a stylesheet that will change the editor's appearance entirely. You can use this to change colors, fonts, and any other visual aspect of the editor. - -### Add the stylesheet - -The first thing to do is to create a new stylesheet file in your theme directory. We'll assume the file is named `style-editor.css`. - -Next, load your newly-created editor stylesheet in your theme: - -```php -/** - * Enqueue block editor style - */ -function mytheme_block_editor_styles() { - wp_enqueue_style( 'mytheme-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' ); -} - -add_action( 'enqueue_block_editor_assets', 'mytheme_block_editor_styles' ); -``` - If your editor style relies on a dark background, you can add the following to adjust the color of the UI to work on dark backgrounds: ```php @@ -238,7 +219,7 @@ You can style the editor like any other webpage. Here's how to change the backgr ```css /* Add this to your `style-editor.css` file */ -body.block-editor-page { +body { background-color: #d3ebf3; color: #00005d; } @@ -250,19 +231,17 @@ To change the main column width of the editor, add the following CSS to `style-e ```css /* Main column width */ -body.block-editor-page .editor-post-title__block, -body.block-editor-page .editor-default-block-appender, -body.block-editor-page .editor-block-list__block { +.wp-block { max-width: 720px; } /* Width of "wide" blocks */ -body.block-editor-page .editor-block-list__block[data-align="wide"] { +.wp-block[data-align="wide"] { max-width: 1080px; } /* Width of "full-wide" blocks */ -body.block-editor-page .editor-block-list__block[data-align="full"] { +.wp-block[data-align="full"] { max-width: none; } ``` From bdf85922673b08de3950108866a3fe0dc2ab03bd Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 24 Oct 2018 15:59:30 +0100 Subject: [PATCH 6/8] Update changelogs --- packages/edit-post/CHANGELOG.md | 4 ++++ packages/editor/CHANGELOG.md | 1 + 2 files changed, 5 insertions(+) diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md index 7a387817035b4b..d06127b1eecb6f 100644 --- a/packages/edit-post/CHANGELOG.md +++ b/packages/edit-post/CHANGELOG.md @@ -1,5 +1,9 @@ ## 1.0.5 (Unreleased) +### Polish + +- Add the editor styles support's wrapper className. + ### Bug Fixes - Hide pinned plugins and block traversal tool from header on mobile. diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index e2ab0ebf39df51..64f3a0e74e2a23 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -3,6 +3,7 @@ ### Polish - Add animated logo to preview interstitial screen. +- Tweak the editor styles support. ## 5.0.1 (2018-10-22) From 7e119b6bead34dc3b039a0eccedc079e6e0d85b3 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Fri, 26 Oct 2018 13:53:37 +0100 Subject: [PATCH 7/8] Fix typo Co-Authored-By: youknowriad --- packages/edit-post/src/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index a6fc964afc82cf..728a166137208c 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -289,7 +289,7 @@ body.block-editor-page { } } -// These are default editor styles in case the theme don't provide them +// These are default editor styles in case the theme doesn't provide them. .wp-block { max-width: $content-width; From 895da88b056d91ef1f3aee125b52c2a79dc7acf9 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 26 Oct 2018 13:59:56 +0100 Subject: [PATCH 8/8] Tweak theme support documentation --- docs/extensibility/theme-support.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/docs/extensibility/theme-support.md b/docs/extensibility/theme-support.md index 890c89ed298af0..c110fcd06fd360 100644 --- a/docs/extensibility/theme-support.md +++ b/docs/extensibility/theme-support.md @@ -191,19 +191,18 @@ This flag will make sure users are only able to choose colors from the `editor-c ## Editor styles -Gutenberg supports the theme's [editor styles](https://codex.wordpress.org/Editor_Style). This support is opt-in because these styles are applied differently from the classic editor. +Gutenberg supports the theme's [editor styles](https://codex.wordpress.org/Editor_Style), however it works a little differently than in the classic editor. - - In the classic editor, the stylesheet is applied as is in the iframe of the post content editor. - - Since Gutenberg doesn't make use of iFrames, this is not possible. Instead Gutenberg wrap all the provided styles with `.editor-styles-wrapper` to avoid leaking styles outside the editor's content area. +In the classic editor, the editor stylesheet is loaded directly into the iframe of the WYSIWYG editor, with no changes. Gutenberg, however, doesn't use iframes. To make sure your styles are applied only to the content of the editor, we automatically transform your editor styles by selectively rewriting or adjusting certain CSS selectors. -This technique should allow the editor styles to work properly in both editors in most cases. - -Enabling editor styles support is done using: +Because it works a little differently, you need to opt-in to this by adding an extra snippet to your theme, in addition to the add_editor_style function: ```php -add_theme_support( 'editor-styles' ); +add_theme_support('editor-styles'); ``` +You shouldn't need to change your editor styles too much; most themes can add the snippet above and get similar results in the classic editor and inside Gutenberg. + If your editor style relies on a dark background, you can add the following to adjust the color of the UI to work on dark backgrounds: ```php