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 (
-