← All changes | lib/block-supports/layout.php +24 -19 12.6.0 → 12.1.0 View file →

		@@ -28,21 +28,20 @@
28	28	/**
29	29	* Generates the CSS corresponding to the provided layout.
30	30	*
31	31	* @param string $selector CSS selector.
32		- * @param array $layout Layout object. The one that is passed has already checked the existence of default block layout.
	32	+ * @param array $layout Layout object. The one that is passed has already checked the existance of default block layout.
33	33	* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
34		- * @param string $gap_value The block gap value to apply.
35	34	*
36	35	* @return string CSS style.
37	36	*/
38		-function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null ) {
	37	+function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
39	38	$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
40	39
41	40	$style = '';
42	41	if ( 'default' === $layout_type ) {
43		- $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
44		- $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
	42	+ $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : null;
	43	+ $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : null;
45	44
46	45	$all_max_width_value = $content_size ? $content_size : $wide_size;
47	46	$wide_max_width_value = $wide_size ? $wide_size : $content_size;
48	47
		@@ -65,11 +64,10 @@
65	64
66	65	$style .= "$selector .alignleft { float: left; margin-right: 2em; }";
67	66	$style .= "$selector .alignright { float: right; margin-left: 2em; }";
68	67	if ( $has_block_gap_support ) {
69		- $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
70		- $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
71		- $style .= "$selector > * + * { margin-top: $gap_style; margin-bottom: 0; }";
	68	+ $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
	69	+ $style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
72	70	}
73	71	} elseif ( 'flex' === $layout_type ) {
74	72	$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
75	73
		@@ -90,10 +88,9 @@
90	88
91	89	$style = "$selector {";
92	90	$style .= 'display: flex;';
93	91	if ( $has_block_gap_support ) {
94		- $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
95		- $style .= "gap: $gap_style;";
	92	+ $style .= 'gap: var( --wp--style--block-gap, 0.5em );';
96	93	} else {
97	94	$style .= 'gap: 0.5em;';
98	95	}
99	96	$style .= "flex-wrap: $flex_wrap;";
		@@ -105,15 +102,28 @@
105	102	* by custom css.
106	103	*/
107	104	if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
108	105	$style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
	106	+ if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
	107	+ // --layout-justification-setting allows children to inherit the value regardless or row or column direction.
	108	+ $style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
	109	+ $style .= '--layout-direction: row;';
	110	+ $style .= "--layout-wrap: $flex_wrap;";
	111	+ $style .= "--layout-justify: {$justify_content_options[ $layout['justifyContent'] ]};";
	112	+ $style .= '--layout-align: center;';
	113	+ }
109	114	}
110	115	} else {
111	116	$style .= 'flex-direction: column;';
112	117	if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
113	118	$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
114		- } else {
115		- $style .= 'align-items: flex-start;';
	119	+ if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
	120	+ // --layout-justification-setting allows children to inherit the value regardless or row or column direction.
	121	+ $style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
	122	+ $style .= '--layout-direction: column;';
	123	+ $style .= '--layout-justify: initial;';
	124	+ $style .= "--layout-align: {$justify_content_options[ $layout['justifyContent'] ]};";
	125	+ }
116	126	}
117	127	}
118	128	$style .= '}';
119	129
		@@ -149,15 +159,10 @@
149	159	}
150	160	$used_layout = $default_layout;
151	161	}
152	162
153		- $id = uniqid();
154		- $gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
155		- // Skip if gap value contains unsupported characters.
156		- // Regex for CSS value borrowed from `safecss_filter_attr`, and used here
157		- // because we only want to match against the value, not the CSS attribute.
158		- $gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
159		- $style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support, $gap_value );
	163	+ $id = uniqid();
	164	+ $style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
160	165	// This assumes the hook only applies to blocks with a single wrapper.
161	166	// I think this is a reasonable limitation for that particular hook.
162	167	$content = preg_replace(
163	168	'/' . preg_quote( 'class="', '/' ) . '/',