Add "Spacer" block to create empty areas. (#6121)

Includes an aria-hidden attribute on save as this has no semantic meaning.

* Move to new core-blocks folder.
* Add fixtures.
* Improve setting controls with BaseControl and Panel.

core-blocks/index.js

@@ -35,6 +35,7 @@ import * as pullquote from './pullquote';
 import * as sharedBlock from './block';
 import * as separator from './separator';
 import * as shortcode from './shortcode';
+import * as spacer from './spacer';
 import * as subhead from './subhead';
 import * as table from './table';
 import * as textColumns from './text-columns';
@@ -72,6 +73,7 @@ export const registerCoreBlocks = () => {
 		pullquote,
 		separator,
 		sharedBlock,
+		spacer,
 		subhead,
 		table,
 		textColumns,

core-blocks/spacer/editor.scss

@@ -0,0 +1,24 @@
+.editor-block-list__block[data-type="core/spacer"].is-selected .editor-block-list__block-edit {
+	background: $light-gray-200;
+
+	.wp-block-spacer__resize-handler-top,
+	.wp-block-spacer__resize-handler-bottom {
+		display: block;
+	}
+}
+
+.wp-block-spacer__resize-handler-top,
+.wp-block-spacer__resize-handler-bottom {
+	display: none;
+	border-radius: 50%;
+	border: 2px solid white;
+	width: 15px !important;
+	height: 15px !important;
+	position: absolute;
+	background: $blue-medium-500;
+	padding: 0 3px 3px 0;
+	box-sizing: border-box;
+	cursor: se-resize;
+	left: 50% !important;
+	margin-left: -7.5px;
+}

core-blocks/spacer/index.js

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import ResizableBox from 're-resizable';
+
+/**
+ * WordPress
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/blocks';
+import { BaseControl, PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+export const name = 'core/spacer';
+
+export const settings = {
+	title: __( 'Spacer' ),
+
+	description: __( 'Add an element with empty space and custom height.' ),
+
+	icon: 'image-flip-vertical',
+
+	category: 'layout',
+
+	attributes: {
+		height: {
+			type: 'number',
+			default: 100,
+		},
+	},
+
+	edit( { attributes, setAttributes, isSelected, toggleSelection } ) {
+		const { height } = attributes;
+
+		return (
+			<Fragment>
+				<ResizableBox
+					size={ {
+						height,
+					} }
+					minHeight="20"
+					handleClasses={ {
+						top: 'wp-block-spacer__resize-handler-top',
+						bottom: 'wp-block-spacer__resize-handler-bottom',
+					} }
+					enable={ {
+						top: true,
+						right: false,
+						bottom: true,
+						left: false,
+						topRight: false,
+						bottomRight: false,
+						bottomLeft: false,
+						topLeft: false,
+					} }
+					onResizeStop={ ( event, direction, elt, delta ) => {
+						setAttributes( {
+							height: parseInt( height + delta.height, 10 ),
+						} );
+						toggleSelection( true );
+					} }
+					onResizeStart={ () => {
+						toggleSelection( false );
+					} }
+				/>
+				{ isSelected &&
+					<InspectorControls>
+						<PanelBody title={ __( 'Spacer Settings' ) }>
+							<BaseControl label={ __( 'Height in pixels' ) }>
+								<input
+									type="number"
+									onChange={ ( event ) => {
+										setAttributes( {
+											height: parseInt( event.target.value, 10 ),
+										} );
+									} }
+									aria-label={ __( 'Height for the spacer element in pixels.' ) }
+									value={ height }
+									min="20"
+									step="10"
+								/>
+							</BaseControl>
+						</PanelBody>
+					</InspectorControls>
+				}
+			</Fragment>
+		);
+	},
+
+	save( { attributes } ) {
+		return <div style={ { height: attributes.height } } aria-hidden />;
+	},
+};

core-blocks/test/fixtures/core__spacer.html

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

core-blocks/test/fixtures/core__spacer.json

@@ -0,0 +1,12 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/spacer",
+        "isValid": true,
+        "attributes": {
+            "height": 100
+        },
+        "innerBlocks": [],
+        "originalContent": "<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>"
+    }
+]

core-blocks/test/fixtures/core__spacer.parsed.json

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

core-blocks/test/fixtures/core__spacer.serialized.html

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