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

Try using manualPlacement attribute to set manual grid mode and allow responsive behaviour in both modes. #62777

Merged
merged 36 commits into from
Jul 3, 2024
+200 −99
Merged

Try using manualPlacement attribute to set manual grid mode and allow responsive behaviour in both modes. #62777

Show file tree
Hide file tree
Changes from 29 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
2869ebc
Try version of grid where manual mode means all blocks have a columnS…
noisysocks Apr 24, 2024
c31682c
Fix some rebase breakage
tellthemachines Jun 14, 2024
8cfb76f
Clean up deleted files
tellthemachines Jun 14, 2024
4cbbdeb
Fix visualiser
tellthemachines Jun 14, 2024
47d7665
Show appender on manual grid
tellthemachines Jun 14, 2024
7e06bf8
markup reordering on drag and drop
tellthemachines Jun 19, 2024
2a3c600
Reorder markup when using movers
tellthemachines Jun 19, 2024
f552760
Jump through a few hoops
tellthemachines Jun 20, 2024
c36c2fa
Fix string concatenation bugs
tellthemachines Jun 20, 2024
9c3c1dd
Undo folder rename
tellthemachines Jun 21, 2024
e6f033c
Update file path
tellthemachines Jun 21, 2024
82046c4
Fix undo weirdness
tellthemachines Jun 24, 2024
fd45870
Fix col and row start on resize
tellthemachines Jun 24, 2024
5caa1fa
Try to escape indent hell
noisysocks Jun 24, 2024
ee87f98
Try using `manualPlacement` attribute to set manual grid mode.
tellthemachines Jun 24, 2024
5dff3ec
Fix up the styles
tellthemachines Jun 25, 2024
fc33eea
Fix rows logic and fix front end
tellthemachines Jun 25, 2024
ba2aad6
sort out folder rename
tellthemachines Jun 25, 2024
dccead9
Fix some more stuff
tellthemachines Jun 25, 2024
dae808e
update variable name
tellthemachines Jun 26, 2024
1a40391
Fix row computation with overlapping blocks
tellthemachines Jun 26, 2024
c9f87ba
Improve row resizing behaviour
tellthemachines Jun 26, 2024
a0e0ef7
Add backport changelog
tellthemachines Jun 26, 2024
cd81df2
Fix unsetting columns in Auto mode
tellthemachines Jun 27, 2024
c2b5bed
Row height should be consistent with contents.
tellthemachines Jun 28, 2024
e0449de
Fix layout object causing effect to run endlessly and min rows
tellthemachines Jul 1, 2024
c88a962
Remove values when experiment disabled and add row number when it exists
tellthemachines Jul 1, 2024
2804f30
Fix label positioning and help text
tellthemachines Jul 1, 2024
787c1ca
Fix `minimumColumnWidth` logic
tellthemachines Jul 1, 2024
07876e3
Fix row logic
tellthemachines Jul 3, 2024
34787ef
Rename things
tellthemachines Jul 3, 2024
fe8cc84
defaults for non-existing values
tellthemachines Jul 3, 2024
1f957bb
Clean up useGridLayoutSync
noisysocks Jul 3, 2024
e8be06a
Simplify bottomMostRow
noisysocks Jul 3, 2024
2b30c4f
parse all the ints
tellthemachines Jul 3, 2024
34b1465
move the parseInt
tellthemachines Jul 3, 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
5 changes: 5 additions & 0 deletions backport-changelog/6.7/6910.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
https://github.com/WordPress/wordpress-develop/pull/6910

* https://github.com/WordPress/gutenberg/pull/59483
* https://github.com/WordPress/gutenberg/pull/60652
* https://github.com/WordPress/gutenberg/pull/62777
80 changes: 50 additions & 30 deletions lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -466,29 +466,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
}
}
} elseif ( 'grid' === $layout_type ) {
if ( ! empty( $layout['columnCount'] ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
);
if ( ! empty( $layout['rowCount'] ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(0, 1fr))' ),
);
}
} else {
$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';

$layout_styles[] = array(
'selector' => $selector,
'declarations' => array(
'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
'container-type' => 'inline-size',
),
);
}

