diff --git a/lib/client-assets.php b/lib/client-assets.php index 6bcfff4f67124b..839b245cce3cd2 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -360,6 +360,11 @@ function gutenberg_register_packages_styles( $styles ) { 'wp-reusable-blocks', ); + // Only load the default layout and margin styles for themes without theme.json file. + if ( ! WP_Theme_JSON_Resolver::theme_has_support() ) { + $wp_edit_blocks_dependencies[] = 'wp-editor-classic-layout-styles'; + } + global $editor_styles; if ( ! is_array( $editor_styles ) || count( $editor_styles ) === 0 ) { // Include opinionated block styles if no $editor_styles are declared, so the editor never appears broken. @@ -375,6 +380,15 @@ function gutenberg_register_packages_styles( $styles ) { ); $styles->add_data( 'wp-reset-editor-styles', 'rtl', 'replace' ); + gutenberg_override_style( + $styles, + 'wp-editor-classic-layout-styles', + gutenberg_url( 'build/edit-post/classic.css' ), + array(), + $version + ); + $styles->add_data( 'wp-editor-classic-layout-styles', 'rtl', 'replace' ); + gutenberg_override_style( $styles, 'wp-edit-blocks', diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 7e466ee3d54a1b..9cd49fb82cfed7 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -97,13 +97,6 @@ * This allows us to create normalization styles that are easily overridden by editor styles. */ -// Provide every block with a default base margin. This margin provides a consistent spacing -// between blocks in the editor. -.block-editor-block-list__block { - margin-top: $default-block-margin; - margin-bottom: $default-block-margin; -} - // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. #end-resizable-editor-section { display: none; diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss index 3d80b997668702..c1c1aec88e38d7 100644 --- a/packages/block-library/src/spacer/editor.scss +++ b/packages/block-library/src/spacer/editor.scss @@ -21,7 +21,6 @@ .block-library-spacer__resize-container { clear: both; - margin-bottom: $default-block-margin; // Don't show the horizontal indicator. .components-resizable-box__handle::before { diff --git a/packages/edit-post/src/classic.scss b/packages/edit-post/src/classic.scss new file mode 100644 index 00000000000000..a58b9b07052b90 --- /dev/null +++ b/packages/edit-post/src/classic.scss @@ -0,0 +1,113 @@ +// This needs specificity to override the editor styles. +.editor-styles-wrapper .wp-block { + margin-left: auto; + margin-right: auto; +} + +// Depreacted style needed for the block widths and alignments. +// for themes that don't support the new layout (theme.json) +.wp-block { + max-width: $content-width; + + // Provide every block with a default base margin. This margin provides a consistent spacing + // between blocks in the editor. + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; + + &[data-align="wide"] { + max-width: $wide-content-width; + } + + &[data-align="full"] { + max-width: none; + } + + // Alignments. + &[data-align="left"], + &[data-align="right"] { + width: 100%; + + // When images are floated, the block itself should collapse to zero height. + height: 0; + + &::before { + content: none; + } + } + + // Left. + &[data-align="left"] > * { + /*!rtl:begin:ignore*/ + float: left; + margin-right: 2em; + /*!rtl:end:ignore*/ + } + + // Right. + &[data-align="right"] > * { + /*!rtl:begin:ignore*/ + float: right; + margin-left: 2em; + /*!rtl:end:ignore*/ + } + + // Wide and full-wide. + &[data-align="full"], + &[data-align="wide"] { + clear: both; + } +} + +// Full Width Blocks +// specificity required to only target immediate child Blocks of a Group +.wp-block-group > [data-align="full"] { + margin-left: auto; + margin-right: auto; +} + +// Full Width Blocks with a background (ie: has padding) +.wp-block-group.has-background > [data-align="full"] { + // note: using position `left` causes hoz scrollbars so + // we opt to use margin instead + // the 30px matches the hoz padding applied in `theme.scss` + // added when the Block has a background set + margin-left: -30px; + + // 60px here is x2 the hoz padding from `theme.scss` added when + // the Block has a background set + // note: also duplicated below for full width Groups + width: calc(100% + 60px); +} + +/** +* Group: Full Width Alignment +*/ +[data-align="full"] .wp-block-group { + // Non-full Width Blocks + // specificity required to only target immediate child Blocks of Group + > .wp-block { + padding-left: $block-padding; + padding-right: $block-padding; + + @include break-small() { + padding-left: 0; + padding-right: 0; + } + } + + // Full Width Blocks + // specificity required to only target immediate child Blocks of Group + > [data-align="full"] { + padding-right: 0; + padding-left: 0; + left: 0; + width: 100%; + max-width: none; + } + + // Full Width Blocks with a background (ie: has padding) + // note: also duplicated above for all Group widths + &.has-background > [data-align="full"] { + width: calc(100% + 60px); + } +} diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 0c9da0ae76a82e..e65447be8cb6bc 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -94,7 +94,6 @@ function Layout( { styles } ) { showIconLabels, hasReducedUI, showBlockBreadcrumbs, - supportsLayout, } = useSelect( ( select ) => { const editorSettings = select( 'core/editor' ).getEditorSettings(); return { @@ -115,7 +114,6 @@ function Layout( { styles } ) { isInserterOpened: select( editPostStore ).isInserterOpened(), mode: select( editPostStore ).getEditorMode(), isRichEditingEnabled: editorSettings.richEditingEnabled, - supportsLayout: editorSettings.supportsLayout, hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), previousShortcut: select( keyboardShortcutsStore @@ -141,7 +139,6 @@ function Layout( { styles } ) { 'has-fixed-toolbar': hasFixedToolbar, 'has-metaboxes': hasActiveMetaboxes, 'show-icon-labels': showIconLabels, - 'supports-layout': supportsLayout, } ); const openSidebarPanel = () => openGeneralSidebar( diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 3a5fee6452b076..f1d29371aad63b 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -115,112 +115,3 @@ height: 100%; } } - -// Depreacted style needed for the block widths and alignments. -// for themes that don't support the new layout (theme.json) -.edit-post-layout:not(.supports-layout) { - .wp-block { - max-width: $content-width; - margin-left: auto; - margin-right: auto; - - &[data-align="wide"] { - max-width: $wide-content-width; - } - - &[data-align="full"] { - max-width: none; - } - - // Alignments. - &[data-align="left"], - &[data-align="right"] { - width: 100%; - - // When images are floated, the block itself should collapse to zero height. - height: 0; - - &::before { - content: none; - } - } - - // Left. - &[data-align="left"] > * { - /*!rtl:begin:ignore*/ - float: left; - margin-right: 2em; - /*!rtl:end:ignore*/ - } - - // Right. - &[data-align="right"] > * { - /*!rtl:begin:ignore*/ - float: right; - margin-left: 2em; - /*!rtl:end:ignore*/ - } - - // Wide and full-wide. - &[data-align="full"], - &[data-align="wide"] { - clear: both; - } - - } - - // Full Width Blocks - // specificity required to only target immediate child Blocks of a Group - .wp-block-group > [data-align="full"] { - margin-left: auto; - margin-right: auto; - } - - // Full Width Blocks with a background (ie: has padding) - .wp-block-group.has-background > [data-align="full"] { - // note: using position `left` causes hoz scrollbars so - // we opt to use margin instead - // the 30px matches the hoz padding applied in `theme.scss` - // added when the Block has a background set - margin-left: -30px; - - // 60px here is x2 the hoz padding from `theme.scss` added when - // the Block has a background set - // note: also duplicated below for full width Groups - width: calc(100% + 60px); - } - - /** - * Group: Full Width Alignment - */ - [data-align="full"] .wp-block-group { - - // Non-full Width Blocks - // specificity required to only target immediate child Blocks of Group - > .wp-block { - padding-left: $block-padding; - padding-right: $block-padding; - - @include break-small() { - padding-left: 0; - padding-right: 0; - } - } - - // Full Width Blocks - // specificity required to only target immediate child Blocks of Group - > [data-align="full"] { - padding-right: 0; - padding-left: 0; - left: 0; - width: 100%; - max-width: none; - } - - // Full Width Blocks with a background (ie: has padding) - // note: also duplicated above for all Group widths - &.has-background > [data-align="full"] { - width: calc(100% + 60px); - } - } -}