diff --git a/core-blocks/spacer/editor.scss b/core-blocks/spacer/editor.scss index b0ac29659bdf22..9dd210d68f33eb 100644 --- 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 index 055fba1f1dac10..7c40b802efc45e 100644 --- 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 ( - - { - setAttributes( { - height: parseInt( height + delta.height, 10 ), - } ); - toggleSelection( true ); - } } - onResizeStart={ () => { - toggleSelection( false ); - } } - /> - - - - { - setAttributes( { - height: parseInt( event.target.value, 10 ), - } ); - } } - aria-label={ __( 'Height for the spacer element in pixels.' ) } - value={ height } - min="20" - step="10" - /> - - - - - ); - }, + return ( + + { + setAttributes( { + height: parseInt( height + delta.height, 10 ), + } ); + toggleSelection( true ); + } } + onResizeStart={ () => { + toggleSelection( false ); + } } + /> + + + + { + setAttributes( { + height: parseInt( event.target.value, 10 ), + } ); + } } + value={ height } + min="20" + step="10" + /> + + + + + ); + } + ), save( { attributes } ) { return
;