// Deal with block gap first so it can be used for responsive computation.
$responsive_gap_value = '1.2rem';
if ( $has_block_gap_support && isset( $gap_value ) ) {
$combined_gap_value = '';
$gap_sides = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
Expand All @@ -506,14 +485,53 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
}
$combined_gap_value .= "$process_value ";
}
$gap_value = trim( $combined_gap_value );
$gap_value = trim( $combined_gap_value );
$responsive_gap_value = $gap_value;
}

if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
if ( ! empty( $layout['columnCount'] ) && ! empty( $layout['minimumColumnWidth'] ) ) {
$max_value = 'max(' . $layout['minimumColumnWidth'] . ', (100% - (' . $responsive_gap_value . ' * (' . $layout['columnCount'] . ' - 1))) /' . $layout['columnCount'] . ')';
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array(
'grid-template-columns' => 'repeat(auto-fill, minmax(' . $max_value . ', 1fr))',
'container-type' => 'inline-size',
),
);
if ( ! empty( $layout['rowCount'] ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'gap' => $gap_value ),
'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', auto)' ),
);
}
} elseif ( ! empty( $layout['columnCount'] ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
);
if ( ! empty( $layout['rowCount'] ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', auto)' ),
);
}
} else {
$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';

$layout_styles[] = array(
'selector' => $selector,
'declarations' => array(
'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
'container-type' => 'inline-size',
),
);
}

if ( $has_block_gap_support && null !== $gap_value && ! $should_skip_gap_serialization ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'gap' => $gap_value ),
);
}
}

Expand Down Expand Up @@ -653,17 +671,19 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
* A default gap value is used for this computation because custom gap values may not be
* viable to use in the computation of the container query value.
*/
$default_gap_value = 'px' === $parent_column_unit ? 24 : 1.5;
$container_query_value = $highest_number * $parent_column_value + ( $highest_number - 1 ) * $default_gap_value;
$container_query_value = $container_query_value . $parent_column_unit;
$default_gap_value = 'px' === $parent_column_unit ? 24 : 1.5;
$container_query_value = $highest_number * $parent_column_value + ( $highest_number - 1 ) * $default_gap_value;
$minimum_container_query_value = $parent_column_value * 2 + $default_gap_value - 1;
$container_query_value = max( $container_query_value, $minimum_container_query_value ) . $parent_column_unit;
// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
$grid_column_value = $column_span ? '1/-1' : 'auto';
$grid_column_value = $column_span && $column_span > 1 ? '1/-1' : 'auto';

$child_layout_styles[] = array(
'rules_group' => "@container (max-width: $container_query_value )",
'selector' => ".$container_content_class",
'declarations' => array(
'grid-column' => $grid_column_value,
'grid-row' => 'auto',
),
);
}
Expand Down
51 changes: 26 additions & 25 deletions packages/block-editor/src/components/grid/use-grid-layout-sync.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,22 @@ import { store as blockEditorStore } from '../../store';
import { GridRect } from './utils';

