Skip to content

Commit

Permalink
Layout: Move layout definitions out of theme.json (#50621)
Browse files Browse the repository at this point in the history 
* Layout: Try moving layout definitions out of theme.json, but retain in block editor settings

* Update comment

* Add duplicate layout definitions in JS.

* Fix some of the JS tests

* Update PHP tests

* Remove layout definitions from settings

* A couple more removals that I previously missed
  • Loading branch information
@andrewserong
andrewserong authored Jun 14, 2023
1 parent 3547e1c commit f05cf6b
Show file tree
Hide file tree
Showing 17 changed files with 475 additions and 399 deletions.
194 changes: 186 additions & 8 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,189 @@
* @package gutenberg
*/

/**
* Returns layout definitions, keyed by layout type.
*
* Provides a common definition of slugs, classnames, base styles, and spacing styles for each layout type.
* When making changes or additions to layout definitions, the corresponding JavaScript definitions should
* also be updated.
*
* @return array[] Layout definitions.
*/
function gutenberg_get_layout_definitions() {
$layout_definitions = array(
'default' => array(
'name' => 'default',
'slug' => 'flow',
'className' => 'is-layout-flow',
'baseStyles' => array(
array(
'selector' => ' > .alignleft',
'rules' => array(
'float' => 'left',
'margin-inline-start' => '0',
'margin-inline-end' => '2em',
),
),
array(
'selector' => ' > .alignright',
'rules' => array(
'float' => 'right',
'margin-inline-start' => '2em',
'margin-inline-end' => '0',
),
),
array(
'selector' => ' > .aligncenter',
'rules' => array(
'margin-left' => 'auto !important',
'margin-right' => 'auto !important',
),
),
),
'spacingStyles' => array(
array(
'selector' => ' > :first-child:first-child',
'rules' => array(
'margin-block-start' => '0',
),
),
array(
'selector' => ' > :last-child:last-child',
'rules' => array(
'margin-block-end' => '0',
),
),
array(
'selector' => ' > *',
'rules' => array(
'margin-block-start' => null,
'margin-block-end' => '0',
),
),
),
),
'constrained' => array(
'name' => 'constrained',
'slug' => 'constrained',
'className' => 'is-layout-constrained',
'baseStyles' => array(
array(
'selector' => ' > .alignleft',
'rules' => array(
'float' => 'left',
'margin-inline-start' => '0',
'margin-inline-end' => '2em',
),
),
array(
'selector' => ' > .alignright',
'rules' => array(
'float' => 'right',
'margin-inline-start' => '2em',
'margin-inline-end' => '0',
),
),
array(
'selector' => ' > .aligncenter',
'rules' => array(
'margin-left' => 'auto !important',
'margin-right' => 'auto !important',
),
),
array(
'selector' => ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))',
'rules' => array(
'max-width' => 'var(--wp--style--global--content-size)',
'margin-left' => 'auto !important',
'margin-right' => 'auto !important',
),
),
array(
'selector' => ' > .alignwide',
'rules' => array(
'max-width' => 'var(--wp--style--global--wide-size)',
),
),
),
'spacingStyles' => array(
array(
'selector' => ' > :first-child:first-child',
'rules' => array(
'margin-block-start' => '0',
),
),
array(
'selector' => ' > :last-child:last-child',
'rules' => array(
'margin-block-end' => '0',
),
),
array(
'selector' => ' > *',
'rules' => array(
'margin-block-start' => null,
'margin-block-end' => '0',
),
),
),
),
'flex' => array(
'name' => 'flex',
'slug' => 'flex',
'className' => 'is-layout-flex',
'displayMode' => 'flex',
'baseStyles' => array(
array(
'selector' => '',
'rules' => array(
'flex-wrap' => 'wrap',
'align-items' => 'center',
),
),
array(
'selector' => ' > *',
'rules' => array(
'margin' => '0',
),
),
),
'spacingStyles' => array(
array(
'selector' => '',
'rules' => array(
'gap' => null,
),
),
),
),
'grid' => array(
'name' => 'grid',
'slug' => 'grid',
'className' => 'is-layout-grid',
'displayMode' => 'grid',
'baseStyles' => array(
array(
'selector' => ' > *',
'rules' => array(
'margin' => '0',
),
),
),
'spacingStyles' => array(
array(
'selector' => '',
'rules' => array(
'gap' => null,
),
),
),
),
);

return $layout_definitions;
}

/**
* Registers the layout block attribute for block types that support it.
*
Expand Down Expand Up @@ -400,16 +583,11 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
return (string) $content;
}

$global_settings = gutenberg_get_global_settings();
$global_layout_settings = _wp_array_get( $global_settings, array( 'layout' ), null );
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );

if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] && ! $global_layout_settings ) {
return $block_content;
}
$global_settings = gutenberg_get_global_settings();
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );

$class_names = array();
$layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
$layout_definitions = gutenberg_get_layout_definitions();
$container_class = wp_unique_id( 'wp-container-' );
$layout_classname = '';

Expand Down
4 changes: 2 additions & 2 deletions lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,7 @@ class WP_Theme_JSON_Gutenberg {
* @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
* @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', 'shadow.defaultPresets',
* `position.fixed` and `position.sticky`.
* @since 6.3.0 Removed `layout.definitions`.
* @var array
*/
const VALID_SETTINGS = array(
Expand Down Expand Up @@ -373,7 +374,6 @@ class WP_Theme_JSON_Gutenberg {
),
'layout' => array(
'contentSize' => null,
'definitions' => null,
'wideSize' => null,
),
'position' => array(
Expand Down Expand Up @@ -1274,7 +1274,7 @@ protected function get_layout_styles( $block_metadata ) {
$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
$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_definitions = gutenberg_get_layout_definitions();
$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.
Expand Down
Loading

0 comments on commit f05cf6b

Please sign in to comment.