Properly associate the spacer height input label. (#6922)

* Properly associate the sapcer height input label. * Update stylesheet selectors. * Better CSS classes.
WordPress · May 29, 2018 · 59f2ad8 · 59f2ad8
1 parent d28fc33
commit 59f2ad8
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 59 deletions.
diff --git a/core-blocks/spacer/editor.scss b/core-blocks/spacer/editor.scss
@@ -1,14 +1,14 @@
 .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 {
+	.block-spacer__resize-handler-top,
+	.block-spacer__resize-handler-bottom {
 		display: block;
 	}
 }
 
-.wp-block-spacer__resize-handler-top,
-.wp-block-spacer__resize-handler-bottom {
+.block-spacer__resize-handler-top,
+.block-spacer__resize-handler-bottom {
 	display: none;
 	border-radius: 50%;
 	border: 2px solid white;

diff --git a/core-blocks/spacer/index.js b/core-blocks/spacer/index.js
@@ -9,7 +9,7 @@ import ResizableBox from 're-resizable';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/editor';
-import { BaseControl, PanelBody } from '@wordpress/components';
+import { BaseControl, PanelBody, withInstanceId } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -34,61 +34,64 @@ export const settings = {
 		},
 	},
 
-	edit( { attributes, setAttributes, toggleSelection } ) {
-		const { height } = attributes;
+	edit: withInstanceId(
+		( { attributes, setAttributes, toggleSelection, instanceId } ) => {
+			const { height } = attributes;
+			const id = `block-spacer-height-input-${ instanceId }`;
 
-		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 );
-					} }
-				/>
-				<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>
-		);
-	},
+			return (
+				<Fragment>
+					<ResizableBox
+						size={ {
+							height,
+						} }
+						minHeight="20"
+						handleClasses={ {
+							top: 'core-blocks-spacer__resize-handler-top',
+							bottom: 'core-blocks-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 );
+						} }
+					/>
+					<InspectorControls>
+						<PanelBody title={ __( 'Spacer Settings' ) }>
+							<BaseControl label={ __( 'Height in pixels' ) } id={ id }>
+								<input
+									type="number"
+									id={ id }
+									onChange={ ( event ) => {
+										setAttributes( {
+											height: parseInt( event.target.value, 10 ),
+										} );
+									} }
+									value={ height }
+									min="20"
+									step="10"
+								/>
+							</BaseControl>
+						</PanelBody>
+					</InspectorControls>
+				</Fragment>
+			);
+		}
+	),
 
 	save( { attributes } ) {
 		return <div style={ { height: attributes.height } } aria-hidden />;