From 6fbc632d8652185d10f25a091978bc4eba540dd3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 28 Jul 2022 17:44:00 +1000 Subject: [PATCH 01/29] Try content width column as new layout type --- lib/block-supports/layout.php | 25 +- .../wordpress-6.1/class-wp-theme-json-6-1.php | 64 ++--- lib/compat/wordpress-6.1/theme.json | 60 +++++ packages/block-editor/src/hooks/layout.js | 20 +- packages/block-editor/src/layouts/column.js | 246 ++++++++++++++++++ packages/block-editor/src/layouts/flow.js | 202 +------------- packages/block-editor/src/layouts/index.js | 3 +- packages/block-library/src/group/block.json | 6 +- packages/block-library/src/group/edit.js | 5 +- 9 files changed, 390 insertions(+), 241 deletions(-) create mode 100644 packages/block-editor/src/layouts/column.js diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 7047b4a3a28f0f..db5148eaca19a9 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -42,6 +42,16 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; $layout_styles = array(); if ( 'default' === $layout_type ) { + if ( $has_block_gap_support ) { + if ( is_array( $gap_value ) ) { + $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null; + } + if ( $gap_value && ! $should_skip_gap_serialization ) { + $style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }"; + $style .= "$selector > * + * { margin-block-start: $gap_value; margin-block-end: 0; }"; + } + } + } elseif ( 'column' === $layout_type ) { $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : ''; $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : ''; @@ -254,20 +264,19 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false; $default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() ); $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout; + $class_names = array(); + $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() ); + $block_classname = wp_get_block_default_classname( $block['blockName'] ); + $container_class = wp_unique_id( 'wp-container-' ); + $layout_classname = ''; + $use_global_padding = gutenberg_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) && ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ); + if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) { if ( ! $global_layout_settings ) { return $block_content; } - $used_layout = $global_layout_settings; } - $class_names = array(); - $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() ); - $block_classname = wp_get_block_default_classname( $block['blockName'] ); - $container_class = wp_unique_id( 'wp-container-' ); - $layout_classname = ''; - $use_global_padding = gutenberg_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) && ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ); - if ( $use_global_padding ) { $class_names[] = 'has-global-padding'; } diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index eb5b351dd67b12..c81b0366ba7e79 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -87,7 +87,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { * @var string[] */ const ELEMENTS = array( - 'link' => 'a:where(:not(.wp-element-button))', // The where is needed to lower the specificity. + 'link' => 'a:not(.wp-element-button)', 'heading' => 'h1, h2, h3, h4, h5, h6', 'h1' => 'h1', 'h2' => 'h2', @@ -758,16 +758,31 @@ function( $pseudo_selector ) use ( $selector ) { } } - /* - * Reset default browser margin on the root body element. - * This is set on the root selector **before** generating the ruleset - * from the `theme.json`. This is to ensure that if the `theme.json` declares - * `margin` in its `spacing` declaration for the `body` element then these - * user-generated values take precedence in the CSS cascade. - * @link https://github.com/WordPress/gutenberg/issues/36147. - */ if ( static::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= 'body { margin: 0; }'; + /* + * Reset default browser margin on the root body element. + * This is set on the root selector **before** generating the ruleset + * from the `theme.json`. This is to ensure that if the `theme.json` declares + * `margin` in its `spacing` declaration for the `body` element then these + * user-generated values take precedence in the CSS cascade. + * @link https://github.com/WordPress/gutenberg/issues/36147. + */ + $block_rules .= 'body { margin: 0;'; + + /* + * If there are content and wide widths in theme.json, output them + * as custom properties on the body element so all blocks can use them. + */ + if ( isset( $settings['layout']['contentSize'] ) && $settings['layout']['contentSize'] || isset( $settings['layout']['wideSize'] ) && $settings['layout']['wideSize'] ) { + $content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize']; + $content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial'; + $wide_size = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize']; + $wide_size = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial'; + $block_rules .= '--wp--style--global--content-size: ' . $content_size . ';'; + $block_rules .= '--wp--style--global--wide-size: ' . $wide_size . ';'; + } + + $block_rules .= '}'; } // 2. Generate and append the rules that use the general selector. @@ -1295,7 +1310,7 @@ protected function get_layout_styles( $block_metadata ) { $has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support. $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() ); $layout_definitions = _wp_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() ); - $layout_selector_pattern = '/^[a-zA-Z0-9\-\.\ *+>]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, and child combinator selectors. + $layout_selector_pattern = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors. // Gap styles will only be output if the theme has block gap support, or supports a fallback gap. // Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value. @@ -1355,25 +1370,14 @@ protected function get_layout_styles( $block_metadata ) { } } - if ( ! $has_block_gap_support ) { - // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles. - $format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)'; - $layout_selector = sprintf( - $format, - $selector, - $class_name, - $spacing_rule['selector'] - ); - } else { - $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s'; - $layout_selector = sprintf( - $format, - $selector, - $class_name, - $spacing_rule['selector'] - ); - } - $block_rules .= static::to_ruleset( $layout_selector, $declarations ); + $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s'; + $layout_selector = sprintf( + $format, + $selector, + $class_name, + $spacing_rule['selector'] + ); + $block_rules .= static::to_ruleset( $layout_selector, $declarations ); } } } diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json index 5d06385c0bb814..6954ad9a2eac94 100644 --- a/lib/compat/wordpress-6.1/theme.json +++ b/lib/compat/wordpress-6.1/theme.json @@ -234,6 +234,66 @@ } ] }, + "column": { + "name": "column", + "slug": "column", + "className": "is-layout-column", + "baseStyles": [ + { + "selector": " > .alignleft", + "rules": { + "float": "left", + "margin-inline-start": "0", + "margin-inline-end": "2em" + } + }, + { + "selector": " > .alignright", + "rules": { + "float": "right", + "margin-inline-start": "2em", + "margin-inline-end": "0" + } + }, + { + "selector": " > .aligncenter", + "rules": { + "margin-left": "auto !important", + "margin-right": "auto !important" + } + }, + { + "selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))", + "rules": { + "max-width": "var(--wp--style--global--content-size)", + "margin-left": "auto !important", + "margin-right": "auto !important" + } + }, + { + "selector": " > .alignwide", + "rules": { + "max-width": "var(--wp--style--global--wide-size)" + } + } + ], + "spacingStyles": [ + { + "selector": " > *", + "rules": { + "margin-block-start": "0", + "margin-block-end": "0" + } + }, + { + "selector": " > * + *", + "rules": { + "margin-block-start": null, + "margin-block-end": "0" + } + } + ] + }, "flex": { "name": "flex", "slug": "flex", diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 69b5810b0f1062..31daff7ba658d0 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -110,11 +110,14 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { // Only show the inherit toggle if it's supported, // a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values), - // and that the default / flow layout type is in use, as this is the only one that supports inheritance. + // and either the default / flow or the column layout type is in use, as the toggle switches from one to the other. const showInheritToggle = !! ( allowInheriting && !! defaultThemeLayout && - ( ! layout?.type || layout?.type === 'default' || layout?.inherit ) + ( ! layout?.type || + layout?.type === 'default' || + layout?.type === 'column' || + layout?.inherit ) ); const usedLayout = layout || defaultBlockLayout || {}; @@ -141,12 +144,17 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { { showInheritToggle && ( <> setAttributes( { layout: { - inherit: ! inherit, + type: + layoutType?.name === 'column' + ? 'default' + : 'column', }, } ) } @@ -170,7 +178,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { /> ) } - { ! inherit && layoutType && ( + { layoutType && layoutType.name !== 'default' && ( +
+
+ { + nextWidth = + 0 > parseFloat( nextWidth ) + ? '0' + : nextWidth; + onChange( { + ...layout, + contentSize: nextWidth, + } ); + } } + units={ units } + /> + +
+
+ { + nextWidth = + 0 > parseFloat( nextWidth ) + ? '0' + : nextWidth; + onChange( { + ...layout, + wideSize: nextWidth, + } ); + } } + units={ units } + /> + +
+
+
+ +
+ +

+ { __( + 'Customize the width for all elements that are assigned to the center or wide columns.' + ) } +

