Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Width and Height controls to children of flex, flow and constrained layouts #59195

Open
wants to merge 15 commits into
base: trunk
Choose a base branch
from
Open

Add Width and Height controls to children of flex, flow and constrained layouts #59195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6a73eae
Add Width and Height controls to children of flex, flow and constrain…
tellthemachines Feb 20, 2024
82f68ff
Show child layout panel for all layout types
tellthemachines Feb 20, 2024
a271953
Fix booboos
tellthemachines Feb 21, 2024
39140e3
Fix default width for flow children
tellthemachines Feb 21, 2024
8bef785
Remove legacy attribs and ensure correct output.
tellthemachines Feb 22, 2024
3112204
Implement front end styles
tellthemachines Feb 22, 2024
cacc45f
Address feedback
tellthemachines Feb 23, 2024
083ce06
Fix issue where align support is boolean.
tellthemachines Feb 23, 2024
d8130bd
rename var
tellthemachines Feb 26, 2024
22382a8
Add Max width control for vertical layouts.
tellthemachines Feb 26, 2024
d14e3eb
Add some !importants 🙀
tellthemachines Feb 26, 2024
9e455ba
Make resets work properly.
tellthemachines Feb 27, 2024
a03322e
Merge remote-tracking branch 'origin/trunk' into add/child-width-and-…
tellthemachines Mar 18, 2024
66a954d
Check if content and wide widths are defined in the theme
tellthemachines Mar 18, 2024
7d0e0ab
In classic themes, show width and height only for flex children.
tellthemachines Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 79 additions & 9 deletions lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -572,17 +572,85 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$child_layout_declarations = array();
$child_layout_styles = array();

$self_stretch = isset( $block['attrs']['style']['layout']['selfStretch'] ) ? $block['attrs']['style']['layout']['selfStretch'] : null;
$self_stretch = isset( $child_layout['selfStretch'] ) ? $child_layout['selfStretch'] : null;
$self_align = isset( $child_layout['selfAlign'] ) ? $child_layout['selfAlign'] : null;
$height = isset( $child_layout['height'] ) ? $child_layout['height'] : null;
$width = isset( $child_layout['width'] ) ? $child_layout['width'] : null;

$parent_layout_type = 'default';
if ( isset( $block['parentLayout']['type'] ) ) {
$parent_layout_type = $block['parentLayout']['type'];
} elseif ( isset( $block['parentLayout']['default']['type'] ) ) {
$parent_layout_type = $block['parentLayout']['default']['type'];
}

// Orientation is only used for flex layouts so its default is horizontal.
$parent_orientation = isset( $block['parentLayout']['orientation'] ) ? $block['parentLayout']['orientation'] : 'horizontal';
$has_vertical_parent_layout = in_array( $parent_layout_type, array( 'constrained', 'default' ), true ) || ( 'flex' === $parent_layout_type && 'vertical' === $parent_orientation );

