diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 65f2d0cefd9d2..9e649939434db 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -96,9 +96,6 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= "flex-wrap: $flex_wrap;"; if ( 'horizontal' === $layout_orientation ) { $style .= 'align-items: center;'; - if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) { - $style .= '--layout-direction: row;'; - } /** * Add this style only if is not empty for backwards compatibility, * since we intend to convert blocks that had flex layout implemented @@ -106,27 +103,11 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support */ if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};"; - if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) { - // --layout-justification-setting allows children to inherit the value regardless or row or column direction. - $style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};"; - $style .= "--layout-wrap: $flex_wrap;"; - $style .= "--layout-justify: {$justify_content_options[ $layout['justifyContent'] ]};"; - $style .= '--layout-align: center;'; - } } } else { $style .= 'flex-direction: column;'; - if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) { - $style .= '--layout-direction: column;'; - } if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};"; - if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) { - // --layout-justification-setting allows children to inherit the value regardless or row or column direction. - $style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};"; - $style .= '--layout-justify: initial;'; - $style .= "--layout-align: {$justify_content_options[ $layout['justifyContent'] ]};"; - } } } $style .= '}'; @@ -134,7 +115,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= "$selector > * { margin: 0; }"; } - return $style; + return apply_filters( 'layout_styles', $style, $selector, $layout ); } /** diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 968e7694db634..56a24f73989dc 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -11,6 +11,7 @@ import { arrowDown, } from '@wordpress/icons'; import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components'; +import { applyFilters } from '@wordpress/hooks'; /** * Internal dependencies @@ -85,10 +86,7 @@ export default { ); }, save: function FlexLayoutStyle( { selector, layout } ) { - const { - orientation = 'horizontal', - setCascadingProperties = false, - } = layout; + const { orientation = 'horizontal' } = layout; const blockGapSupport = useSetting( 'spacing.blockGap' ); const hasBlockGapStylesSupport = blockGapSupport !== null; const justifyContent = @@ -97,53 +95,43 @@ export default { const flexWrap = flexWrapOptions.includes( layout.flexWrap ) ? layout.flexWrap : 'wrap'; - let rowOrientation = ` + const rowOrientation = ` flex-direction: row; align-items: center; justify-content: ${ justifyContent }; `; - if ( setCascadingProperties ) { - // --layout-justification-setting allows children to inherit the value - // regardless or row or column direction. - rowOrientation += ` - --layout-justification-setting: ${ justifyContent }; - --layout-direction: row; - --layout-wrap: ${ flexWrap }; - --layout-justify: ${ justifyContent }; - --layout-align: center; - `; - } const alignItems = alignItemsMap[ layout.justifyContent ] || alignItemsMap.left; - let columnOrientation = ` + const columnOrientation = ` flex-direction: column; align-items: ${ alignItems }; `; - if ( setCascadingProperties ) { - columnOrientation += ` - --layout-justification-setting: ${ alignItems }; - --layout-direction: column; - --layout-justify: initial; - --layout-align: ${ alignItems }; - `; + const styleContent = ` + ${ appendSelectors( selector ) } { + display: flex; + gap: ${ + hasBlockGapStylesSupport + ? 'var( --wp--style--block-gap, 0.5em )' + : '0.5em' + }; + flex-wrap: ${ flexWrap }; + ${ orientation === 'horizontal' ? rowOrientation : columnOrientation } } - return ( - + ${ appendSelectors( selector, '> *' ) } { + margin: 0; + } + `; + return ( + ); }, getOrientation( layout ) { diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index 595cd4d755e67..96a049e9f0bad 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -102,8 +102,7 @@ "allowSwitching": false, "allowInheriting": false, "default": { - "type": "flex", - "setCascadingProperties": true + "type": "flex" } } }, diff --git a/packages/block-library/src/navigation/deprecated.js b/packages/block-library/src/navigation/deprecated.js index dae72b0c71898..e9a5c0a219841 100644 --- a/packages/block-library/src/navigation/deprecated.js +++ b/packages/block-library/src/navigation/deprecated.js @@ -43,7 +43,6 @@ const migrateWithLayout = ( attributes ) => { Object.assign( updatedAttributes, { layout: { type: 'flex', - setCascadingProperties: 'true', ...( itemsJustification && { justifyContent: itemsJustification, } ), @@ -135,7 +134,6 @@ const v6 = { allowInheriting: false, default: { type: 'flex', - setCascadingProperties: true, }, }, }, diff --git a/packages/block-library/src/navigation/hooks.js b/packages/block-library/src/navigation/hooks.js new file mode 100644 index 0000000000000..d1e6681b009b3 --- /dev/null +++ b/packages/block-library/src/navigation/hooks.js @@ -0,0 +1,56 @@ +// Used with the default, horizontal flex orientation. +const justifyContentMap = { + left: 'flex-start', + right: 'flex-end', + center: 'center', + 'space-between': 'space-between', +}; + +// Used with the vertical (column) flex orientation. +const alignItemsMap = { + left: 'flex-start', + right: 'flex-end', + center: 'center', +}; + +export function addStylesToLayout( + styleContent, + selector, + appendSelectors, + layout +) { + if ( ! layout ) { + return styleContent; + } + + const { orientation = 'horizontal' } = layout; + const justifyContent = + justifyContentMap[ layout.justifyContent ] || justifyContentMap.left; + const alignItems = + alignItemsMap[ layout.justifyContent ] || alignItemsMap.left; + + let customProperties = ``; + + if ( orientation === 'horizontal' ) { + // --layout-justification-setting allows children to inherit the value + // regardless or row or column direction. + customProperties += ` + --layout-justification-setting: ${ justifyContent }; + --layout-direction: row; + --layout-wrap: ${ layout.flexWrap || 'wrap' }; + --layout-justify: ${ justifyContent }; + --layout-align: center; + `; + } else { + customProperties += ` + --layout-justification-setting: ${ alignItems }; + --layout-direction: column; + --layout-justify: initial; + --layout-align: ${ alignItems }; + `; + } + + return `${ styleContent } ${ appendSelectors( selector ) } { + ${ customProperties } + }`; +} diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js index fe3b2d555bd2e..cd85cf63abd5f 100644 --- a/packages/block-library/src/navigation/index.js +++ b/packages/block-library/src/navigation/index.js @@ -3,6 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { navigation as icon } from '@wordpress/icons'; +import { addFilter } from '@wordpress/hooks'; /** * Internal dependencies @@ -11,6 +12,7 @@ import metadata from './block.json'; import edit from './edit'; import save from './save'; import deprecated from './deprecated'; +import { addStylesToLayout } from './hooks'; const { name } = metadata; @@ -50,3 +52,10 @@ export const settings = { save, deprecated, }; + +// Importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects +addFilter( + 'blockEditor.FlexLayoutStyle', + 'core/navigation', + addStylesToLayout +); diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index d9eb7fbb889ae..c414842c09a0e 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -605,3 +605,48 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl } add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' ); + +function block_core_navigation_add_styles_to_layout( $style, $selector, $layout ) { + if ( ! isset( $layout['type'] ) || 'flex' !== $layout['type'] ) { + return $style; + } + + $custom_properties = ''; + $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal'; + $justify_content_options = array( + 'left' => 'flex-start', + 'right' => 'flex-end', + 'center' => 'center', + ); + $flex_wrap_options = array( 'wrap', 'nowrap' ); + $flex_wrap = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ? + $layout['flexWrap'] : + 'wrap'; + + if ( 'horizontal' === $layout_orientation ) { + $custom_properties .= '--layout-direction: row;'; + + if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { + // --layout-justification-setting allows children to inherit the value regardless or row or column direction. + $custom_properties .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};"; + $custom_properties .= "--layout-wrap: $flex_wrap;"; + $custom_properties .= "--layout-justify: {$justify_content_options[ $layout['justifyContent'] ]};"; + $custom_properties .= '--layout-align: center;'; + } + } else { + $custom_properties .= '--layout-direction: column;'; + + if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { + // --layout-justification-setting allows children to inherit the value regardless or row or column direction. + $custom_properties .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};"; + $custom_properties .= '--layout-justify: initial;'; + $custom_properties .= "--layout-align: {$justify_content_options[ $layout['justifyContent'] ]};"; + } + } + + $style .= "$selector { $custom_properties }"; + + return $style; +} + +add_filter( 'layout_styles', 'block_core_navigation_add_styles_to_layout', 10, 3 ); \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.json b/test/integration/fixtures/blocks/core__navigation__deprecated-1.json index 69a9ac1b8d44d..cfb40604c2908 100644 --- a/test/integration/fixtures/blocks/core__navigation__deprecated-1.json +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.json @@ -9,7 +9,6 @@ "overlayMenu": "mobile", "layout": { "type": "flex", - "setCascadingProperties": "true", "orientation": "horizontal" } }, diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html index be38304146800..a5bd94f1762ae 100644 --- a/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html @@ -1,3 +1,3 @@ - + diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json index 2796f5d9fe8fd..95408c9eb1a61 100644 --- a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json @@ -10,7 +10,6 @@ "fontFamily": "cambria-georgia", "layout": { "type": "flex", - "setCascadingProperties": "true", "orientation": "horizontal" } }, diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html index 85ecd3fd94024..f421695f40f9a 100644 --- a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v5.json b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.json index b851644f32aed..a7f66f17027c1 100644 --- a/test/integration/fixtures/blocks/core__navigation__deprecated-v5.json +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.json @@ -9,7 +9,6 @@ "overlayMenu": "never", "layout": { "type": "flex", - "setCascadingProperties": "true", "justifyContent": "center", "orientation": "vertical" } diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.serialized.html index 8166dfb51a1be..688b6c199ed9d 100644 --- a/test/integration/fixtures/blocks/core__navigation__deprecated-v5.serialized.html +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated.json b/test/integration/fixtures/blocks/core__navigation__deprecated.json index a9df1a99a149e..d09d93fac9605 100644 --- a/test/integration/fixtures/blocks/core__navigation__deprecated.json +++ b/test/integration/fixtures/blocks/core__navigation__deprecated.json @@ -15,7 +15,6 @@ }, "layout": { "type": "flex", - "setCascadingProperties": "true", "orientation": "horizontal" } }, diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated.serialized.html index e3a1a7ee03582..3b13ea0931cd6 100644 --- a/test/integration/fixtures/blocks/core__navigation__deprecated.serialized.html +++ b/test/integration/fixtures/blocks/core__navigation__deprecated.serialized.html @@ -1,3 +1,3 @@ - +