Design updates.

WordPress · Feb 22, 2020 · 5b0911d · 5b0911d
1 parent 89e3ad3
commit 5b0911d
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 19 deletions.
diff --git a/packages/block-editor/src/components/block-list/grid-utils.js b/packages/block-editor/src/components/block-list/grid-utils.js
@@ -5,12 +5,12 @@ import uuid from 'uuid/v4';
 
 export function createInitialLayouts( grid, blockClientIds ) {
 	// Hydrate grid layout, if any, with new block client IDs.
-	return grid ?
-		grid.map( ( item, i ) => ( {
-			...item,
-			i: `block-${ blockClientIds[ i ] }`,
-		} ) ) :
-		[];
+	return grid
+		? grid.map( ( item, i ) => ( {
+				...item,
+				i: `block-${ blockClientIds[ i ] }`,
+		  } ) )
+		: [];
 }
 
 export function appendNewBlocks(
@@ -21,7 +21,9 @@ export function appendNewBlocks(
 ) {
 	if (
 		blockClientIds.length &&
-		! prevBlockClientIds.includes( blockClientIds[ blockClientIds.length - 1 ] )
+		! prevBlockClientIds.includes(
+			blockClientIds[ blockClientIds.length - 1 ]
+		)
 	) {
 		// If a block client ID has been added, make its block's position and dimensions
 		// that of the last clicked block appender, since it must be the one that added it.
@@ -34,7 +36,9 @@ export function appendNewBlocks(
 					case lastClickedBlockAppenderId:
 						return {
 							...appenderItem,
-							i: `block-${ blockClientIds[ blockClientIds.length - 1 ] }`,
+							i: `block-${
+								blockClientIds[ blockClientIds.length - 1 ]
+							}`,
 						};
 					case blockClientIds[ blockClientIds.length - 1 ]:
 						return null;
@@ -64,9 +68,13 @@ export function resizeOverflowingBlocks( nextLayout, nodes ) {
 			node.offsetWidth / ( clientWidth / itemsMap[ node.id ].w )
 		);
 		const minRows = Math.ceil(
-			( node.offsetHeight - 20 ) / ( clientHeight / itemsMap[ node.id ].h )
+			( node.offsetHeight - 20 ) /
+				( clientHeight / itemsMap[ node.id ].h )
 		);
-		if ( itemsMap[ node.id ].w < minCols || itemsMap[ node.id ].h < minRows ) {
+		if (
+			itemsMap[ node.id ].w < minCols ||
+			itemsMap[ node.id ].h < minRows
+		) {
 			cellChanges[ node.id ] = {
 				w: Math.max( itemsMap[ node.id ].w, minCols ),
 				h: Math.max( itemsMap[ node.id ].h, minRows ),
@@ -87,7 +95,7 @@ export function cropAndFillEmptyCells( nextLayout, cols, rows ) {
 		Math.max(
 			rows,
 			...nextLayout
-				.filter( ( item ) => ! item.i.startsWith( 'block-appender' ) )
+				.filter( ( item ) => ! item.i.startsWith( 'empty-cell' ) )
 				.map( ( item ) => item.y + item.h )
 		) - 1;
 	if ( nextLayout.some( ( item ) => item.y > maxRow ) ) {
@@ -98,7 +106,8 @@ export function cropAndFillEmptyCells( nextLayout, cols, rows ) {
 	const emptyCells = {};
 	for (
 		let col = 0;
-		col <= Math.max( cols, ...nextLayout.map( ( item ) => item.x + item.w ) ) - 1;
+		col <=
+		Math.max( cols, ...nextLayout.map( ( item ) => item.x + item.w ) ) - 1;
 		col++
 	) {
 		for ( let row = 0; row <= maxRow; row++ ) {
@@ -119,7 +128,7 @@ export function cropAndFillEmptyCells( nextLayout, cols, rows ) {
 			...Object.keys( emptyCells ).map( ( emptyCell ) => {
 				const [ col, row ] = emptyCell.split( ' | ' );
 				return {
-					i: `block-appender-${ uuid() }`,
+					i: `empty-cell-${ uuid() }`,
 					x: Number( col ),
 					y: Number( row ),
 					w: 1,
@@ -132,6 +141,20 @@ export function cropAndFillEmptyCells( nextLayout, cols, rows ) {
 	return nextLayout;
 }
 
+export function convertEmptyCellToBlockAppender( nextLayout, newItem ) {
+	if ( ! newItem.i.startsWith( 'empty-cell' ) ) {
+		return nextLayout;
+	}
+
+	nextLayout = [ ...nextLayout ];
+	nextLayout.splice(
+		nextLayout.findIndex( ( item ) => item.i === newItem.i ),
+		1,
+		{ ...newItem, i: `block-appender-${ uuid() }` }
+	);
+	return nextLayout;
+}
+
 export function hashGrid( grid ) {
 	return Object.values( JSON.stringify( grid ) ).reduce( ( acc, char ) => {
 		/* eslint-disable no-bitwise */
@@ -144,17 +167,22 @@ export function hashGrid( grid ) {
 function createGridItemsStyleRules( gridId, items ) {
 	return items
 		.map(
-			( item, i ) => `#${ gridId } > #editor-block-list__grid-content-item-${ i } {
-		grid-area: ${ item.y + 1 } / ${ item.x + 1 } / ${ item.y + 1 + item.h } / ${ item.x +
+			(
+				item,
+				i
+			) => `#${ gridId } > #editor-block-list__grid-content-item-${ i } {
+		grid-area: ${ item.y + 1 } / ${ item.x + 1 } / ${ item.y +
 				1 +
-				item.w }
+				item.h } / ${ item.x + 1 + item.w }
 	}`
 		)
 		.join( '\n\n	' );
 }
 export function createGridStyleRules( gridId, grid, breakpoint, cols, rows ) {
-	const maxCol = Math.max( cols, ...grid.map( ( item ) => item.x + item.w ) ) - 1;
-	const maxRow = Math.max( rows, ...grid.map( ( item ) => item.y + item.h ) ) - 1;
+	const maxCol =
+		Math.max( cols, ...grid.map( ( item ) => item.x + item.w ) ) - 1;
+	const maxRow =
+		Math.max( rows, ...grid.map( ( item ) => item.y + item.h ) ) - 1;
 	return `@media (min-width: ${ breakpoint }px) {
 			#${ gridId } {
 				grid-template-columns: repeat(${ maxCol + 1 }, 1fr);

diff --git a/packages/block-editor/src/components/block-list/grid.js b/packages/block-editor/src/components/block-list/grid.js
@@ -29,6 +29,7 @@ import {
 	appendNewBlocks,
 	resizeOverflowingBlocks,
 	cropAndFillEmptyCells,
+	convertEmptyCellToBlockAppender,
 	hashGrid,
 	createGridStyleRules,
 } from './grid-utils';
@@ -106,14 +107,46 @@ function BlockGrid( {
 					setLayout( nextLayout );
 					updateBlockAttributes( rootClientId, {
 						grid: nextLayout.filter(
-							( item ) => ! item.i.startsWith( 'block-appender' )
+							( item ) =>
+								! item.i.startsWith( 'empty-cell' ) &&
+								! item.i.startsWith( 'block-appender' )
 						),
 					} );
 				} }
 				rowHeight={ 200 }
 				verticalCompact={ false }
+				onResizeStop={ ( nextLayout, _oldItem, newItem ) => {
+					if ( ! newItem.i.startsWith( 'empty-cell' ) ) {
+						return;
+					}
+
+					// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+					setTimeout(
+						() =>
+							setLayout(
+								cropAndFillEmptyCells(
+									convertEmptyCellToBlockAppender(
+										nextLayout,
+										newItem
+									),
+									cols,
+									rows
+								)
+							),
+						0
+					);
+				} }
 			>
 				{ [
+					...layout
+						.filter( ( item ) => item.i.startsWith( 'empty-cell' ) )
+						.map( ( item ) => (
+							<div
+								key={ item.i }
+								id={ item.i }
+								isDraggable={ false }
+							/>
+						) ),
 					...layout
 						.filter( ( item ) =>
 							item.i.startsWith( 'block-appender' )

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -601,6 +601,18 @@
 		width: 40px;
 	}
 
+	[id^="empty-cell"].react-grid-item {
+		background: $dark-gray-500;
+		border: 5px solid $white;
+		opacity: 0.25;
+		padding: 10px;
+
+		& > .react-resizable-handle {
+			height: 100%;
+			width: 100%;
+		}
+	}
+
 	.block-list-appender {
 		&.block-list-appender {
 			margin: 0;