function filter_block_type_metadata( $metadata ) {
/**
* Disable the layout panel for all blocks.
*/
$metadata['supports']['__experimentalLayout'] = true;
//var_dump( $metadata['supports'] );
return $metadata;
}
add_filter( 'block_type_metadata', 'filter_block_type_metadata' );
function test(){
$support_layout = block_has_support( $block_type, array('__experimentalLayout' ), false );
var_dump( $support_layout );
}
add_filter('wp_body_open','test');
<div class="wp-site-blocks">
<div class="wp-block-group alignfull is-layout-default ">
<h2 class="wp-block-heading">hello world</h2>
<p>no constrained group</p>
</div>
<div class="wp-block-group alignfull is-layout-constrained ">
<h2 class="wp-block-heading">hello world</h2>
<p>constrained group</p>
</div>
<div class="wp-block-group alignfull is-layout-default ">
<p>has child block</p>
<div class="wp-block-group has-white-background-color has-background is-layout-constrained ">
<h2 class="wp-block-heading">hello world</h2>
<p>child block no constrained</p>
</div>
</div>
<div class="wp-block-group alignfull is-layout-constrained ">
<p>has child block</p>
<div class="wp-block-group has-white-background-color has-background is-layout-constrained ">
<h2 class="wp-block-heading">hello world</h2>
<p>child block constrained</p>
</div>
</div>
<div class="wp-block-group alignfull is-layout-flex is-nowrap ">
<p>has child block transform to row</p>
<div class="wp-block-group has-white-background-color has-background is-layout-constrained ">
<h2 class="wp-block-heading">hello world</h2>
<p>child block constrained</p>
</div>
</div>
<div class="wp-block-group alignfull is-layout-flex is-vertical ">
<p>has child block transform stack</p>
<p></p>
<div class="wp-block-group has-white-background-color has-background is-layout-constrained ">
<h2 class="wp-block-heading">hello world</h2>
<p>child block constrained</p>
</div>
</div>
<div style="grid-template-columns: repeat(auto-fill, minmax(min(45% , 100%), 1fr));" class="wp-block-group alignfull is-layout-grid is-flex-container ">
<p>has child block transform grid</p>
<div class="wp-block-group has-white-background-color has-background is-layout-constrained ">
<h2 class="wp-block-heading">hello world</h2>
<p>child block constrained</p>
</div>
</div>
</div><!-- wp:group {"className":"alignfull","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull"><!-- wp:heading -->
<h2 class="wp-block-heading">hello world</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>no constrained group</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"alignfull","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:heading -->
<h2 class="wp-block-heading">hello world</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>constrained group</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"alignfull","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph -->
<p>has child block</p>
<!-- /wp:paragraph -->
<!-- wp:group {"backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-background-color has-background"><!-- wp:heading -->
<h2 class="wp-block-heading">hello world</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>child block no constrained</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"alignfull","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph -->
<p>has child block</p>
<!-- /wp:paragraph -->
<!-- wp:group {"backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-background-color has-background"><!-- wp:heading -->
<h2 class="wp-block-heading">hello world</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>child block constrained</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"alignfull","layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph -->
<p>has child block transform to row</p>
<!-- /wp:paragraph -->
<!-- wp:group {"backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-background-color has-background"><!-- wp:heading -->
<h2 class="wp-block-heading">hello world</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>child block constrained</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"alignfull","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph -->
<p>has child block transform stack</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:group {"backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-background-color has-background"><!-- wp:heading -->
<h2 class="wp-block-heading">hello world</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>child block constrained</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"alignfull","layout":{"type":"grid","minimumColumnWidth":"45%"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph -->
<p>has child block transform grid</p>
<!-- /wp:paragraph -->
<!-- wp:group {"backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-background-color has-background"><!-- wp:heading -->
<h2 class="wp-block-heading">hello world</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>child block constrained</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->not work
**
* WordPress 6.3 layout difinitions move from theme.json to filter
*/
//remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
//remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
add_filter( 'wp_theme_json_data_theme', 'emulsion_layout_definitions' );
function emulsion_layout_definitions( $theme_json ) {
$layout_definitions = array(
"settings" => array(
"layout" => array(
'default' => array(
"definitions" => array(
'name' => 'default',
'slug' => 'flow',
'className' => 'is-layout-flow',
'baseStyles' => array(
array(
'selector' => ' > .alignleft',
'rules' => array(
'float' => 'left',
"width" => "var(--wp--custom--width--float)",
"max-width" => "calc(50% - 1.5rem)",
"margin" => "var(--wp--custom--margin--alignleft)",
"clear" => "left"
),
),
array(
'selector' => ' > .alignright',
'rules' => array(
"float" => "right",
"width" => "var(--wp--custom--width--float)",
"max-width" => "calc(50% - 1.5rem)",
"margin" => "var(--wp--custom--margin--alignright)",
"clear" => "right"
),
),
array(
'selector' => ' > .aligncenter',
'rules' => array(
"width" => "var(--wp--custom--width--aligncenter)",
"max-width" => "100%",
"margin-left" => "auto",
"margin-right" => "auto",
"margin" => "var(--wp--custom--margin--block)",
"clear" => "both"
),
),
array(
"selector" => " > *",
"rules" => array(
"width" => "var(--wp--custom--width--content)",
"margin-left" => "auto",
"margin-right" => "auto"
),
),
array(
"selector" => " > .alignwide",
"rules" => array(
"width" => "var(--wp--custom--width--wide)",
"max-width" => "100%",
"margin-left" => "auto",
"margin-right" => "auto",
"margin" => "var(--wp--custom--margin--block)"
)
),
array(
"selector" => " > .alignfull",
"rules" => array(
"width" => "var(--wp--custom--width--full)",
"max-width" => "100%",
"margin-left" => "auto",
"margin-right" => "auto",
"margin" => "var(--wp--custom--margin--container)"
)
)
),
'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' => "var(--wp--custom--margin--top)",
'margin-block-end' => "var(--wp--custom--margin--bottom)",
),
),
),
),
),
'constrained' => array(
'name' => 'constrained',
'slug' => 'constrained',
'className' => 'is-layout-constrained',
'baseStyles' => array(
array(
'selector' => ' > .alignleft',
'rules' => array(
"float" => "left",
"width" => "var(--wp--custom--width--float)",
"max-width" => "100%",
"margin" => "var(--wp--custom--margin--alignleft)",
"clear" => "left"
),
),
array(
'selector' => ' > .alignright',
'rules' => array(
"float" => "right",
"width" => "var(--wp--custom--width--float)",
"max-width" => "100%",
"margin" => "var(--wp--custom--margin--alignright)",
"clear" => "right"
),
),
array(
'selector' => ' > .aligncenter',
'rules' => array(
"width" => "var(--wp--custom--width--aligncenter)",
"max-width" => "100%",
"margin-left" => "auto",
"margin-right" => "auto",
"margin" => "var(--wp--custom--margin--block)",
"clear" => "both"
),
),
array(
'selector' => ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))',
'rules' => array(
'max-width' => '100%',
'margin-left' => 'auto',
'margin-right' => 'auto',
),
),
array(
'selector' => ' > *',
'rules' => array(
"width" => "var(--wp--custom--width--content)",
"max-width" => "100%",
"margin-left" => "auto",
"margin-right" => "auto"
),
),
array(
'selector' => ' > .alignwide',
'rules' => array(
"width" => "var(--wp--custom--width--wide)",
"max-width" => "100%",
"margin-left" => "auto",
"margin-right" => "auto",
"margin" => "var(--wp--custom--margin--block)"
),
),
array(
'selector' => ' > .alignfull',
'rules' => array(
"width" => "var(--wp--custom--width--full)",
"max-width" => "100%",
"margin-left" => "auto",
"margin-right" => "auto",
"margin" => "var(--wp--custom--margin--container)"
),
),
),
'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' => "var(--wp--custom--margin--top)",
'margin-block-end' => "var(--wp--custom--margin--bottom)",
),
),
),
),
'flex' => array(
'name' => 'flex',
'slug' => 'flex',
'className' => 'is-layout-flex',
'displayMode' => 'flex',
'baseStyles' => array(
array(
"selector" => ".fse-primary",
"rules" => array(
"width" => "var(--wp--custom--width--full)",
"max-width" => "100%",
"margin-left" => "auto",
"margin-right" => "auto",
"margin" => "var(--wp--custom--margin--container)",
"padding" => ".75rem"
)
),
array(
'selector' => '',
'rules' => array(
"align-items" => "flex-start",
"justify-content" => "center;",
"clear" => "both",
"float" => "none",
"margin" => "var(--wp--custom--margin--block)"
),
),
array(
'selector' => ' > *',
'rules' => array(
'margin' => '0',
"clear" => "both",
"float" => "none",
),
),
),
'spacingStyles' => array(
array(
'selector' => '',
'rules' => array(
'gap' => "var(--wp--custom--margin--gap)",
),
),
),
),
'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' => "var(--wp--custom--margin--gap)",
),
),
),
),
),
),
);
return $theme_json->update_with( $layout_definitions );
}