export function useGridLayoutSync( { clientId: gridClientId } ) {
const { gridLayout, blockOrder } = useSelect(
( select ) => {
const { getBlockAttributes, getBlockOrder } =
select( blockEditorStore );
return {
gridLayout: getBlockAttributes( gridClientId ).layout ?? {},
blockOrder: getBlockOrder( gridClientId ),
};
},
[ gridClientId ]
);

const { getBlockAttributes } = useSelect( blockEditorStore );
const { getBlockOrder, getBlockAttributes } = useSelect( blockEditorStore );
const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
useDispatch( blockEditorStore );

const blockOrder = getBlockOrder( gridClientId );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we now calling getBlockOrder outside of the useSelect? If we want it to be a dep of the useEffect then it needs to be called inside the useSelect so that it updates when the store is updated.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't seem to make a difference - on trunk, if I add a new block to a grid by pressing enter on a Paragraph block already inside it, the effect doesn't re-run. That might be due to this hook rendering inside the grid component. Ideally we get it to update whenever a grid child is added or updated, but I think that'll require bigger changes.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're right. We'll need to move <GridLayoutSync> out of toolBarControls and into a component that's not just rendered when the grid block is selected.

Regardless, I don't think this PR should be moving getBlockOrder outside of the useSelect 😀 If it were working on trunk I'd expect this change to break it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've reverted this for now and will move the hook in the PR that separates the visualizer out from the grid toolbar (working branch here, still very early stages)


useEffect( () => {
const gridLayout = getBlockAttributes( gridClientId ).layout ?? {};
const updates = {};

const { columnCount, rowCount = 2 } = gridLayout;
const isManualGrid = !! columnCount;
const { columnCount, rowCount, manualPlacement } = gridLayout;
const isManualGrid = !! manualPlacement;

if ( isManualGrid ) {
const rects = [];
let cellsTaken = 0;
let lowestRowEnd = 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a somewhat confusing name because "lowest row end" could mean the bottom-most row or the smallest "row end".

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bottomestRow? 😄


// Respect the position of blocks that already have a columnStart and rowStart value.
for ( const clientId of blockOrder ) {
Expand All @@ -58,18 +49,11 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
rowSpan,
} )
);
lowestRowEnd = Math.max( lowestRowEnd, rowStart + rowSpan - 1 );
}

// Ensure there's enough rows to fit all blocks.
const minimumNeededRows = Math.ceil( cellsTaken / columnCount );
if ( rowCount < minimumNeededRows ) {
updates[ gridClientId ] = {
layout: {
...gridLayout,
rowCount: minimumNeededRows,
},
};
}

// When in manual mode, ensure that every block has a columnStart and rowStart value.
for ( const clientId of blockOrder ) {
Expand Down Expand Up @@ -104,6 +88,15 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
},
},
};
lowestRowEnd = Math.max( lowestRowEnd, rowStart + rowSpan - 1 );
}
if ( rowCount !== lowestRowEnd ) {
updates[ gridClientId ] = {
layout: {
...gridLayout,
rowCount: minimumNeededRows,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this supposed to be lowestRowEnd?

},
};
}
} else {
// When in auto mode, remove all of the columnStart and rowStart values.
Expand All @@ -121,6 +114,15 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
};
}
}
// Remove row styles in auto mode
if ( rowCount ) {
updates[ gridClientId ] = {
layout: {
...gridLayout,
rowCount: undefined,
},
};
}
}

if ( Object.keys( updates ).length ) {
Expand All @@ -134,7 +136,6 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
}, [
// Actual deps to sync:
gridClientId,
gridLayout,
blockOrder,
// Needed for linter:
__unstableMarkNextChangeAsNotPersistent,
Expand Down
39 changes: 24 additions & 15 deletions packages/block-editor/src/hooks/layout-child.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,19 @@ function useBlockPropsChildLayoutStyles( { style } ) {
grid-column: span ${ columnSpan };
}`;
}
if ( rowStart && rowSpan ) {
css += `${ selector } {
grid-row: ${ rowStart } / span ${ rowSpan };
}`;
} else if ( rowStart ) {
css += `${ selector } {
grid-row: ${ rowStart };
}`;
} else if ( rowSpan ) {
css += `${ selector } {
grid-row: span ${ rowSpan };
}`;
}
/**
* If minimumColumnWidth is set on the parent, or if no
* columnCount is set, the grid is responsive so a
Expand Down Expand Up @@ -103,28 +116,24 @@ function useBlockPropsChildLayoutStyles( { style } ) {
const containerQueryValue =
highestNumber * parentColumnValue +
( highestNumber - 1 ) * defaultGapValue;
// For blocks that only span one column, we want to remove any rowStart values as
// the container reduces in size, so that blocks are still arranged in markup order.
const minimumContainerQueryValue =
parentColumnValue * 2 + defaultGapValue - 1;
// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
const gridColumnValue = columnSpan ? '1/-1' : 'auto';
const gridColumnValue =
columnSpan && columnSpan > 1 ? '1/-1' : 'auto';

css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {
css += `@container (max-width: ${ Math.max(
containerQueryValue,
minimumContainerQueryValue
) }${ parentColumnUnit }) {
${ selector } {
grid-column: ${ gridColumnValue };
grid-row: auto;
}
}`;
}
if ( rowStart && rowSpan ) {
css += `${ selector } {
grid-row: ${ rowStart } / span ${ rowSpan };
}`;
} else if ( rowStart ) {
css += `${ selector } {
grid-row: ${ rowStart };
}`;
} else if ( rowSpan ) {
css += `${ selector } {
grid-row: span ${ rowSpan };
}`;
}
}

useStyleOverride( { css } );
Expand Down
Loading
Loading