Skip to content

Commit c2c5c4e

Browse files
tellthemachinestellthemachines
committed
Implement front end styles
1 parent bd4c7d2 commit c2c5c4e

File tree

3 files changed

+114
-64
lines changed

3 files changed

+114
-64
lines changed

‎lib/block-supports/layout.php‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -573,14 +573,72 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
573573
$child_layout_styles = array();
574574

575575
$self_stretch = isset( $block['attrs']['style']['layout']['selfStretch'] ) ? $block['attrs']['style']['layout']['selfStretch'] : null;
576+
$self_align = isset( $block['attrs']['style']['layout']['selfAlign'] ) ? $block['attrs']['style']['layout']['selfAlign'] : null;
577+
$height = isset( $block['attrs']['style']['layout']['height'] ) ? $block['attrs']['style']['layout']['height'] : null;
578+
$width = isset( $block['attrs']['style']['layout']['width'] ) ? $block['attrs']['style']['layout']['width'] : null;
579+
580+
$parent_layout_type = 'default';
581+
if ( isset( $block['parentLayout']['type'] ) ) {
582+
$parent_layout_type = $block['parentLayout']['type'];
583+
} elseif ( isset( $block['parentLayout']['default']['type'] ) ) {
584+
$parent_layout_type = $block['parentLayout']['default']['type'];
585+
}
586+
587+
// Orientation is only used for flex layouts so its default is horizontal.
588+
$parent_orientation = isset( $block['parentLayout']['orientation'] ) ? $block['parentLayout']['orientation'] : 'horizontal';
589+
$vertical_parent_layout = in_array( $parent_layout_type, array( 'constrained', 'default' ), true ) || ( 'flex' === $parent_layout_type && 'vertical' === $parent_orientation );
576590

591+
// Support for legacy flexSize value.
577592
if ( 'fixed' === $self_stretch && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
578593
$child_layout_declarations['flex-basis'] = $block['attrs']['style']['layout']['flexSize'];
579594
$child_layout_declarations['box-sizing'] = 'border-box';
580595
} elseif ( 'fill' === $self_stretch ) {
581596
$child_layout_declarations['flex-grow'] = '1';
582597
}
583598