if ( 'fixed' === $self_stretch && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
$child_layout_declarations['flex-basis'] = $block['attrs']['style']['layout']['flexSize'];
// Support for legacy flexSize value.
if ( 'fixed' === $self_stretch && isset( $child_layout['flexSize'] ) ) {
$child_layout_declarations['flex-basis'] = $child_layout['flexSize'];
$child_layout_declarations['box-sizing'] = 'border-box';
} elseif ( 'fill' === $self_stretch ) {
$child_layout_declarations['flex-grow'] = '1';
}

$column_start = isset( $block['attrs']['style']['layout']['columnStart'] ) ? $block['attrs']['style']['layout']['columnStart'] : null;
$column_span = isset( $block['attrs']['style']['layout']['columnSpan'] ) ? $block['attrs']['style']['layout']['columnSpan'] : null;
if ( $has_vertical_parent_layout ) {
// Width styles.
if ( 'fixed' === $self_align && $width ) {
/**
* !important is a (hopefully) temporary override for
* the constrained layout styles, the specificity of
* which should be lowered soon.
*/
$child_layout_declarations['max-width'] = "$width !important";
} elseif ( 'fixedNoShrink' === $self_align && $width ) {
$child_layout_declarations['width'] = $width;
if ( 'constrained' === $parent_layout_type ) {
$child_layout_declarations['max-width'] = 'none !important';
}
} elseif ( 'fill' === $self_align ) {
$child_layout_declarations['align-self'] = 'stretch';
} elseif ( 'fit' === $self_align ) {
$child_layout_declarations['width'] = 'fit-content';
}
// Height styles.
if ( 'fixed' === $self_stretch && $height ) {
$child_layout_declarations['max-height'] = $height;
$child_layout_declarations['flex-basis'] = $height;
} elseif ( 'fixedNoShrink' === $self_stretch && $height ) {
$child_layout_declarations['height'] = $height;
$child_layout_declarations['flex-shrink'] = '0';
$child_layout_declarations['flex-basis'] = $height;
} elseif ( 'fill' === $self_stretch ) {
$child_layout_declarations['flex-grow'] = '1';
}
} elseif ( 'grid' !== $parent_layout_type ) {
// Width styles.
if ( 'fixed' === $self_stretch && $width ) {
$child_layout_declarations['flex-basis'] = $width;
} elseif ( 'fixedNoShrink' === $self_stretch && $width ) {
$child_layout_declarations['flex-shrink'] = '0';
$child_layout_declarations['flex-basis'] = $width;
} elseif ( 'fill' === $self_stretch ) {
$child_layout_declarations['flex-grow'] = '1';
}
// Height styles.
if ( 'fixed' === $self_align && $height ) {
$child_layout_declarations['max-height'] = $height;
} elseif ( 'fixedNoShrink' === $self_align && $height ) {
$child_layout_declarations['height'] = $height;
} elseif ( 'fill' === $self_align ) {
$child_layout_declarations['align-self'] = 'stretch';
}
}

// Grid specific styles.

$column_start = isset( $child_layout['columnStart'] ) ? $child_layout['columnStart'] : null;
$column_span = isset( $child_layout['columnSpan'] ) ? $child_layout['columnSpan'] : null;

if ( $column_start && $column_span ) {
$child_layout_declarations['grid-column'] = "$column_start / span $column_span";
} elseif ( $column_start ) {
Expand All @@ -591,8 +659,8 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$child_layout_declarations['grid-column'] = "span $column_span";
}

$row_start = isset( $block['attrs']['style']['layout']['rowStart'] ) ? $block['attrs']['style']['layout']['rowStart'] : null;
$row_span = isset( $block['attrs']['style']['layout']['rowSpan'] ) ? $block['attrs']['style']['layout']['rowSpan'] : null;
$row_start = isset( $child_layout['rowStart'] ) ? $child_layout['rowStart'] : null;
$row_span = isset( $child_layout['rowSpan'] ) ? $child_layout['rowSpan'] : null;
if ( $row_start && $row_span ) {
$child_layout_declarations['grid-row'] = "$row_start / span $row_span";
} elseif ( $row_start ) {
Expand All @@ -606,8 +674,8 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
'declarations' => $child_layout_declarations,
);

$minimum_column_width = isset( $block['attrs']['style']['layout']['minimumColumnWidth'] ) ? $block['attrs']['style']['layout']['minimumColumnWidth'] : null;
$column_count = isset( $block['attrs']['style']['layout']['columnCount'] ) ? $block['attrs']['style']['layout']['columnCount'] : null;
$minimum_column_width = isset( $child_layout['minimumColumnWidth'] ) ? $child_layout['minimumColumnWidth'] : null;
$column_count = isset( $child_layout['columnCount'] ) ? $child_layout['columnCount'] : null;

/*
* If columnSpan or columnStart is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set,
Expand Down Expand Up @@ -922,6 +990,8 @@ function ( $parsed_block, $source_block, $parent_block ) {
*/
if ( $parent_block && isset( $parent_block->parsed_block['attrs']['layout'] ) ) {
$parsed_block['parentLayout'] = $parent_block->parsed_block['attrs']['layout'];
} elseif ( $parent_block && isset( $parent_block->block_type->supports['layout'] ) ) {
$parsed_block['parentLayout'] = $parent_block->block_type->supports['layout'];
}
return $parsed_block;
},
Expand Down
8 changes: 7 additions & 1 deletion packages/block-editor/src/components/block-edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,14 @@ export default function BlockEdit( {
attributes = {},
__unstableLayoutClassNames,
} = props;
const { layout = null, metadata = {} } = attributes;
const { layout = null, align = null, metadata = {} } = attributes;
const { bindings } = metadata;
const layoutSupport =
hasBlockSupport( name, 'layout', false ) ||
hasBlockSupport( name, '__experimentalLayout', false );

const hasAlignSupport = hasBlockSupport( name, 'align', false );

return (
<BlockEditContextProvider
// It is important to return the same object if props haven't
Expand All @@ -57,6 +60,7 @@ export default function BlockEdit( {
name,
isSelected,
clientId,
align: hasAlignSupport ? align : null,
layout: layoutSupport ? layout : null,
__unstableLayoutClassNames,
// We use symbols in favour of an __unstable prefix to avoid
Expand All @@ -70,6 +74,8 @@ export default function BlockEdit( {
name,
isSelected,
clientId,
align,
hasAlignSupport,
layoutSupport,
layout,
__unstableLayoutClassNames,
Expand Down
Loading
Loading