+ + ); + }, + toolBarControls: function DefaultLayoutToolbarControls() { + return null; + }, + getLayoutStyle: function getLayoutStyle( { + selector, + layout = {}, + style, + blockName, + hasBlockGapSupport, + layoutDefinitions, + } ) { + const { contentSize, wideSize } = layout; + const blockGapStyleValue = getGapBoxControlValueFromStyle( + style?.spacing?.blockGap + ); + // If a block's block.json skips serialization for spacing or + // spacing.blockGap, don't apply the user-defined value to the styles. + const blockGapValue = + blockGapStyleValue?.top && + ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) + ? blockGapStyleValue?.top + : ''; + + let output = + !! contentSize || !! wideSize + ? ` + ${ appendSelectors( + selector, + '> :where(:not(.alignleft):not(.alignright):not(.alignfull))' + ) } { + max-width: ${ contentSize ?? wideSize }; + margin-left: auto !important; + margin-right: auto !important; + } + ${ appendSelectors( selector, '> .alignwide' ) } { + max-width: ${ wideSize ?? contentSize }; + } + ${ appendSelectors( selector, '> .alignfull' ) } { + max-width: none; + } + ` + : ''; + + // If there is custom padding, add negative margins for alignfull blocks. + if ( style?.spacing?.padding ) { + // The style object might be storing a preset so we need to make sure we get a usable value. + const paddingValues = getCSSRules( style ); + paddingValues.forEach( ( rule ) => { + if ( rule.key === 'paddingRight' ) { + output += ` + ${ appendSelectors( selector, '> .alignfull' ) } { + margin-right: calc(${ rule.value } * -1); + } + `; + } else if ( rule.key === 'paddingLeft' ) { + output += ` + ${ appendSelectors( selector, '> .alignfull' ) } { + margin-left: calc(${ rule.value } * -1); + } + `; + } + } ); + } + + // Output blockGap styles based on rules contained in layout definitions in theme.json. + if ( hasBlockGapSupport && blockGapValue ) { + output += getBlockGapCSS( + selector, + layoutDefinitions, + 'column', + blockGapValue + ); + } + return output; + }, + getOrientation() { + return 'vertical'; + }, + getAlignments( layout ) { + const alignmentInfo = getAlignmentsInfo( layout ); + if ( layout.alignments !== undefined ) { + if ( ! layout.alignments.includes( 'none' ) ) { + layout.alignments.unshift( 'none' ); + } + return layout.alignments.map( ( alignment ) => ( { + name: alignment, + info: alignmentInfo[ alignment ], + } ) ); + } + const { contentSize, wideSize } = layout; + + const alignments = [ + { name: 'left' }, + { name: 'center' }, + { name: 'right' }, + ]; + + if ( contentSize ) { + alignments.unshift( { name: 'full' } ); + } + + if ( wideSize ) { + alignments.unshift( { name: 'wide', info: alignmentInfo.wide } ); + } + + alignments.unshift( { name: 'none', info: alignmentInfo.none } ); + + return alignments; + }, +}; + +/** + * Helper method to assign contextual info to clarify + * alignment settings. + * + * Besides checking if `contentSize` and `wideSize` have a + * value, we now show this information only if their values + * are not a `css var`. This needs to change when parsing + * css variables land. + * + * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752 + * + * @param {Object} layout The layout object. + * @return {Object} An object with contextual info per alignment. + */ +function getAlignmentsInfo( layout ) { + const { contentSize, wideSize } = layout; + const alignmentInfo = {}; + const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i; + if ( sizeRegex.test( contentSize ) ) { + // translators: %s: container size (i.e. 600px etc) + alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize ); + } + if ( sizeRegex.test( wideSize ) ) { + // translators: %s: container size (i.e. 600px etc) + alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize ); + } + return alignmentInfo; +} diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index f0e084d623b17b..6f6ab4d51db436 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -1,122 +1,32 @@ /** * WordPress dependencies */ -import { - Button, - __experimentalUseCustomUnits as useCustomUnits, - __experimentalUnitControl as UnitControl, -} from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; -import { Icon, positionCenter, stretchWide } from '@wordpress/icons'; -import { getCSSRules } from '@wordpress/style-engine'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import useSetting from '../components/use-setting'; -import { appendSelectors, getBlockGapCSS } from './utils'; + +import { getBlockGapCSS } from './utils'; import { getGapBoxControlValueFromStyle } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; export default { name: 'default', label: __( 'Flow' ), - inspectorControls: function DefaultLayoutInspectorControls( { - layout, - onChange, - } ) { - const { wideSize, contentSize } = layout; - const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - '%', - 'px', - 'em', - 'rem', - 'vw', - ], - } ); - - return ( - <> -
-
- { - nextWidth = - 0 > parseFloat( nextWidth ) - ? '0' - : nextWidth; - onChange( { - ...layout, - contentSize: nextWidth, - } ); - } } - units={ units } - /> - -
-
- { - nextWidth = - 0 > parseFloat( nextWidth ) - ? '0' - : nextWidth; - onChange( { - ...layout, - wideSize: nextWidth, - } ); - } } - units={ units } - /> - -
-
-
- -
- -

- { __( - 'Customize the width for all elements that are assigned to the center or wide columns.' - ) } -