599+
if ( $vertical_parent_layout ) {
600+
// Width styles.
601+
if ( 'fixed' === $self_align && $width ) {
602+
$child_layout_declarations['max-width'] = $width;
603+
} elseif ( 'fixedNoShrink' === $self_align && $width ) {
604+
$child_layout_declarations['width'] = $width;
605+
} elseif ( 'fill' === $self_align ) {
606+
$child_layout_declarations['align-self'] = 'stretch';
607+
} elseif ( 'fit' === $self_align ) {
608+
$child_layout_declarations['width'] = 'fit-content';
609+
}
610+
// Height styles.
611+
if ( 'fixed' === $self_stretch && $height ) {
612+
$child_layout_declarations['max-height'] = $height;
613+
$child_layout_declarations['flex-basis'] = $height;
614+
} elseif ( 'fixedNoShrink' === $self_stretch && $height ) {
615+
$child_layout_declarations['height'] = $height;
616+
$child_layout_declarations['flex-shrink'] = '0';
617+
$child_layout_declarations['flex-basis'] = $height;
618+
} elseif ( 'fill' === $self_stretch ) {
619+
$child_layout_declarations['flex-grow'] = '1';
620+
}
621+
} elseif ( 'grid' !== $parent_layout_type ) {
622+
// Width styles.
623+
if ( 'fixed' === $self_stretch && $width ) {
624+
$child_layout_declarations['flex-basis'] = $width;
625+
} elseif ( 'fixedNoShrink' === $self_stretch && $width ) {
626+
$child_layout_declarations['flex-shrink'] = '0';
627+
$child_layout_declarations['flex-basis'] = $width;
628+
} elseif ( 'fill' === $self_stretch ) {
629+
$child_layout_declarations['flex-grow'] = '1';
630+
}
631+
// Height styles.
632+
if ( 'fixed' === $self_align && $height ) {
633+
$child_layout_declarations['max-height'] = $height;
634+
} elseif ( 'fixedNoShrink' === $self_align && $height ) {
635+
$child_layout_declarations['height'] = $height;
636+
} elseif ( 'fill' === $self_align ) {
637+
$child_layout_declarations['align-self'] = 'stretch';
638+
}
639+
}
640+
641+
// Grid specific styles.
584642
if ( isset( $block['attrs']['style']['layout']['columnSpan'] ) ) {
585643
$column_span = $block['attrs']['style']['layout']['columnSpan'];
586644
$child_layout_declarations['grid-column'] = "span $column_span";
@@ -589,6 +647,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
589647
$row_span = $block['attrs']['style']['layout']['rowSpan'];
590648
$child_layout_declarations['grid-row'] = "span $row_span";
591649
}
650+
592651
$child_layout_styles[] = array(
593652
'selector' => ".$container_content_class",
594653
'declarations' => $child_layout_declarations,
@@ -902,6 +961,8 @@ function ( $parsed_block, $source_block, $parent_block ) {
902961
*/
903962
if ( $parent_block && isset( $parent_block->parsed_block['attrs']['layout'] ) ) {
904963
$parsed_block['parentLayout'] = $parent_block->parsed_block['attrs']['layout'];
964+
} elseif ( $parent_block && isset( $parent_block->block_type->supports['layout'] ) ) {
965+
$parsed_block['parentLayout'] = $parent_block->block_type->supports['layout'];
905966
}
906967
return $parsed_block;
907968
},

‎packages/block-editor/src/components/child-layout-control/index.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -299,10 +299,24 @@ export default function ChildLayoutControl( {
299299
};
300300

301301
useEffect( () => {
302-
if ( selfStretch === 'fixed' && ! flexSize ) {
302+
if (
303+
( childLayout[ heightProp ] === 'fixed' ||
304+
childLayout[ heightProp ] === 'fixedNoShrink' ) &&
305+
! height
306+
) {
307+
onChange( {
308+
...childLayout,
309+
[ heightProp ]: undefined,
310+
} );
311+
}
312+
if (
313+
( childLayout[ widthProp ] === 'fixed' ||
314+
childLayout[ widthProp ] === 'fixedNoShrink' ) &&
315+
! width
316+
) {
303317
onChange( {
304318
...childLayout,
305-
selfStretch: 'fit',
319+
[ widthProp ]: undefined,
306320
} );
307321
}
308322
}, [] );

‎packages/block-editor/src/hooks/layout-child.js‎

Lines changed: 37 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,15 @@ function useBlockPropsChildLayoutStyles( { style } ) {
1717
return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
1818
} );
1919
const layout = style?.layout ?? {};
20-
const { selfStretch, flexSize, columnSpan, rowSpan, height, width } =
21-
layout;
20+
const {
21+
selfStretch,
22+
selfAlign,
23+
flexSize,
24+
columnSpan,
25+
rowSpan,
26+
height,
27+
width,
28+
} = layout;
2229
const parentLayout = useLayout() || {};
2330
const {
2431
columnCount,
@@ -31,19 +38,11 @@ function useBlockPropsChildLayoutStyles( { style } ) {
3138
const id = useInstanceId( useBlockPropsChildLayoutStyles );
3239
const selector = `.wp-container-content-${ id }`;
3340

34-
const isFlowOrConstrained =
41+
const isVerticalLayout =
3542
parentLayout.type === 'constrained' ||
3643
parentLayout.type === 'default' ||
37-
parentLayout.type === undefined;
38-
39-
const widthProp =
40-
isFlowOrConstrained || orientation === 'vertical'
41-
? 'selfAlign'
42-
: 'selfStretch';
43-
const heightProp =
44-
isFlowOrConstrained || orientation === 'vertical'
45-
? 'selfStretch'
46-
: 'selfAlign';
44+
parentLayout.type === undefined ||
45+
orientation === 'vertical';
4746

4847
let css = '';
4948
if ( shouldRenderChildLayoutStyles ) {
@@ -59,100 +58,76 @@ function useBlockPropsChildLayoutStyles( { style } ) {
5958
grid-column: span ${ columnSpan };
6059
}`;
6160
}
62-
if ( isFlowOrConstrained || orientation === 'vertical' ) {
63-
// set width
64-
if ( layout[ widthProp ] === 'fixed' && width ) {
61+
// All vertical layout types have the same styles.
62+
if ( isVerticalLayout ) {
63+
if ( selfAlign === 'fixed' && width ) {
6564
css += `${ selector } {
6665
max-width: ${ width };
6766
}`;
68-
} else if ( layout[ widthProp ] === 'fixedNoShrink' && width ) {
67+
} else if ( selfAlign === 'fixedNoShrink' && width ) {
6968
css += `${ selector } {
7069
width: ${ width };
7170
}`;
72-
} else if ( layout[ widthProp ] === 'fill' ) {
71+
} else if ( selfAlign === 'fill' ) {
72+
/**
73+
* This style is only needed for flex layouts because
74+
* constrained children have alignment set and flow
75+
* children are 100% width by default.
76+
*/
7377
css += `${ selector } {
7478
align-self: stretch;
7579
}`;
76-
} else if ( layout[ widthProp ] === 'fit' ) {
80+
} else if ( selfAlign === 'fit' ) {
7781
css += `${ selector } {
7882
width: fit-content;
7983
}`;
8084
}
8185

82-
// set height
83-
if ( layout[ heightProp ] === 'fixed' && height ) {
86+
if ( selfStretch === 'fixed' && height ) {
87+
// Max-height is needed for flow and constrained children.
8488
css += `${ selector } {
8589
max-height: ${ height };
86-
flex-grow: 0;
87-
flex-shrink: 1;
8890
flex-basis: ${ height };
8991
}`;
90-
} else if ( layout[ heightProp ] === 'fixedNoShrink' && height ) {
92+
} else if ( selfStretch === 'fixedNoShrink' && height ) {
93+
// Height is needed for flow and constrained children.
9194
css += `${ selector } {
9295
height: ${ height };
9396
flex-shrink: 0;
94-
flex-grow: 0;
95-
flex-basis: auto;
97+
flex-basis: ${ height };
9698
}`;
97-
} else if ( layout[ heightProp ] === 'fill' ) {
99+
} else if ( selfStretch === 'fill' ) {
98100
css += `${ selector } {
99101
flex-grow: 1;
100-
flex-shrink: 1;
101-
}`;
102-
} else if ( layout[ heightProp ] === 'fit' ) {
103-
css += `${ selector } {
104-
flex-grow: 0;
105-
flex-shrink: 0;
106-
flex-basis: auto;
107-
height: auto;
108102
}`;
109103
}
104+
// Everything else that isn't a grid is a horizontal layout.
110105
} else if ( parentLayoutType !== 'grid' ) {
111-
// set width
112-
if ( layout[ widthProp ] === 'fixed' && width ) {
106+
if ( selfStretch === 'fixed' && width ) {
113107
css += `${ selector } {
114-
max-width: ${ width };
115-
flex-grow: 0;
116-
flex-shrink: 1;
117108
flex-basis: ${ width };
118109
119110
}`;
120-
} else if ( layout[ widthProp ] === 'fixedNoShrink' && width ) {
111+
} else if ( selfStretch === 'fixedNoShrink' && width ) {
121112
css += `${ selector } {
122-
width: ${ width };
123113
flex-shrink: 0;
124-
flex-grow: 0;
125-
flex-basis: auto;
114+
flex-basis: ${ width };
126115
}`;
127-
} else if ( layout[ widthProp ] === 'fill' ) {
116+
} else if ( selfStretch === 'fill' ) {
128117
css += `${ selector } {
129118
flex-grow: 1;
130-
flex-shrink: 1;
131-
flex-basis: 100%;
132-
}`;
133-
} else if ( layout[ widthProp ] === 'fit' ) {
134-
css += `${ selector } {
135-
flex-grow: 0;
136-
flex-shrink: 0;
137-
flex-basis: auto;
138-
width: fit-content;
139119
}`;
140120
}
141121

142-
// set height
143-
if ( layout[ heightProp ] === 'fill' ) {
122+
if ( selfAlign === 'fill' ) {
144123
css += `${ selector } {
145124
align-self: stretch;
146125
}`;
147-
} else if ( layout[ heightProp ] === 'fit' ) {
148-
css += `${ selector } {
149-
height: fit-content;
150-
}`;
151-
} else if ( layout[ heightProp ] === 'fixedNoShrink' && height ) {
126+
} else if ( selfAlign === 'fixedNoShrink' && height ) {
152127
css += `${ selector } {
153128
height: ${ height };
154129
}`;
155-
} else if ( layout[ heightProp ] === 'fixed' && height ) {
130+
} else if ( selfAlign === 'fixed' && height ) {
156131
css += `${ selector } {
157132
max-height: ${ height };
158133
}`;

0 commit comments

Comments
 (0)