Make Spacer block width adjustable and add it to Navigation block (#2…

…9133)

* Make spacer width adjustable and add it to Nav block

* regenerated fixtures for spacer block

* Make spacer orientation depend on parent block.

* Fix width and height output and revert fixture changes

* Add fixture for horizontal option and specify 0 height

* Adjust height for horizontal spacer.

Co-authored-by: Andrei Draganescu <github@andreidraganescu.info>

packages/block-library/src/navigation-link/edit.js

@@ -323,7 +323,7 @@ export default function NavigationLinkEdit( {
 			} ),
 		},
 		{
-			allowedBlocks: [ 'core/navigation-link' ],
+			allowedBlocks: [ 'core/navigation-link', 'core/spacer' ],
 			renderAppender:
 				( isSelected && hasDescendants ) ||
 				( isImmediateParentOfSelectedBlock &&

packages/block-library/src/navigation/block.json

@@ -40,7 +40,8 @@
 		"fontSize": "fontSize",
 		"customFontSize": "customFontSize",
 		"showSubmenuIcon": "showSubmenuIcon",
-		"style": "style"
+		"style": "style",
+		"orientation": "orientation"
 	},
 	"supports": {
 		"align": [

packages/block-library/src/navigation/edit.js

@@ -70,6 +70,7 @@ function Navigation( {
 				'core/search',
 				'core/social-links',
 				'core/page-list',
+				'core/spacer',
 			],
 			orientation: attributes.orientation || 'horizontal',
 			renderAppender:

packages/block-library/src/spacer/block.json

@@ -6,8 +6,14 @@
 		"height": {
 			"type": "number",
 			"default": 100
+		},
+		"width": {
+			"type": "number"
 		}
 	},
+	"usesContext": [
+		"orientation"
+	],
 	"supports": {
 		"anchor": true
 	},

packages/block-library/src/spacer/edit.js

@@ -15,33 +15,43 @@ import {
 import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { View } from '@wordpress/primitives';
 
 const MIN_SPACER_HEIGHT = 1;
 const MAX_SPACER_HEIGHT = 500;
 
+const MIN_SPACER_WIDTH = 1;
+const MAX_SPACER_WIDTH = 500;
+
 const SpacerEdit = ( {
 	attributes,
 	isSelected,
 	setAttributes,
 	onResizeStart,
 	onResizeStop,
+	context,
 } ) => {
+	const { orientation } = context;
 	const [ isResizing, setIsResizing ] = useState( false );
-	const { height } = attributes;
+	const { height, width } = attributes;
 	const updateHeight = ( value ) => {
 		setAttributes( {
 			height: value,
 		} );
 	};
+	const updateWidth = ( value ) => {
+		setAttributes( {
+			width: value,
+		} );
+	};
 
 	const handleOnResizeStart = ( ...args ) => {
 		onResizeStart( ...args );
 		setIsResizing( true );
 	};
 
-	const handleOnResizeStop = ( event, direction, elt, delta ) => {
+	const handleOnVerticalResizeStop = ( event, direction, elt, delta ) => {
 		onResizeStop();
 		const spacerHeight = Math.min(
 			parseInt( height + delta.height, 10 ),
@@ -51,50 +61,122 @@ const SpacerEdit = ( {
 		setIsResizing( false );
 	};
 
-	return (
-		<>
-			<View { ...useBlockProps() }>
+	const handleOnHorizontalResizeStop = ( event, direction, elt, delta ) => {
+		onResizeStop();
+		const spacerWidth = Math.min(
+			parseInt( width + delta.width, 10 ),
+			MAX_SPACER_WIDTH
+		);
+		updateWidth( spacerWidth );
+		setIsResizing( false );
+	};
+
+	const resizableBoxWithOrientation = ( blockOrientation ) => {
+		if ( blockOrientation === 'horizontal' ) {
+			return (
 				<ResizableBox
 					className={ classnames(
 						'block-library-spacer__resize-container',
+						'resize-horizontal',
 						{
 							'is-selected': isSelected,
 						}
 					) }
 					size={ {
-						height,
+						width,
+						height: 24,
 					} }
-					minHeight={ MIN_SPACER_HEIGHT }
+					minWidth={ MIN_SPACER_WIDTH }
 					enable={ {
 						top: false,
-						right: false,
-						bottom: true,
+						right: true,
+						bottom: false,
 						left: false,
 						topRight: false,
 						bottomRight: false,
 						bottomLeft: false,
 						topLeft: false,
 					} }
 					onResizeStart={ handleOnResizeStart }
-					onResizeStop={ handleOnResizeStop }
+					onResizeStop={ handleOnHorizontalResizeStop }
 					showHandle={ isSelected }
 					__experimentalShowTooltip={ true }
 					__experimentalTooltipProps={ {
-						axis: 'y',
-						position: 'bottom',
+						axis: 'x',
+						position: 'corner',
 						isVisible: isResizing,
 					} }
 				/>
+			);
+		}
+
+		return (
+			<ResizableBox
+				className={ classnames(
+					'block-library-spacer__resize-container',
+					{
+						'is-selected': isSelected,
+					}
+				) }
+				size={ {
+					height,
+				} }
+				minHeight={ MIN_SPACER_HEIGHT }
+				enable={ {
+					top: false,
+					right: false,
+					bottom: true,
+					left: false,
+					topRight: false,
+					bottomRight: false,
+					bottomLeft: false,
+					topLeft: false,
+				} }
+				onResizeStart={ handleOnResizeStart }
+				onResizeStop={ handleOnVerticalResizeStop }
+				showHandle={ isSelected }
+				__experimentalShowTooltip={ true }
+				__experimentalTooltipProps={ {
+					axis: 'y',
+					position: 'bottom',
+					isVisible: isResizing,
+				} }
+			/>
+		);
+	};
+
+	useEffect( () => {
+		if ( orientation === 'horizontal' && ! width ) {
+			updateWidth( 72 );
+			updateHeight( 0 );
+		}
+	}, [] );
+
+	return (
+		<>
+			<View { ...useBlockProps() }>
+				{ resizableBoxWithOrientation( orientation ) }
 			</View>
 			<InspectorControls>
 				<PanelBody title={ __( 'Spacer settings' ) }>
-					<RangeControl
-						label={ __( 'Height in pixels' ) }
-						min={ MIN_SPACER_HEIGHT }
-						max={ Math.max( MAX_SPACER_HEIGHT, height ) }
-						value={ height }
-						onChange={ updateHeight }
-					/>
+					{ orientation === 'horizontal' && (
+						<RangeControl
+							label={ __( 'Width in pixels' ) }
+							min={ MIN_SPACER_WIDTH }
+							max={ Math.max( MAX_SPACER_WIDTH, width ) }
+							value={ width }
+							onChange={ updateWidth }
+						/>
+					) }
+					{ orientation !== 'horizontal' && (
+						<RangeControl
+							label={ __( 'Height in pixels' ) }
+							min={ MIN_SPACER_HEIGHT }
+							max={ Math.max( MAX_SPACER_HEIGHT, height ) }
+							value={ height }
+							onChange={ updateHeight }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 		</>

packages/block-library/src/spacer/editor.scss

@@ -27,4 +27,8 @@
 	.components-resizable-box__handle::before {
 		content: none;
 	}
+
+	&.resize-horizontal {
+		margin-bottom: 0;
+	}
 }

packages/block-library/src/spacer/save.js

@@ -7,7 +7,7 @@ export default function save( { attributes } ) {
 	return (
 		<div
 			{ ...useBlockProps.save( {
-				style: { height: attributes.height },
+				style: { height: attributes.height, width: attributes.width },
 				'aria-hidden': true,
 			} ) }
 		/>

packages/e2e-tests/fixtures/blocks/core__spacer__horizontal.html

@@ -0,0 +1,3 @@
+<!-- wp:spacer {"height":0,"width":72} -->
+<div style="height:0px;width:72px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

packages/e2e-tests/fixtures/blocks/core__spacer__horizontal.json

@@ -0,0 +1,13 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/spacer",
+        "isValid": true,
+        "attributes": {
+            "height": 0,
+            "width": 72
+        },
+        "innerBlocks": [],
+        "originalContent": "<div style=\"height:0px;width:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>"
+    }
+]

packages/e2e-tests/fixtures/blocks/core__spacer__horizontal.parsed.json

@@ -0,0 +1,14 @@
+[
+    {
+        "blockName": "core/spacer",
+        "attrs": {
+            "height": 0,
+            "width": 72
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<div style=\"height:0px;width:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n",
+        "innerContent": [
+            "\n<div style=\"height:0px;width:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__spacer__horizontal.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:spacer {"height":0,"width":72} -->
+<div style="height:0;width:72px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->