- - ); + inspectorControls: function DefaultLayoutInspectorControls() { + return null; }, toolBarControls: function DefaultLayoutToolbarControls() { return null; }, getLayoutStyle: function getLayoutStyle( { selector, - layout = {}, style, blockName, hasBlockGapSupport, layoutDefinitions, } ) { - const { contentSize, wideSize } = layout; const blockGapStyleValue = getGapBoxControlValueFromStyle( style?.spacing?.blockGap ); @@ -128,46 +38,7 @@ export default { ? blockGapStyleValue?.top : ''; - let output = - !! contentSize || !! wideSize - ? ` - ${ appendSelectors( - selector, - '> :where(:not(.alignleft):not(.alignright):not(.alignfull))' - ) } { - max-width: ${ contentSize ?? wideSize }; - margin-left: auto !important; - margin-right: auto !important; - } - ${ appendSelectors( selector, '> .alignwide' ) } { - max-width: ${ wideSize ?? contentSize }; - } - ${ appendSelectors( selector, '> .alignfull' ) } { - max-width: none; - } - ` - : ''; - - // If there is custom padding, add negative margins for alignfull blocks. - if ( style?.spacing?.padding ) { - // The style object might be storing a preset so we need to make sure we get a usable value. - const paddingValues = getCSSRules( style ); - paddingValues.forEach( ( rule ) => { - if ( rule.key === 'paddingRight' ) { - output += ` - ${ appendSelectors( selector, '> .alignfull' ) } { - margin-right: calc(${ rule.value } * -1); - } - `; - } else if ( rule.key === 'paddingLeft' ) { - output += ` - ${ appendSelectors( selector, '> .alignfull' ) } { - margin-left: calc(${ rule.value } * -1); - } - `; - } - } ); - } + let output; // Output blockGap styles based on rules contained in layout definitions in theme.json. if ( hasBlockGapSupport && blockGapValue ) { @@ -183,64 +54,7 @@ export default { getOrientation() { return 'vertical'; }, - getAlignments( layout ) { - const alignmentInfo = getAlignmentsInfo( layout ); - if ( layout.alignments !== undefined ) { - if ( ! layout.alignments.includes( 'none' ) ) { - layout.alignments.unshift( 'none' ); - } - return layout.alignments.map( ( alignment ) => ( { - name: alignment, - info: alignmentInfo[ alignment ], - } ) ); - } - const { contentSize, wideSize } = layout; - - const alignments = [ - { name: 'left' }, - { name: 'center' }, - { name: 'right' }, - ]; - - if ( contentSize ) { - alignments.unshift( { name: 'full' } ); - } - - if ( wideSize ) { - alignments.unshift( { name: 'wide', info: alignmentInfo.wide } ); - } - - alignments.unshift( { name: 'none', info: alignmentInfo.none } ); - - return alignments; + getAlignments() { + return []; }, }; - -/** - * Helper method to assign contextual info to clarify - * alignment settings. - * - * Besides checking if `contentSize` and `wideSize` have a - * value, we now show this information only if their values - * are not a `css var`. This needs to change when parsing - * css variables land. - * - * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752 - * - * @param {Object} layout The layout object. - * @return {Object} An object with contextual info per alignment. - */ -function getAlignmentsInfo( layout ) { - const { contentSize, wideSize } = layout; - const alignmentInfo = {}; - const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i; - if ( sizeRegex.test( contentSize ) ) { - // translators: %s: container size (i.e. 600px etc) - alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize ); - } - if ( sizeRegex.test( wideSize ) ) { - // translators: %s: container size (i.e. 600px etc) - alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize ); - } - return alignmentInfo; -} diff --git a/packages/block-editor/src/layouts/index.js b/packages/block-editor/src/layouts/index.js index 928876c1365f7c..4e5a9f6acc4ef9 100644 --- a/packages/block-editor/src/layouts/index.js +++ b/packages/block-editor/src/layouts/index.js @@ -3,8 +3,9 @@ */ import flex from './flex'; import flow from './flow'; +import column from './column'; -const layoutTypes = [ flow, flex ]; +const layoutTypes = [ flow, flex, column ]; /** * Retrieves a layout type by name. diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index cfe942dfc5a484..631c4c2d52acf0 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -66,7 +66,11 @@ "fontSize": true } }, - "__experimentalLayout": true + "__experimentalLayout": { + "default": { + "type": "column" + } + } }, "editorStyle": "wp-block-group-editor", "style": "wp-block-group" diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index e45613bbba25d3..d57f6d91277a2d 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -48,7 +48,10 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { ); const defaultLayout = useSetting( 'layout' ) || {}; const { tagName: TagName = 'div', templateLock, layout = {} } = attributes; - const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; + const usedLayout = + ! layout?.type || layout?.type === 'column' + ? { ...defaultLayout, ...layout, type: 'column' } + : layout; const { type = 'default' } = usedLayout; const layoutSupportEnabled = themeSupportsLayout || type !== 'default'; From 81768a331ef5501fcfc1c65ca04b51e25335e11e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 29 Jul 2022 14:24:42 +1000 Subject: [PATCH 02/29] Consolidate root selector rules. --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index c81b0366ba7e79..690b963790e844 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -758,6 +758,28 @@ function( $pseudo_selector ) use ( $selector ) { } } + // 2. Generate and append the rules that use the general selector. + $block_rules .= static::to_ruleset( $selector, $declarations ); + + // 3. Generate and append the rules that use the duotone selector. + if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { + $selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] ); + $block_rules .= static::to_ruleset( $selector_duotone, $declarations_duotone ); + } + + // 4. Generate Layout block gap styles. + if ( + static::ROOT_BLOCK_SELECTOR !== $selector && + ! empty( $block_metadata['name'] ) + ) { + $block_rules .= $this->get_layout_styles( $block_metadata ); + } + + // 5. Generate and append the feature level rulesets. + foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) { + $block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations ); + } + if ( static::ROOT_BLOCK_SELECTOR === $selector ) { /* * Reset default browser margin on the root body element. @@ -808,6 +830,7 @@ function( $pseudo_selector ) use ( $selector ) { } if ( static::ROOT_BLOCK_SELECTOR === $selector ) { + if ( $use_root_padding ) { $block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }'; $block_rules .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }'; @@ -819,6 +842,7 @@ function( $pseudo_selector ) use ( $selector ) { $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $block_gap_value = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' ); $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null; if ( $has_block_gap_support ) { $block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) ); From 464139b6b33e07c579974df8bd40801b7f40e05f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 29 Jul 2022 15:05:36 +1000 Subject: [PATCH 03/29] Undo rebase weirdness --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 690b963790e844..dfc334d44e6320 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -87,7 +87,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { * @var string[] */ const ELEMENTS = array( - 'link' => 'a:not(.wp-element-button)', + 'link' => 'a:where(:not(.wp-element-button))', // The where is needed to lower the specificity. 'heading' => 'h1, h2, h3, h4, h5, h6', 'h1' => 'h1', 'h2' => 'h2', @@ -1394,14 +1394,25 @@ protected function get_layout_styles( $block_metadata ) { } } - $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s'; - $layout_selector = sprintf( - $format, - $selector, - $class_name, - $spacing_rule['selector'] - ); - $block_rules .= static::to_ruleset( $layout_selector, $declarations ); + if ( ! $has_block_gap_support ) { + // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles. + $format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)'; + $layout_selector = sprintf( + $format, + $selector, + $class_name, + $spacing_rule['selector'] + ); + } else { + $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s'; + $layout_selector = sprintf( + $format, + $selector, + $class_name, + $spacing_rule['selector'] + ); + } + $block_rules .= static::to_ruleset( $layout_selector, $declarations ); } } } From 5e8010da9af3fd38d712c300460d073261fccdda Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 29 Jul 2022 17:03:49 +1000 Subject: [PATCH 04/29] Add deprecation and server-side legacy support --- lib/block-supports/layout.php | 5 ++ .../block-library/src/group/deprecated.js | 89 +++++++++++++++++++ 2 files changed, 94 insertions(+) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index db5148eaca19a9..5a3c210d193e77 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -277,6 +277,11 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { } } + // Set the correct layout type for blocks using legacy content width. + if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) { + $used_layout['type'] = 'column'; + } + if ( $use_global_padding ) { $class_names[] = 'has-global-padding'; } diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js index 63e0c5fef36740..ab36b3561676d3 100644 --- a/packages/block-library/src/group/deprecated.js +++ b/packages/block-library/src/group/deprecated.js @@ -10,6 +10,7 @@ import { InnerBlocks, getColorClassName, useBlockProps, + useInnerBlocksProps, } from '@wordpress/block-editor'; const migrateAttributes = ( attributes ) => { @@ -41,6 +42,94 @@ const migrateAttributes = ( attributes ) => { }; const deprecated = [ + // Version with default layout. + { + attributes: { + tagName: { + type: 'string', + default: 'div', + }, + templateLock: { + type: 'string', + }, + }, + supports: { + __experimentalOnEnter: true, + __experimentalSettings: true, + align: [ 'wide', 'full' ], + anchor: true, + ariaLabel: true, + html: false, + color: { + gradients: true, + link: true, + __experimentalDefaultControls: { + background: true, + text: true, + }, + }, + spacing: { + margin: [ 'top', 'bottom' ], + padding: true, + blockGap: true, + __experimentalDefaultControls: { + padding: true, + blockGap: true, + }, + }, + __experimentalBorder: { + color: true, + radius: true, + style: true, + width: true, + __experimentalDefaultControls: { + color: true, + radius: true, + style: true, + width: true, + }, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalLetterSpacing: true, + __experimentalTextTransform: true, + __experimentalDefaultControls: { + fontSize: true, + }, + }, + __experimentalLayout: true, + }, + save( { attributes: { tagName: Tag } } ) { + return ( + + ); + }, + isEligible: ( { layout } ) => + ! layout || layout.inherit || layout.contentSize, + migrate: ( attributes ) => { + const { layout = null } = attributes; + if ( ! layout ) { + return { + ...attributes, + layout: { + type: 'default', + }, + }; + } + if ( layout.inherit || layout.contentSize ) { + return { + ...attributes, + layout: { + ...layout, + type: 'column', + }, + }; + } + }, + }, // Version of the block with the double div. { attributes: { From 20499c0715aeb3e19f24fccaffe305f5934c0339 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 2 Aug 2022 15:37:06 +1000 Subject: [PATCH 05/29] Change group block approach --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/group/block.json | 12 +++++++----- packages/block-library/src/group/deprecated.js | 7 +------ packages/block-library/src/group/edit.js | 13 ++++++++++++- packages/block-library/src/group/variations.js | 5 +++-- 5 files changed, 24 insertions(+), 15 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 79bea8ee821fc5..7823d695843380 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -276,7 +276,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute - **Name:** core/group - **Category:** design - **Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** tagName, templateLock +- **Attributes:** layout, tagName, templateLock ## Heading diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 631c4c2d52acf0..a02406605e0b24 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -15,6 +15,12 @@ "templateLock": { "type": [ "string", "boolean" ], "enum": [ "all", "insert", false ] + }, + "layout": { + "type": "object", + "default": { + "type": "column" + } } }, "supports": { @@ -66,11 +72,7 @@ "fontSize": true } }, - "__experimentalLayout": { - "default": { - "type": "column" - } - } + "__experimentalLayout": true }, "editorStyle": "wp-block-group-editor", "style": "wp-block-group" diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js index ab36b3561676d3..2dcfdb65f66931 100644 --- a/packages/block-library/src/group/deprecated.js +++ b/packages/block-library/src/group/deprecated.js @@ -112,12 +112,7 @@ const deprecated = [ migrate: ( attributes ) => { const { layout = null } = attributes; if ( ! layout ) { - return { - ...attributes, - layout: { - type: 'default', - }, - }; + return attributes; } if ( layout.inherit || layout.contentSize ) { return { diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index d57f6d91277a2d..e31642796db343 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -1,7 +1,8 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; import { InnerBlocks, useBlockProps, @@ -70,6 +71,16 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { } ); + const { __unstableMarkNextChangeAsNotPersistent } = + useDispatch( blockEditorStore ); + const { type: layoutType = null } = layout; + useEffect( () => { + if ( layoutType ) { + __unstableMarkNextChangeAsNotPersistent(); + setAttributes( { layout: { type: layoutType } } ); + } + }, [ layoutType ] ); + return ( <> diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js index bbae57a0031c07..7e3cd18d1862db 100644 --- a/packages/block-library/src/group/variations.js +++ b/packages/block-library/src/group/variations.js @@ -9,12 +9,13 @@ const variations = [ name: 'group', title: __( 'Group' ), description: __( 'Gather blocks in a layout container.' ), - attributes: { layout: { type: 'default' } }, + attributes: { layout: { type: 'column' } }, scope: [ 'transform' ], isActive: ( blockAttributes ) => ! blockAttributes.layout || ! blockAttributes.layout?.type || - blockAttributes.layout?.type === 'default', + blockAttributes.layout?.type === 'default' || + blockAttributes.layout?.type === 'column', icon: group, }, { From 93a985a686a30276ac65739e8d7b9afbe7ffb177 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 3 Aug 2022 14:52:30 +1000 Subject: [PATCH 06/29] Fix buggy align behaviour --- packages/block-editor/src/layouts/flow.js | 25 ++++++++++++++-- packages/block-editor/src/layouts/utils.js | 34 ++++++++++++++++++++++ packages/block-library/src/group/edit.js | 7 ++--- 3 files changed, 59 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 6f6ab4d51db436..205faa95785fcc 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ -import { getBlockGapCSS } from './utils'; +import { getBlockGapCSS, getAlignmentsInfo } from './utils'; import { getGapBoxControlValueFromStyle } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; @@ -54,7 +54,26 @@ export default { getOrientation() { return 'vertical'; }, - getAlignments() { - return []; + getAlignments( layout ) { + const alignmentInfo = getAlignmentsInfo( layout ); + if ( layout.alignments !== undefined ) { + if ( ! layout.alignments.includes( 'none' ) ) { + layout.alignments.unshift( 'none' ); + } + return layout.alignments.map( ( alignment ) => ( { + name: alignment, + info: alignmentInfo[ alignment ], + } ) ); + } + + const alignments = [ + { name: 'left' }, + { name: 'center' }, + { name: 'right' }, + ]; + + alignments.unshift( { name: 'none', info: alignmentInfo.none } ); + + return alignments; }, }; diff --git a/packages/block-editor/src/layouts/utils.js b/packages/block-editor/src/layouts/utils.js index e2a27f7d7b121a..11996d4715312d 100644 --- a/packages/block-editor/src/layouts/utils.js +++ b/packages/block-editor/src/layouts/utils.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; + /** * Utility to generate the proper CSS selector for layout styles. * @@ -62,3 +67,32 @@ export function getBlockGapCSS( } return output; } + +/** + * Helper method to assign contextual info to clarify + * alignment settings. + * + * Besides checking if `contentSize` and `wideSize` have a + * value, we now show this information only if their values + * are not a `css var`. This needs to change when parsing + * css variables land. + * + * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752 + * + * @param {Object} layout The layout object. + * @return {Object} An object with contextual info per alignment. + */ +export function getAlignmentsInfo( layout ) { + const { contentSize, wideSize } = layout; + const alignmentInfo = {}; + const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i; + if ( sizeRegex.test( contentSize ) ) { + // translators: %s: container size (i.e. 600px etc) + alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize ); + } + if ( sizeRegex.test( wideSize ) ) { + // translators: %s: container size (i.e. 600px etc) + alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize ); + } + return alignmentInfo; +} diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index e31642796db343..c192b085a3f3c7 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -49,10 +49,9 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { ); const defaultLayout = useSetting( 'layout' ) || {}; const { tagName: TagName = 'div', templateLock, layout = {} } = attributes; - const usedLayout = - ! layout?.type || layout?.type === 'column' - ? { ...defaultLayout, ...layout, type: 'column' } - : layout; + const usedLayout = ! layout?.type + ? { ...defaultLayout, ...layout, type: 'default' } + : { ...defaultLayout, ...layout }; const { type = 'default' } = usedLayout; const layoutSupportEnabled = themeSupportsLayout || type !== 'default'; From f2fc2bb9d75d06b96dca470ad7a8325f5421d5be Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 4 Aug 2022 16:21:17 +1000 Subject: [PATCH 07/29] Alignments should work for classic themes --- .../use-available-alignments.js | 2 +- packages/block-editor/src/hooks/layout.js | 9 +++-- packages/block-editor/src/layouts/column.js | 33 ++----------------- .../src/components/visual-editor/index.js | 10 +++--- 4 files changed, 15 insertions(+), 39 deletions(-) diff --git a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js index d1d32f82d6d277..7c3ae4bff50a54 100644 --- a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js +++ b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js @@ -46,7 +46,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) { } // Starting here, it's the fallback for themes not supporting the layout config. - if ( layoutType.name !== 'default' ) { + if ( layoutType.name !== 'column' ) { return []; } const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout; diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 31daff7ba658d0..366581075d03d7 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -123,11 +123,14 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const usedLayout = layout || defaultBlockLayout || {}; const { inherit = false, type = 'default' } = usedLayout; /** - * `themeSupportsLayout` is only relevant to the `default/flow` - * layout and it should not be taken into account when other + * `themeSupportsLayout` is only relevant to the `default/flow` or + * `column` layouts and it should not be taken into account when other * `layout` types are used. */ - if ( type === 'default' && ! themeSupportsLayout ) { + if ( + ( type === 'default' || type === 'column' ) && + ! themeSupportsLayout + ) { return null; } const layoutType = getLayoutType( type ); diff --git a/packages/block-editor/src/layouts/column.js b/packages/block-editor/src/layouts/column.js index 31a8f1541d5941..23003163b9cea6 100644 --- a/packages/block-editor/src/layouts/column.js +++ b/packages/block-editor/src/layouts/column.js @@ -6,7 +6,7 @@ import { __experimentalUseCustomUnits as useCustomUnits, __experimentalUnitControl as UnitControl, } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { Icon, positionCenter, stretchWide } from '@wordpress/icons'; import { getCSSRules } from '@wordpress/style-engine'; @@ -14,7 +14,7 @@ import { getCSSRules } from '@wordpress/style-engine'; * Internal dependencies */ import useSetting from '../components/use-setting'; -import { appendSelectors, getBlockGapCSS } from './utils'; +import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils'; import { getGapBoxControlValueFromStyle } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; @@ -215,32 +215,3 @@ export default { return alignments; }, }; - -/** - * Helper method to assign contextual info to clarify - * alignment settings. - * - * Besides checking if `contentSize` and `wideSize` have a - * value, we now show this information only if their values - * are not a `css var`. This needs to change when parsing - * css variables land. - * - * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752 - * - * @param {Object} layout The layout object. - * @return {Object} An object with contextual info per alignment. - */ -function getAlignmentsInfo( layout ) { - const { contentSize, wideSize } = layout; - const alignmentInfo = {}; - const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i; - if ( sizeRegex.test( contentSize ) ) { - // translators: %s: container size (i.e. 600px etc) - alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize ); - } - if ( sizeRegex.test( wideSize ) ) { - // translators: %s: container size (i.e. 600px etc) - alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize ); - } - return alignmentInfo; -} diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 0d8614946a8144..9bfc50670302b5 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -181,10 +181,12 @@ export default function VisualEditor( { styles } ) { } if ( themeSupportsLayout ) { - return defaultLayout; + // We need to ensure support for wide and full alignments, + // so we add the column type. + return { ...defaultLayout, type: 'column' }; } - - return undefined; + // Set column layout for classic themes so all alignments are supported. + return { type: 'column' }; }, [ isTemplateMode, themeSupportsLayout, defaultLayout ] ); const titleRef = useRef(); @@ -265,7 +267,7 @@ export default function VisualEditor( { styles } ) { className={ isTemplateMode ? 'wp-site-blocks' - : 'is-layout-flow' // Ensure root level blocks receive default/flow blockGap styling rules. + : 'is-layout-column' // Ensure root level blocks receive default/flow blockGap styling rules. } __experimentalLayout={ layout } /> From f748feed9bda471f54cada1f75d1db75a877601f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 4 Aug 2022 17:26:05 +1000 Subject: [PATCH 08/29] Set output to empty string. --- packages/block-editor/src/layouts/flow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 205faa95785fcc..a41ced61cb6ab8 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -38,7 +38,7 @@ export default { ? blockGapStyleValue?.top : ''; - let output; + let output = ''; // Output blockGap styles based on rules contained in layout definitions in theme.json. if ( hasBlockGapSupport && blockGapValue ) { From f4e7d10f72495e01537b7aa5be9c3a852cb7a323 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 4 Aug 2022 17:43:14 +1000 Subject: [PATCH 09/29] Add layout type fallback for alignments --- .../block-alignment-control/use-available-alignments.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js index 7c3ae4bff50a54..e52a112a033a13 100644 --- a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js +++ b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js @@ -46,7 +46,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) { } // Starting here, it's the fallback for themes not supporting the layout config. - if ( layoutType.name !== 'column' ) { + if ( layoutType.name !== 'default' && layoutType.name !== 'column' ) { return []; } const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout; From f54f8128ea92bfaf4d4efedb9bb086f508330aac Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 4 Aug 2022 17:49:00 +1000 Subject: [PATCH 10/29] Regenerate fixtures --- test/integration/fixtures/blocks/core__comments.json | 6 +++--- .../fixtures/blocks/core__comments.serialized.html | 2 +- .../fixtures/blocks/core__comments__deprecated-1.json | 6 +++--- .../blocks/core__comments__deprecated-1.serialized.html | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/test/integration/fixtures/blocks/core__comments.json b/test/integration/fixtures/blocks/core__comments.json index 1ea7dcae007f65..3eacd7349eda86 100644 --- a/test/integration/fixtures/blocks/core__comments.json +++ b/test/integration/fixtures/blocks/core__comments.json @@ -74,6 +74,9 @@ "isValid": true, "attributes": { "tagName": "div", + "layout": { + "type": "flex" + }, "style": { "spacing": { "margin": { @@ -81,9 +84,6 @@ "bottom": "0px" } } - }, - "layout": { - "type": "flex" } }, "innerBlocks": [ diff --git a/test/integration/fixtures/blocks/core__comments.serialized.html b/test/integration/fixtures/blocks/core__comments.serialized.html index 6a4e6c09df37da..dc37e5ec933708 100644 --- a/test/integration/fixtures/blocks/core__comments.serialized.html +++ b/test/integration/fixtures/blocks/core__comments.serialized.html @@ -10,7 +10,7 @@
- +
diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.json b/test/integration/fixtures/blocks/core__comments__deprecated-1.json index ff97b76a5f3838..abde5c6008aa8b 100644 --- a/test/integration/fixtures/blocks/core__comments__deprecated-1.json +++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.json @@ -74,6 +74,9 @@ "isValid": true, "attributes": { "tagName": "div", + "layout": { + "type": "flex" + }, "style": { "spacing": { "margin": { @@ -81,9 +84,6 @@ "bottom": "0px" } } - }, - "layout": { - "type": "flex" } }, "innerBlocks": [ diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html index 33d5b11b2b9e04..9cf437715f0f72 100644 --- a/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html +++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html @@ -10,7 +10,7 @@
- +
From 6af5ecde010d542a2a19354a095f3452a4ded648 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 5 Aug 2022 10:05:51 +1000 Subject: [PATCH 11/29] Update snapshots --- .../plugins/__snapshots__/cpt-locking.test.js.snap | 4 ++-- .../various/__snapshots__/block-grouping.test.js.snap | 10 +++++----- .../block-hierarchy-navigation.test.js.snap | 2 +- .../__snapshots__/inserting-blocks.test.js.snap | 2 +- .../keep-styles-on-block-transforms.test.js.snap | 2 +- .../specs/editor/various/block-grouping.test.js | 4 ++-- .../specs/editor/various/multi-block-selection.test.js | 2 +- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap index 4f502b2fd29b07..cb960bc011f37f 100644 --- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap +++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap @@ -41,7 +41,7 @@ exports[`cpt locking template_lock all should not error when deleting the cotent `; exports[`cpt locking template_lock all unlocked group should allow blocks to be moved 1`] = ` -" +"

p1

@@ -55,7 +55,7 @@ exports[`cpt locking template_lock all unlocked group should allow blocks to be `; exports[`cpt locking template_lock all unlocked group should allow blocks to be removed 1`] = ` -" +"

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap index f3c24c200b971a..c4015e11643967 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = ` -" +"

Group Heading

@@ -17,7 +17,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of d `; exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via block transforms 1`] = ` -" +"

First Paragraph

@@ -33,7 +33,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t `; exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via options toolbar 1`] = ` -" +"

First Paragraph

@@ -49,7 +49,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t `; exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = ` -" +"

Group Heading

@@ -79,7 +79,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di `; exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = ` -" +"

Group Heading

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap index eb52e25922a661..ece9777ba7a32e 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap @@ -51,7 +51,7 @@ exports[`Navigating the block hierarchy should navigate using the list view side `; exports[`Navigating the block hierarchy should select the wrapper div for a group 1`] = ` -" +"

just a paragraph

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap index aa75e5d5ef89c2..7382f15d41f04b 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap @@ -54,7 +54,7 @@ lines preserved[/myshortcode] `; exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from block appender 1`] = ` -" +"

Paragraph inside group

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap index 14a9797eca4c34..fc313ea54ab4ed 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap @@ -27,7 +27,7 @@ exports[`Keep styles on block transforms Should keep the font size during a tran `; exports[`Keep styles on block transforms Should not include styles in the group block when grouping a block 1`] = ` -" +"

Line 1 to be made large

diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js index 7f12a9fccfeea2..d6e4c0bbfad0f1 100644 --- a/packages/e2e-tests/specs/editor/various/block-grouping.test.js +++ b/packages/e2e-tests/specs/editor/various/block-grouping.test.js @@ -148,8 +148,8 @@ describe( 'Block Grouping', () => { await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Group' ); expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` - " -
+ " +

1

diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js index 79d26ada4cea41..4457898014df45 100644 --- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js +++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js @@ -356,7 +356,7 @@ describe( 'Multi-block selection', () => { await page.mouse.up(); await page.keyboard.type( 'hi' ); expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` - " + "

hih text in group

From f52ba94f9ab9d5ba4efbf9f32e30eb7e1936c0ff Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 5 Aug 2022 13:42:08 +1000 Subject: [PATCH 12/29] Change nested blocks to buttons --- ...o-non-textual-element-image-spacer-1-chromium.txt | 10 +++++----- ...te-should-handle-paste-events-once-1-chromium.txt | 10 +++++----- test/e2e/specs/editor/various/copy-cut-paste.spec.js | 12 ++++++------ 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-can-copy-group-onto-non-textual-element-image-spacer-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-can-copy-group-onto-non-textual-element-image-spacer-1-chromium.txt index 201bddd8390141..ff0c2245d93942 100644 --- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-can-copy-group-onto-non-textual-element-image-spacer-1-chromium.txt +++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-can-copy-group-onto-non-textual-element-image-spacer-1-chromium.txt @@ -2,8 +2,8 @@

- -
-

P

-
- \ No newline at end of file + +
+
Click
+
+ \ No newline at end of file diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-handle-paste-events-once-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-handle-paste-events-once-1-chromium.txt index 201bddd8390141..ff0c2245d93942 100644 --- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-handle-paste-events-once-1-chromium.txt +++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-handle-paste-events-once-1-chromium.txt @@ -2,8 +2,8 @@

- -
-

P

-
- \ No newline at end of file + +
+
Click
+
+ \ No newline at end of file diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js index 3c1ecad1a9da11..c7041a8634e323 100644 --- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js +++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js @@ -134,11 +134,11 @@ test.describe( 'Copy/cut/paste', () => { } ) => { // Add group block with paragraph. await editor.insertBlock( { - name: 'core/group', + name: 'core/buttons', innerBlocks: [ { - name: 'core/paragraph', - attributes: { content: 'P' }, + name: 'core/button', + attributes: { text: 'Click' }, }, ], } ); @@ -188,11 +188,11 @@ test.describe( 'Copy/cut/paste', () => { } ) => { // Add group block with paragraph. await editor.insertBlock( { - name: 'core/group', + name: 'core/buttons', innerBlocks: [ { - name: 'core/paragraph', - attributes: { content: 'P' }, + name: 'core/button', + attributes: { text: 'Click' }, }, ], } ); From 86f5ed9f9edfe49a299feadf1ad77e9aefde1a53 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 5 Aug 2022 13:57:35 +1000 Subject: [PATCH 13/29] Fix php test diffs --- phpunit/class-wp-theme-json-test.php | 30 ++++++++++++++-------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 993675fd4d4fd4..efad52793619e9 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -35,7 +35,7 @@ public function test_get_stylesheet_generates_layout_styles( $layout_definitions // Results also include root site blocks styles. $this->assertEquals( - 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1em; }body { --wp--style--block-gap: 1em; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1em;margin-block-end: 0;}body .is-layout-flex{gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}', + 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1em; }body { --wp--style--block-gap: 1em; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1em;margin-block-end: 0;}body .is-layout-flex{gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}', $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -102,7 +102,7 @@ public function test_get_stylesheet_generates_fallback_gap_layout_styles( $layou // Results also include root site blocks styles. $this->assertEquals( - 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}', + 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}', $stylesheet ); } @@ -282,7 +282,7 @@ function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors() { ) ); - $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}'; @@ -321,7 +321,7 @@ function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given_proper ) ); - $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $element_styles = 'a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}'; @@ -360,7 +360,7 @@ function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_element ) ); - $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $element_styles = 'h4{background-color: red;color: green;}'; @@ -399,7 +399,7 @@ function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() { ) ); - $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}'; @@ -447,7 +447,7 @@ function test_get_stylesheet_handles_priority_of_elements_vs_block_elements_pseu ) ); - $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $element_styles = '.wp-block-group a:where(:not(.wp-element-button)){background-color: red;color: green;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}.wp-block-group a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}'; @@ -494,7 +494,7 @@ function test_get_stylesheet_handles_whitelisted_block_level_element_pseudo_sele ) ); - $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: black;color: yellow;}'; @@ -557,7 +557,7 @@ function test_get_stylesheet_with_block_support_feature_level_selectors() { ) ); - $base_styles = 'body{--wp--preset--color--green: green;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $base_styles = 'body{--wp--preset--color--green: green;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $block_styles = '.wp-block-test, .wp-block-test__wrapper{color: green;}.wp-block-test .inner, .wp-block-test__wrapper .inner{border-radius: 9999px;padding: 20px;}.wp-block-test .sub-heading, .wp-block-test__wrapper .sub-heading{font-size: 3em;}'; $preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}'; $expected = $base_styles . $block_styles . $preset_styles; @@ -651,7 +651,7 @@ function test_get_property_value_valid() { ) ); - $expected = 'body { margin: 0; }body{background-color: #ffffff;color: #000000;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-element-button, .wp-block-button__link{background-color: #000000;color: #ffffff;}'; + $expected = 'body{background-color: #ffffff;color: #000000;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-element-button, .wp-block-button__link{background-color: #000000;color: #ffffff;}'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); } @@ -683,7 +683,7 @@ function test_get_property_value_loop() { ) ); - $expected = 'body { margin: 0; }body{background-color: #ffffff;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-element-button, .wp-block-button__link{color: #ffffff;}'; + $expected = 'body{background-color: #ffffff;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-element-button, .wp-block-button__link{color: #ffffff;}'; $this->assertSame( $expected, $theme_json->get_stylesheet() ); } @@ -714,7 +714,7 @@ function test_get_property_value_recursion() { ) ); - $expected = 'body { margin: 0; }body{background-color: #ffffff;color: #ffffff;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-element-button, .wp-block-button__link{color: #ffffff;}'; + $expected = 'body{background-color: #ffffff;color: #ffffff;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-element-button, .wp-block-button__link{color: #ffffff;}'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); } @@ -737,7 +737,7 @@ function test_get_property_value_self() { ) ); - $expected = 'body { margin: 0; }body{background-color: #ffffff;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $expected = 'body{background-color: #ffffff;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); } @@ -1095,7 +1095,7 @@ function test_get_styles_for_block_with_padding_aware_alignments() { 'selector' => 'body', ); - $expected = 'body { margin: 0; }body{--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $expected = 'body{--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}body { margin: 0;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $this->assertEquals( $expected, $theme_json->get_styles_for_block( $metadata ) ); } @@ -1123,7 +1123,7 @@ function test_get_styles_for_block_without_padding_aware_alignments() { 'selector' => 'body', ); - $expected = 'body { margin: 0; }body{padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $expected = 'body{padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $this->assertEquals( $expected, $theme_json->get_styles_for_block( $metadata ) ); } } From b6b2483726c9328b22b0d372929860f7a932142c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 5 Aug 2022 14:39:17 +1000 Subject: [PATCH 14/29] Fix rebase inconsistency in layout --- lib/block-supports/layout.php | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 5a3c210d193e77..011c9dedfb97b7 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -47,8 +47,23 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null; } if ( $gap_value && ! $should_skip_gap_serialization ) { - $style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }"; - $style .= "$selector > * + * { margin-block-start: $gap_value; margin-block-end: 0; }"; + array_push( + $layout_styles, + array( + 'selector' => "$selector > *", + 'declarations' => array( + 'margin-block-start' => '0', + 'margin-block-end' => '0', + ), + ), + array( + 'selector' => "$selector > * + *", + 'declarations' => array( + 'margin-block-start' => $gap_value, + 'margin-block-end' => '0', + ), + ) + ); } } } elseif ( 'column' === $layout_type ) { From 454195f9a6f9173f18efb9e7c3044c94b7b39aeb Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 5 Aug 2022 14:40:59 +1000 Subject: [PATCH 15/29] Add test for content size variable output --- phpunit/class-wp-theme-json-test.php | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index efad52793619e9..6aeeadd78d8112 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -1126,4 +1126,28 @@ function test_get_styles_for_block_without_padding_aware_alignments() { $expected = 'body{padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $this->assertEquals( $expected, $theme_json->get_styles_for_block( $metadata ) ); } + + function test_get_styles_for_block_with_content_width() { + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => 2, + 'settings' => array( + 'layout' => array( + 'contentSize' => '800px', + 'wideSize' => '1000px', + ), + ), + ) + ); + + $metadata = array( + 'path' => array( + '0' => 'settings', + ), + 'selector' => 'body', + ); + + $expected = 'body { margin: 0;--wp--style--global--content-size: 800px;--wp--style--global--wide-size: 1000px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $this->assertEquals( $expected, $theme_json->get_styles_for_block( $metadata ) ); + } } From 47464ac326f0c82d40ba48d728d5d098462d9e22 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 5 Aug 2022 14:49:30 +1000 Subject: [PATCH 16/29] Add test for column layout. --- .../block-editor/src/layouts/test/column.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 packages/block-editor/src/layouts/test/column.js diff --git a/packages/block-editor/src/layouts/test/column.js b/packages/block-editor/src/layouts/test/column.js new file mode 100644 index 00000000000000..80eae08c500b0f --- /dev/null +++ b/packages/block-editor/src/layouts/test/column.js @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import column from '../column'; + +describe( 'getLayoutStyle', () => { + it( 'should return an empty string if no non-default params are provided', () => { + const expected = ''; + + const result = column.getLayoutStyle( { + selector: '.my-container', + layout: {}, + style: {}, + blockName: 'test-block', + hasBlockGapSupport: false, + layoutDefinitions: undefined, + } ); + + expect( result ).toBe( expected ); + } ); +} ); From 7f5874b002a92c0d5ddf669067092cf2b884bb00 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 9 Aug 2022 14:13:29 +1000 Subject: [PATCH 17/29] Fix loss of layout attributes. --- packages/block-library/src/group/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index c192b085a3f3c7..6f1b45462dd926 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -76,7 +76,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { useEffect( () => { if ( layoutType ) { __unstableMarkNextChangeAsNotPersistent(); - setAttributes( { layout: { type: layoutType } } ); + setAttributes( { layout: { ...layout, type: layoutType } } ); } }, [ layoutType ] ); From 155885eb23d689fc84b5bb0cf1c05febf0c5c4d1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 9 Aug 2022 16:53:54 +1000 Subject: [PATCH 18/29] Make layout changes work for blocks without deprecation --- packages/block-editor/src/hooks/layout.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 366581075d03d7..2e5c87f79b14c5 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -150,7 +150,9 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { label={ __( 'Inner blocks respect content width' ) } - checked={ layoutType?.name === 'column' } + checked={ + layoutType?.name === 'column' || !! inherit + } onChange={ () => setAttributes( { layout: { @@ -163,7 +165,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { } />

- { !! inherit + { !! inherit || layoutType?.name === 'column' ? __( 'Nested blocks use theme content width with options for full and wide widths.' ) @@ -292,7 +294,7 @@ export const withLayoutStyles = createHigherOrderComponent( const { default: defaultBlockLayout } = getBlockSupport( name, layoutBlockSupportKey ) || {}; const usedLayout = layout?.inherit - ? defaultThemeLayout + ? { ...layout, type: 'column' } : layout || defaultBlockLayout || {}; const layoutClasses = hasLayoutBlockSupport ? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions ) From 5d3573fd21f41c46b9f532d09873eb4ad1473975 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 9 Aug 2022 17:26:01 +1000 Subject: [PATCH 19/29] Fix custom content size controls --- packages/block-editor/src/hooks/layout.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 2e5c87f79b14c5..cc9e05fe0c2f51 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -121,7 +121,11 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { ); const usedLayout = layout || defaultBlockLayout || {}; - const { inherit = false, type = 'default' } = usedLayout; + const { + inherit = false, + type = 'default', + contentSize = null, + } = usedLayout; /** * `themeSupportsLayout` is only relevant to the `default/flow` or * `column` layouts and it should not be taken into account when other @@ -135,6 +139,8 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { } const layoutType = getLayoutType( type ); + const columnType = getLayoutType( 'column' ); + const onChangeType = ( newType ) => setAttributes( { layout: { type: newType } } ); const onChangeLayout = ( newLayout ) => @@ -151,7 +157,9 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { 'Inner blocks respect content width' ) } checked={ - layoutType?.name === 'column' || !! inherit + layoutType?.name === 'column' || + !! inherit || + !! contentSize } onChange={ () => setAttributes( { @@ -190,6 +198,13 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { layoutBlockSupport={ layoutBlockSupport } /> ) } + { columnType && !! contentSize && ( + + ) } { ! inherit && layoutType && ( From 6096d7d1b9a6b47b55124ebe56df201a0ccc43e6 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 12 Aug 2022 11:43:10 +1000 Subject: [PATCH 20/29] Fix post title --- packages/edit-post/src/components/visual-editor/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 9bfc50670302b5..05a0bdd7661c6e 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -245,7 +245,7 @@ export default function VisualEditor( { styles } ) { ! isTemplateMode && ( Date: Fri, 12 Aug 2022 11:45:50 +1000 Subject: [PATCH 21/29] Update new e2e snapshots --- ...Group-can-be-created-using-the-block-inserter-1-chromium.txt | 2 +- ...Group-can-be-created-using-the-slash-inserter-1-chromium.txt | 2 +- ...ocks-appended-to-it-using-the-button-appender-1-chromium.txt | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt index 44774b1bf76800..774c0fc18ec6b9 100644 --- a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt +++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt @@ -1,3 +1,3 @@ - +

\ No newline at end of file diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt index 44774b1bf76800..774c0fc18ec6b9 100644 --- a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt +++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt @@ -1,3 +1,3 @@ - +
\ No newline at end of file diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt index 09839ec9963532..07ee343b441124 100644 --- a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt +++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt @@ -1,4 +1,4 @@ - +

Group Block with a Paragraph

From 09756f363e48b3ecf797f2e819c0afd4f16113a1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 15 Aug 2022 14:21:49 +1000 Subject: [PATCH 22/29] Change layout type name to "constrained" --- lib/block-supports/layout.php | 4 +-- lib/compat/wordpress-6.1/theme.json | 8 +++--- .../use-available-alignments.js | 2 +- packages/block-editor/src/hooks/layout.js | 26 ++++++++++--------- .../src/layouts/{column.js => constrained.js} | 6 ++--- packages/block-editor/src/layouts/index.js | 4 +-- .../test/{column.js => constrained.js} | 4 +-- packages/block-library/src/group/block.json | 2 +- .../block-library/src/group/deprecated.js | 2 +- .../block-library/src/group/variations.js | 4 +-- .../__snapshots__/cpt-locking.test.js.snap | 4 +-- .../__snapshots__/block-grouping.test.js.snap | 10 +++---- .../block-hierarchy-navigation.test.js.snap | 2 +- .../inserting-blocks.test.js.snap | 2 +- ...ep-styles-on-block-transforms.test.js.snap | 2 +- .../editor/various/block-grouping.test.js | 4 +-- .../various/multi-block-selection.test.js | 2 +- .../src/components/visual-editor/index.js | 10 +++---- ...ed-using-the-block-inserter-1-chromium.txt | 2 +- ...ed-using-the-slash-inserter-1-chromium.txt | 2 +- ...t-using-the-button-appender-1-chromium.txt | 2 +- 21 files changed, 53 insertions(+), 51 deletions(-) rename packages/block-editor/src/layouts/{column.js => constrained.js} (98%) rename packages/block-editor/src/layouts/test/{column.js => constrained.js} (81%) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 011c9dedfb97b7..4310a6bc25b7ec 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -66,7 +66,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support ); } } - } elseif ( 'column' === $layout_type ) { + } elseif ( 'constrained' === $layout_type ) { $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : ''; $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : ''; @@ -294,7 +294,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { // Set the correct layout type for blocks using legacy content width. if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) { - $used_layout['type'] = 'column'; + $used_layout['type'] = 'constrained'; } if ( $use_global_padding ) { diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json index 6954ad9a2eac94..40432cedf38777 100644 --- a/lib/compat/wordpress-6.1/theme.json +++ b/lib/compat/wordpress-6.1/theme.json @@ -234,10 +234,10 @@ } ] }, - "column": { - "name": "column", - "slug": "column", - "className": "is-layout-column", + "constrained": { + "name": "constrained", + "slug": "constrained", + "className": "is-layout-constrained", "baseStyles": [ { "selector": " > .alignleft", diff --git a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js index e52a112a033a13..ba6f885a09cd55 100644 --- a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js +++ b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js @@ -46,7 +46,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) { } // Starting here, it's the fallback for themes not supporting the layout config. - if ( layoutType.name !== 'default' && layoutType.name !== 'column' ) { + if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) { return []; } const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout; diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index cc9e05fe0c2f51..2ba61d1e03b1e9 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -110,13 +110,13 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { // Only show the inherit toggle if it's supported, // a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values), - // and either the default / flow or the column layout type is in use, as the toggle switches from one to the other. + // and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other. const showInheritToggle = !! ( allowInheriting && !! defaultThemeLayout && ( ! layout?.type || layout?.type === 'default' || - layout?.type === 'column' || + layout?.type === 'constrained' || layout?.inherit ) ); @@ -128,18 +128,18 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { } = usedLayout; /** * `themeSupportsLayout` is only relevant to the `default/flow` or - * `column` layouts and it should not be taken into account when other + * `constrained` layouts and it should not be taken into account when other * `layout` types are used. */ if ( - ( type === 'default' || type === 'column' ) && + ( type === 'default' || type === 'constrained' ) && ! themeSupportsLayout ) { return null; } const layoutType = getLayoutType( type ); - const columnType = getLayoutType( 'column' ); + const constrainedType = getLayoutType( 'constrained' ); const onChangeType = ( newType ) => setAttributes( { layout: { type: newType } } ); @@ -157,7 +157,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { 'Inner blocks respect content width' ) } checked={ - layoutType?.name === 'column' || + layoutType?.name === 'constrained' || !! inherit || !! contentSize } @@ -165,15 +165,17 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { setAttributes( { layout: { type: - layoutType?.name === 'column' + layoutType?.name === + 'constrained' ? 'default' - : 'column', + : 'constrained', }, } ) } />

- { !! inherit || layoutType?.name === 'column' + { !! inherit || + layoutType?.name === 'constrained' ? __( 'Nested blocks use theme content width with options for full and wide widths.' ) @@ -198,8 +200,8 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { layoutBlockSupport={ layoutBlockSupport } /> ) } - { columnType && !! contentSize && ( - { it( 'should return an empty string if no non-default params are provided', () => { const expected = ''; - const result = column.getLayoutStyle( { + const result = constrained.getLayoutStyle( { selector: '.my-container', layout: {}, style: {}, diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index a02406605e0b24..cfc07d59d15b4a 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -19,7 +19,7 @@ "layout": { "type": "object", "default": { - "type": "column" + "type": "constrained" } } }, diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js index 2dcfdb65f66931..2a3ec02c5ed962 100644 --- a/packages/block-library/src/group/deprecated.js +++ b/packages/block-library/src/group/deprecated.js @@ -119,7 +119,7 @@ const deprecated = [ ...attributes, layout: { ...layout, - type: 'column', + type: 'constrained', }, }; } diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js index 7e3cd18d1862db..2b47fdb2a555c6 100644 --- a/packages/block-library/src/group/variations.js +++ b/packages/block-library/src/group/variations.js @@ -9,13 +9,13 @@ const variations = [ name: 'group', title: __( 'Group' ), description: __( 'Gather blocks in a layout container.' ), - attributes: { layout: { type: 'column' } }, + attributes: { layout: { type: 'constrained' } }, scope: [ 'transform' ], isActive: ( blockAttributes ) => ! blockAttributes.layout || ! blockAttributes.layout?.type || blockAttributes.layout?.type === 'default' || - blockAttributes.layout?.type === 'column', + blockAttributes.layout?.type === 'constrained', icon: group, }, { diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap index cb960bc011f37f..fcacbe069610c4 100644 --- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap +++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap @@ -41,7 +41,7 @@ exports[`cpt locking template_lock all should not error when deleting the cotent `; exports[`cpt locking template_lock all unlocked group should allow blocks to be moved 1`] = ` -" +"

p1

@@ -55,7 +55,7 @@ exports[`cpt locking template_lock all unlocked group should allow blocks to be `; exports[`cpt locking template_lock all unlocked group should allow blocks to be removed 1`] = ` -" +"

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap index c4015e11643967..ff3a356078f28e 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = ` -" +"

Group Heading

@@ -17,7 +17,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of d `; exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via block transforms 1`] = ` -" +"

First Paragraph

@@ -33,7 +33,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t `; exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via options toolbar 1`] = ` -" +"

First Paragraph

@@ -49,7 +49,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t `; exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = ` -" +"

Group Heading

@@ -79,7 +79,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di `; exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = ` -" +"

Group Heading

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap index ece9777ba7a32e..7a9abf86fc42b1 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap @@ -51,7 +51,7 @@ exports[`Navigating the block hierarchy should navigate using the list view side `; exports[`Navigating the block hierarchy should select the wrapper div for a group 1`] = ` -" +"

just a paragraph

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap index 7382f15d41f04b..42789fa8552368 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap @@ -54,7 +54,7 @@ lines preserved[/myshortcode] `; exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from block appender 1`] = ` -" +"

Paragraph inside group

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap index fc313ea54ab4ed..c8ec4b42cb3468 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap @@ -27,7 +27,7 @@ exports[`Keep styles on block transforms Should keep the font size during a tran `; exports[`Keep styles on block transforms Should not include styles in the group block when grouping a block 1`] = ` -" +"

Line 1 to be made large

diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js index d6e4c0bbfad0f1..dd51f31016c8d3 100644 --- a/packages/e2e-tests/specs/editor/various/block-grouping.test.js +++ b/packages/e2e-tests/specs/editor/various/block-grouping.test.js @@ -148,8 +148,8 @@ describe( 'Block Grouping', () => { await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Group' ); expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` - " -
+ " +

1

diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js index 4457898014df45..33d7295a4ab46e 100644 --- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js +++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js @@ -356,7 +356,7 @@ describe( 'Multi-block selection', () => { await page.mouse.up(); await page.keyboard.type( 'hi' ); expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` - " + "

hih text in group

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 05a0bdd7661c6e..a3c910be1db4dd 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -182,11 +182,11 @@ export default function VisualEditor( { styles } ) { if ( themeSupportsLayout ) { // We need to ensure support for wide and full alignments, - // so we add the column type. - return { ...defaultLayout, type: 'column' }; + // so we add the constrained type. + return { ...defaultLayout, type: 'constrained' }; } - // Set column layout for classic themes so all alignments are supported. - return { type: 'column' }; + // Set constrained layout for classic themes so all alignments are supported. + return { type: 'constrained' }; }, [ isTemplateMode, themeSupportsLayout, defaultLayout ] ); const titleRef = useRef(); @@ -267,7 +267,7 @@ export default function VisualEditor( { styles } ) { className={ isTemplateMode ? 'wp-site-blocks' - : 'is-layout-column' // Ensure root level blocks receive default/flow blockGap styling rules. + : 'is-layout-constrained' // Ensure root level blocks receive default/flow blockGap styling rules. } __experimentalLayout={ layout } /> diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt index 774c0fc18ec6b9..d98255c8f1b6a9 100644 --- a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt +++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt @@ -1,3 +1,3 @@ - +
\ No newline at end of file diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt index 774c0fc18ec6b9..d98255c8f1b6a9 100644 --- a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt +++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt @@ -1,3 +1,3 @@ - +
\ No newline at end of file diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt index 07ee343b441124..64b66427850811 100644 --- a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt +++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt @@ -1,4 +1,4 @@ - +

Group Block with a Paragraph

From 772906a5413ef24c5798f48a9b6c69222ebfeb8b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 16 Aug 2022 11:39:54 +1000 Subject: [PATCH 23/29] Update snapshots for new tests. --- .../Group-can-merge-into-group-with-Backspace-1-chromium.txt | 2 +- .../Group-can-merge-into-group-with-Backspace-2-chromium.txt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-1-chromium.txt index 11f6c1766c3d19..a7a6267ccc392b 100644 --- a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-1-chromium.txt +++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-1-chromium.txt @@ -1,4 +1,4 @@ - +

1

diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-2-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-2-chromium.txt index b7bf710d8b9e93..d3ea4948782144 100644 --- a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-2-chromium.txt +++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-2-chromium.txt @@ -1,4 +1,4 @@ - +

1

From 1f516f1a1d0655711e1cb4d242bbed257622c2e6 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 17 Aug 2022 11:49:22 +1000 Subject: [PATCH 24/29] Content size variables should be output in the site editor. --- .../test/use-global-styles-output.js | 13 +++++++++++++ .../global-styles/use-global-styles-output.js | 17 ++++++++++++++--- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js index b524d041abfdd1..8e8686ca4eed8e 100644 --- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js @@ -484,6 +484,19 @@ describe( 'global styles renderer', () => { '.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' ); } ); + it( 'should output content and wide size variables if values are specified', () => { + const tree = { + settings: { + layout: { + contentSize: '840px', + wideSize: '1100px', + }, + }, + }; + expect( toStyles( tree, 'body' ) ).toEqual( + 'body {margin: 0; --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' + ); + } ); } ); describe( 'getLayoutStyles', () => { diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index ca8ed71c2fd089..16f2dacba411f7 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -580,6 +580,7 @@ export const toStyles = ( const nodesWithStyles = getNodesWithStyles( tree, blockSelectors ); const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments; + const { contentSize, wideSize } = tree?.settings?.layout || {}; /* * Reset default browser margin on the root body element. @@ -589,13 +590,23 @@ export const toStyles = ( * user-generated values take precedence in the CSS cascade. * @link https://github.com/WordPress/gutenberg/issues/36147. */ - let ruleset = 'body {margin: 0;}'; + let ruleset = 'body {margin: 0;'; + + if ( contentSize ) { + ruleset += ` --wp--style--global--content-size: ${ contentSize };`; + } + + if ( wideSize ) { + ruleset += ` --wp--style--global--wide-size: ${ wideSize };`; + } if ( useRootPaddingAlign ) { - ruleset = - 'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }'; + ruleset += + 'padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left);'; } + ruleset += '}'; + nodesWithStyles.forEach( ( { selector, From 17124fbf603771f12d078983b97b57c41ca1b010 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 17 Aug 2022 11:56:43 +1000 Subject: [PATCH 25/29] Fix custom content sizes in editor. --- packages/block-editor/src/hooks/layout.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 2ba61d1e03b1e9..30a5b265ca10ab 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -310,9 +310,10 @@ export const withLayoutStyles = createHigherOrderComponent( const { layout } = attributes; const { default: defaultBlockLayout } = getBlockSupport( name, layoutBlockSupportKey ) || {}; - const usedLayout = layout?.inherit - ? { ...layout, type: 'constrained' } - : layout || defaultBlockLayout || {}; + const usedLayout = + layout?.inherit || layout?.contentSize || layout?.wideSize + ? { ...layout, type: 'constrained' } + : layout || defaultBlockLayout || {}; const layoutClasses = hasLayoutBlockSupport ? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions ) : null; From f22bee07a15d01ab25b5b19aab57b0d9e7a815d0 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 17 Aug 2022 14:01:35 +1000 Subject: [PATCH 26/29] Tidy up PHP. --- lib/block-supports/layout.php | 13 +++++++------ .../wordpress-6.1/class-wp-theme-json-6-1.php | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 4310a6bc25b7ec..1f9a3bb900c034 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -279,12 +279,6 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false; $default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() ); $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout; - $class_names = array(); - $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() ); - $block_classname = wp_get_block_default_classname( $block['blockName'] ); - $container_class = wp_unique_id( 'wp-container-' ); - $layout_classname = ''; - $use_global_padding = gutenberg_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) && ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ); if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) { if ( ! $global_layout_settings ) { @@ -292,6 +286,13 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { } } + $class_names = array(); + $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() ); + $block_classname = wp_get_block_default_classname( $block['blockName'] ); + $container_class = wp_unique_id( 'wp-container-' ); + $layout_classname = ''; + $use_global_padding = gutenberg_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) && ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ); + // Set the correct layout type for blocks using legacy content width. if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) { $used_layout['type'] = 'constrained'; diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index dfc334d44e6320..92334700f9838e 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -795,7 +795,7 @@ function( $pseudo_selector ) use ( $selector ) { * If there are content and wide widths in theme.json, output them * as custom properties on the body element so all blocks can use them. */ - if ( isset( $settings['layout']['contentSize'] ) && $settings['layout']['contentSize'] || isset( $settings['layout']['wideSize'] ) && $settings['layout']['wideSize'] ) { + if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) { $content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize']; $content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial'; $wide_size = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize']; From abd1bafd4a5f5b8e134477668792eb48965d87b1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 17 Aug 2022 17:44:25 +1000 Subject: [PATCH 27/29] Add deprecation fixtures --- .../core__group-layout-content-size.html | 11 ++++++ .../core__group-layout-content-size.json | 34 ++++++++++++++++++ ...ore__group-layout-content-size.parsed.json | 36 +++++++++++++++++++ ..._group-layout-content-size.serialized.html | 9 +++++ ...group-layout-content-size__deprecated.html | 11 ++++++ ...group-layout-content-size__deprecated.json | 35 ++++++++++++++++++ ...ayout-content-size__deprecated.parsed.json | 36 +++++++++++++++++++ ...t-content-size__deprecated.serialized.html | 9 +++++ .../fixtures/blocks/core__group.html | 18 +++++----- .../fixtures/blocks/core__group.json | 3 ++ .../fixtures/blocks/core__group.parsed.json | 21 ++++++----- .../blocks/core__group.serialized.html | 2 +- .../blocks/core__group__deprecated-3.html | 9 +++++ .../blocks/core__group__deprecated-3.json | 31 ++++++++++++++++ .../core__group__deprecated-3.parsed.json | 33 +++++++++++++++++ .../core__group__deprecated-3.serialized.html | 9 +++++ 16 files changed, 289 insertions(+), 18 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__group-layout-content-size.html create mode 100644 test/integration/fixtures/blocks/core__group-layout-content-size.json create mode 100644 test/integration/fixtures/blocks/core__group-layout-content-size.parsed.json create mode 100644 test/integration/fixtures/blocks/core__group-layout-content-size.serialized.html create mode 100644 test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.html create mode 100644 test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.json create mode 100644 test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.parsed.json create mode 100644 test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.serialized.html create mode 100644 test/integration/fixtures/blocks/core__group__deprecated-3.html create mode 100644 test/integration/fixtures/blocks/core__group__deprecated-3.json create mode 100644 test/integration/fixtures/blocks/core__group__deprecated-3.parsed.json create mode 100644 test/integration/fixtures/blocks/core__group__deprecated-3.serialized.html diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size.html b/test/integration/fixtures/blocks/core__group-layout-content-size.html new file mode 100644 index 00000000000000..40c7086854dc07 --- /dev/null +++ b/test/integration/fixtures/blocks/core__group-layout-content-size.html @@ -0,0 +1,11 @@ + +
+ +

This is a group block.

+ + + +

Group block content.

+ +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size.json b/test/integration/fixtures/blocks/core__group-layout-content-size.json new file mode 100644 index 00000000000000..8bc6a699a3b99c --- /dev/null +++ b/test/integration/fixtures/blocks/core__group-layout-content-size.json @@ -0,0 +1,34 @@ +[ + { + "name": "core/group", + "isValid": true, + "attributes": { + "tagName": "div", + "layout": { + "type": "constrained" + }, + "align": "full", + "backgroundColor": "secondary" + }, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "This is a group block.", + "dropCap": false + }, + "innerBlocks": [] + }, + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "Group block content.", + "dropCap": false + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size.parsed.json b/test/integration/fixtures/blocks/core__group-layout-content-size.parsed.json new file mode 100644 index 00000000000000..70d856933edb25 --- /dev/null +++ b/test/integration/fixtures/blocks/core__group-layout-content-size.parsed.json @@ -0,0 +1,36 @@ +[ + { + "blockName": "core/group", + "attrs": { + "align": "full", + "backgroundColor": "secondary", + "layout": { + "type": "constrained" + } + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t

This is a group block.

\n\t", + "innerContent": [ "\n\t

This is a group block.

\n\t" ] + }, + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t

Group block content.

\n\t", + "innerContent": [ "\n\t

Group block content.

\n\t" ] + } + ], + "innerHTML": "\n
\n\t\n\n\t\n
\n", + "innerContent": [ + "\n
\n\t", + null, + "\n\n\t", + null, + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size.serialized.html b/test/integration/fixtures/blocks/core__group-layout-content-size.serialized.html new file mode 100644 index 00000000000000..d75a5324df28f3 --- /dev/null +++ b/test/integration/fixtures/blocks/core__group-layout-content-size.serialized.html @@ -0,0 +1,9 @@ + +
+

This is a group block.

+ + + +

Group block content.

+
+ diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.html b/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.html new file mode 100644 index 00000000000000..d09dc3afbbd58c --- /dev/null +++ b/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.html @@ -0,0 +1,11 @@ + +
+ +

This is a group block.

+ + + +

Group block content.

+ +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.json b/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.json new file mode 100644 index 00000000000000..152c3e1750778d --- /dev/null +++ b/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.json @@ -0,0 +1,35 @@ +[ + { + "name": "core/group", + "isValid": true, + "attributes": { + "tagName": "div", + "align": "full", + "backgroundColor": "secondary", + "layout": { + "inherit": true, + "type": "constrained" + } + }, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "This is a group block.", + "dropCap": false + }, + "innerBlocks": [] + }, + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "Group block content.", + "dropCap": false + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.parsed.json b/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.parsed.json new file mode 100644 index 00000000000000..e3dbea323bdede --- /dev/null +++ b/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.parsed.json @@ -0,0 +1,36 @@ +[ + { + "blockName": "core/group", + "attrs": { + "align": "full", + "backgroundColor": "secondary", + "layout": { + "inherit": true + } + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t

This is a group block.

\n\t", + "innerContent": [ "\n\t

This is a group block.

\n\t" ] + }, + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t

Group block content.

\n\t", + "innerContent": [ "\n\t

Group block content.

\n\t" ] + } + ], + "innerHTML": "\n
\n\t\n\n\t\n
\n", + "innerContent": [ + "\n
\n\t", + null, + "\n\n\t", + null, + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.serialized.html b/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.serialized.html new file mode 100644 index 00000000000000..11749e1e2cfac7 --- /dev/null +++ b/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.serialized.html @@ -0,0 +1,9 @@ + +
+

This is a group block.

+ + + +

Group block content.

+
+ diff --git a/test/integration/fixtures/blocks/core__group.html b/test/integration/fixtures/blocks/core__group.html index df7eef39e38981..72241dc5c83f32 100644 --- a/test/integration/fixtures/blocks/core__group.html +++ b/test/integration/fixtures/blocks/core__group.html @@ -1,9 +1,11 @@ - -
-

This is a group block.

- + +
+ +

This is a group block.

+ - -

Group block content.

-
- + +

Group block content.

+ +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__group.json b/test/integration/fixtures/blocks/core__group.json index 2582fe6b87c4e7..3d2cc933d79574 100644 --- a/test/integration/fixtures/blocks/core__group.json +++ b/test/integration/fixtures/blocks/core__group.json @@ -4,6 +4,9 @@ "isValid": true, "attributes": { "tagName": "div", + "layout": { + "type": "default" + }, "align": "full", "backgroundColor": "secondary" }, diff --git a/test/integration/fixtures/blocks/core__group.parsed.json b/test/integration/fixtures/blocks/core__group.parsed.json index fcfcf54234c0fb..86a14e755531eb 100644 --- a/test/integration/fixtures/blocks/core__group.parsed.json +++ b/test/integration/fixtures/blocks/core__group.parsed.json @@ -3,31 +3,34 @@ "blockName": "core/group", "attrs": { "align": "full", - "backgroundColor": "secondary" + "backgroundColor": "secondary", + "layout": { + "type": "default" + } }, "innerBlocks": [ { "blockName": "core/paragraph", "attrs": {}, "innerBlocks": [], - "innerHTML": "\n

This is a group block.

\n", - "innerContent": [ "\n

This is a group block.

\n" ] + "innerHTML": "\n\t

This is a group block.

\n\t", + "innerContent": [ "\n\t

This is a group block.

\n\t" ] }, { "blockName": "core/paragraph", "attrs": {}, "innerBlocks": [], - "innerHTML": "\n

Group block content.

\n", - "innerContent": [ "\n

Group block content.

\n" ] + "innerHTML": "\n\t

Group block content.

\n\t", + "innerContent": [ "\n\t

Group block content.

\n\t" ] } ], - "innerHTML": "\n
\n\n
\n", + "innerHTML": "\n
\n\t\n\n\t\n\t
\n\t", "innerContent": [ - "\n
", + "\n
\n\t", null, - "\n\n", + "\n\n\t", null, - "
\n" + "\n\t
\n\t" ] } ] diff --git a/test/integration/fixtures/blocks/core__group.serialized.html b/test/integration/fixtures/blocks/core__group.serialized.html index df7eef39e38981..06deee13878095 100644 --- a/test/integration/fixtures/blocks/core__group.serialized.html +++ b/test/integration/fixtures/blocks/core__group.serialized.html @@ -1,4 +1,4 @@ - +

This is a group block.

diff --git a/test/integration/fixtures/blocks/core__group__deprecated-3.html b/test/integration/fixtures/blocks/core__group__deprecated-3.html new file mode 100644 index 00000000000000..df7eef39e38981 --- /dev/null +++ b/test/integration/fixtures/blocks/core__group__deprecated-3.html @@ -0,0 +1,9 @@ + +
+

This is a group block.

+ + + +

Group block content.

+
+ diff --git a/test/integration/fixtures/blocks/core__group__deprecated-3.json b/test/integration/fixtures/blocks/core__group__deprecated-3.json new file mode 100644 index 00000000000000..2582fe6b87c4e7 --- /dev/null +++ b/test/integration/fixtures/blocks/core__group__deprecated-3.json @@ -0,0 +1,31 @@ +[ + { + "name": "core/group", + "isValid": true, + "attributes": { + "tagName": "div", + "align": "full", + "backgroundColor": "secondary" + }, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "This is a group block.", + "dropCap": false + }, + "innerBlocks": [] + }, + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "Group block content.", + "dropCap": false + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__group__deprecated-3.parsed.json b/test/integration/fixtures/blocks/core__group__deprecated-3.parsed.json new file mode 100644 index 00000000000000..fcfcf54234c0fb --- /dev/null +++ b/test/integration/fixtures/blocks/core__group__deprecated-3.parsed.json @@ -0,0 +1,33 @@ +[ + { + "blockName": "core/group", + "attrs": { + "align": "full", + "backgroundColor": "secondary" + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n

This is a group block.

\n", + "innerContent": [ "\n

This is a group block.

\n" ] + }, + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n

Group block content.

\n", + "innerContent": [ "\n

Group block content.

\n" ] + } + ], + "innerHTML": "\n
\n\n
\n", + "innerContent": [ + "\n
", + null, + "\n\n", + null, + "
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__group__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__group__deprecated-3.serialized.html new file mode 100644 index 00000000000000..df7eef39e38981 --- /dev/null +++ b/test/integration/fixtures/blocks/core__group__deprecated-3.serialized.html @@ -0,0 +1,9 @@ + +
+

This is a group block.

+ + + +

Group block content.

+
+ From 78a3ed54aecd25b7a97b08c5bc55977a3c112604 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 22 Aug 2022 12:08:21 +1000 Subject: [PATCH 28/29] Fixed duplicated code after rebase hack job. Sorry! Fixed incoming failing test (formatted only). --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 22 ------------------- phpunit/class-wp-theme-json-test.php | 2 +- 2 files changed, 1 insertion(+), 23 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 92334700f9838e..f1371c04cacd35 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -807,28 +807,6 @@ function( $pseudo_selector ) use ( $selector ) { $block_rules .= '}'; } - // 2. Generate and append the rules that use the general selector. - $block_rules .= static::to_ruleset( $selector, $declarations ); - - // 3. Generate and append the rules that use the duotone selector. - if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { - $selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] ); - $block_rules .= static::to_ruleset( $selector_duotone, $declarations_duotone ); - } - - // 4. Generate Layout block gap styles. - if ( - static::ROOT_BLOCK_SELECTOR !== $selector && - ! empty( $block_metadata['name'] ) - ) { - $block_rules .= $this->get_layout_styles( $block_metadata ); - } - - // 5. Generate and append the feature level rulesets. - foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) { - $block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations ); - } - if ( static::ROOT_BLOCK_SELECTOR === $selector ) { if ( $use_root_padding ) { diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 6aeeadd78d8112..31e86ef79beecd 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -68,7 +68,7 @@ public function test_get_stylesheet_generates_layout_styles_with_spacing_presets // Results also include root site blocks styles. $this->assertEquals( - 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var(--wp--preset--spacing--60); }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}body .is-layout-flex{gap: var(--wp--preset--spacing--60);}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}', + 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var(--wp--preset--spacing--60); }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}body .is-layout-flex{gap: var(--wp--preset--spacing--60);}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}', $theme_json->get_stylesheet( array( 'styles' ) ) ); } From 49b12fb0c990bc8643ee190ce58358184f77ab7a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 22 Aug 2022 14:17:30 +1000 Subject: [PATCH 29/29] Increase block gap selector specificity. --- lib/block-supports/layout.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 1f9a3bb900c034..2581b986508aa9 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -57,7 +57,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support ), ), array( - 'selector' => "$selector > * + *", + 'selector' => "$selector$selector > * + *", 'declarations' => array( 'margin-block-start' => $gap_value, 'margin-block-end' => '0',