diff --git a/docs/extensibility/theme-support.md b/docs/extensibility/theme-support.md index e6c79d9c8b13ef..c110fcd06fd360 100644 --- a/docs/extensibility/theme-support.md +++ b/docs/extensibility/theme-support.md @@ -191,37 +191,17 @@ 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-block-list__block` 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'); ``` -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' ); -``` +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: @@ -238,7 +218,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 +230,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; } ``` 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/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/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..728a166137208c 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 doesn'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/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) 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/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 ( - + +
@@ -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`] = `
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 718784b7bd9f92..9adb9e5c9b64ab 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -98,7 +98,9 @@ class PostTitle extends Component { title, } = this.props; const { isSelected } = this.state; - const className = classnames( 'editor-post-title__block', { + + // The wp-block className is important for editor styles. + const className = classnames( 'wp-block editor-post-title__block', { 'is-selected': isSelected, 'is-focus-mode': isFocusMode, 'has-fixed-toolbar': hasFixedToolbar, diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index e238b74d7ad189..a0a78724881309 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -14,7 +14,7 @@ import { withDispatch } from '@wordpress/data'; /** * Internal dependencies */ -import { traverse, wrap, urlRewrite, editorWidth } from '../../editor-styles'; +import { traverse, wrap, urlRewrite } from '../../editor-styles'; class EditorProvider extends Component { constructor( props ) { @@ -35,8 +35,7 @@ class EditorProvider extends Component { map( this.props.settings.styles, ( { css, baseURL } ) => { const transforms = [ - editorWidth, - wrap( '.editor-block-list__block', [ '.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(); - } ); -} ); 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();