Add drag handle to block toolbar (#24852)

* Add drag handle to block mover component * Switch draggable chip to reflect toolbar layout * Use drag cursor * Hide drag handle on mobile or in top toolbar mode * Adjust handle and structure. * Size the switcher. * Adjust mover. * Update icon for handle. * Update movers buttons. * Fix groups. * Focus for switcher. * Handle focus. * Fix top toolbar. * Popover fix. * Fix spacing issue. * Harmonize spacing. * Try small independen transition for up / down. * Reduce motion. * use dragHandle icon in draggable chip * Make draggable chip use same icon as toolbar * Revert "Make draggable chip use same icon as toolbar" This reverts commit d031006. * Revert offset change and ensure cursor does not overlap chip block info * Update snapshots to reflect chevron icon change Co-authored-by: jasmussen <joen@automattic.com> Co-authored-by: Matías Ventura <mv@matiasventura.com>
WordPress · Sep 3, 2020 · 430c938 · 430c938
1 parent f7d3945
commit 430c938
Show file tree

Hide file tree

Showing 18 changed files with 150 additions and 50 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
@@ -5,7 +5,7 @@ import { _n, sprintf } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { Flex, FlexItem } from '@wordpress/components';
-import { handle } from '@wordpress/icons';
+import { dragHandle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -35,9 +35,6 @@ export default function BlockDraggableChip( { clientIds } ) {
 					justify="center"
 					className="block-editor-block-draggable-chip__content"
 				>
-					<FlexItem>
-						<BlockIcon icon={ handle } />
-					</FlexItem>
 					<FlexItem>
 						{ icon ? (
 							<BlockIcon icon={ icon } />
@@ -49,6 +46,9 @@ export default function BlockDraggableChip( { clientIds } ) {
 							)
 						) }
 					</FlexItem>
+					<FlexItem>
+						<BlockIcon icon={ dragHandle } />
+					</FlexItem>
 				</Flex>
 			</div>
 		</div>

diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
@@ -1,9 +1,8 @@
 .block-editor-block-draggable-chip-wrapper {
 	position: absolute;
-	// Offset position by half the height of the draggable chip
-	// so that the cursor is centered over the left part of the chip.
+	// Offset position so that cursor is centered over the drag handle.
 	top: -#{$block-toolbar-height / 2};
-	left: -#{$block-toolbar-height / 2};
+	left: 0;
 }
 
 .block-editor-block-draggable-chip {

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -543,12 +543,32 @@
 
 	.block-editor-block-mover:not(.is-horizontal) {
 		.block-editor-block-mover-button {
-			&.is-up-button svg {
-				margin-top: 3px;
+			&.is-up-button {
+				svg {
+					margin-top: 2px;
+					transition: ease-in-out transform 0.1s;
+					@include reduce-motion("transition");
+				}
+				&:focus,
+				&:hover {
+					svg {
+						transform: translateY(-2px);
+					}
+				}
 			}
 
-			&.is-down-button svg {
-				margin-bottom: 3px;
+			&.is-down-button {
+				svg {
+					margin-bottom: 3px;
+					transition: ease-in-out transform 0.1s;
+					@include reduce-motion("transition");
+				}
+				&:focus,
+				&:hover {
+					svg {
+						transform: translateY(2px);
+					}
+				}
 			}
 
 			&:focus::before {

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -7,14 +7,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
+
+import { dragHandle } from '@wordpress/icons';
+import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import BlockDraggable from '../block-draggable';
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 
 function BlockMover( {
@@ -25,6 +28,7 @@ function BlockMover( {
 	isHidden,
 	rootClientId,
 	orientation,
+	hideDragHandle,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -46,7 +50,27 @@ function BlockMover( {
 				'is-horizontal': orientation === 'horizontal',
 			} ) }
 		>
-			<ToolbarGroup>
+			{ ! hideDragHandle && (
+				<BlockDraggable
+					clientIds={ clientIds }
+					cloneClassname="block-editor-block-mover__drag-clone"
+				>
+					{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
+						<Button
+							icon={ dragHandle }
+							className="block-editor-block-mover__drag-handle"
+							aria-hidden="true"
+							// Should not be able to tab to drag handle as this
+							// button can only be used with a pointer device.
+							tabIndex="-1"
+							onDragStart={ onDraggableStart }
+							onDragEnd={ onDraggableEnd }
+							draggable={ isDraggable }
+						/>
+					) }
+				</BlockDraggable>
+			) }
+			<ToolbarGroup className="block-editor-block-mover__move-button-container">
 				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
 					{ ( itemProps ) => (
 						<BlockMoverUpButton

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -13,28 +13,32 @@
 
 // Show the mover in a single button under the contextual toolbar.
 .block-editor-block-mover {
-	.components-toolbar-group,
+	.block-editor-block-mover__move-button-container,
 	.components-toolbar {
 		flex: 1;
 
 		// Increase touch targets on mobile.
 		flex-direction: row;
+		border-right: none !important;
 
 		@include break-small() {
 			flex-direction: column;
 		}
 	}
 
-	&.is-horizontal .components-toolbar-group,
+	&.is-horizontal .block-editor-block-mover__move-button-container,
 	&.is-horizontal .components-toolbar {
 		flex-direction: row;
 	}
 
 	.block-editor-block-mover-button {
 		@include break-small() {
-			padding: 0 !important;
+			// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
 			height: $block-toolbar-height/2;
-			width: $block-toolbar-height;
+			width: $block-toolbar-height - $grid-unit-15 / 2;
+			padding-right: $grid-unit-15 - $border-width !important;
+			padding-left: $grid-unit-15 / 2 !important;
+			min-width: $block-toolbar-height - $grid-unit-15 / 2 !important;
 		}
 
 		// Focus style.
@@ -47,6 +51,20 @@
 		}
 	}
 
+	.block-editor-block-mover__drag-handle {
+		width: $button-size-small;
+		cursor: grab;
+
+		// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
+		min-width: $button-size-small !important;
+		padding: 0 !important;
+
+		&:focus::before {
+			left: 0 !important;
+			right: 0 !important;
+		}
+	}
+
 	// Position the icons correctly.
 	@include break-small() {
 		.components-toolbar-group .block-editor-block-mover-button.is-up-button,

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -20,6 +20,11 @@
 	}
 }
 
+// Indent the popover to match the button position.
+.block-editor-block-switcher__popover {
+	margin-left: 6px;
+}
+
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	width: $block-toolbar-height;
 

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -10,6 +10,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import { ToolbarGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -20,7 +21,6 @@ import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
 import BlockFormatControls from '../block-format-controls';
 import BlockSettingsMenu from '../block-settings-menu';
-import BlockDraggable from '../block-draggable';
 import { useShowMoversGestures } from './utils';
 import ExpandedBlockControlsContainer from './expanded-block-controls-container';
 
@@ -113,26 +113,15 @@ export default function BlockToolbar( {
 					</div>
 				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-					<BlockSwitcher clientIds={ blockClientIds } />
+					<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+						<BlockSwitcher clientIds={ blockClientIds } />
+						<BlockMover
+							clientIds={ blockClientIds }
+							hideDragHandle={ hideDragHandle }
+						/>
+					</ToolbarGroup>
 				) }
 			</div>
-			{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-				<BlockDraggable
-					clientIds={ blockClientIds }
-					cloneClassname="block-editor-block-toolbar__drag-clone"
-				>
-					{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
-						<div
-							className="block-editor-block-toolbar__drag-handle-area"
-							draggable={ isDraggable && ! hideDragHandle }
-							onDragStart={ onDraggableStart }
-							onDragEnd={ onDraggableEnd }
-						>
-							<BlockMover clientIds={ blockClientIds } />
-						</div>
-					) }
-				</BlockDraggable>
-			) }
 			{ shouldShowVisualToolbar && (
 				<>
 					<BlockControls.Slot

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -44,6 +44,31 @@
 	}
 }
 
+// Block controls.
+.block-editor-block-toolbar__block-controls {
+	// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
+	height: auto !important;
+	padding: 0 !important;
+
+	// Switcher.
+	.block-editor-block-switcher .components-dropdown-menu__toggle,
+	.block-editor-block-switcher__no-switcher-icon {
+		min-width: $block-toolbar-height - $grid-unit-15 / 2 !important;
+		width: $block-toolbar-height - $grid-unit-15 / 2 !important;
+		padding-left: $grid-unit-15 - $border-width !important;
+		padding-right: $grid-unit-15 / 2 !important;
+
+		.block-editor-block-icon {
+			width: $button-size-small !important;
+			margin: 0 !important;
+		}
+
+		&:focus::before {
+			right: $grid-unit-05 !important;
+		}
+	}
+}
+
 .block-editor-block-toolbar,
 .block-editor-format-toolbar {
 	// Override Toolbar buttons size.

diff --git a/...ges/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/...ges/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><div class=\\"components-flex components-select-control e1cr7zh10 css-sbt0p2-Flex-Root eboqfv50\\"><div class=\\"components-flex__item e1cr7zh14 css-d373l0-Item-LabelWrapper eboqfv51\\"><label for=\\"inspector-select-control-0\\" class=\\"components-input-control__label css-7tv4lf-Text-BaseLabel e1cr7zh13\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label></div><div class=\\"components-input-control__container css-99mm9s-Container e1cr7zh11\\"><select class=\\"components-select-control__input css-hwcz8s-Select e12x0a390\\" id=\\"inspector-select-control-0\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select><span class=\\"components-input-control__suffix css-1lym30p-Suffix e1cr7zh19\\"><div class=\\"css-s55r1c-DownArrowWrapper e12x0a391\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></div></span><fieldset aria-hidden=\\"true\\" class=\\"components-input-control__backdrop css-15qcvxb-Fieldset e1cr7zh15\\"></fieldset></div></div></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><div class=\\"components-flex components-select-control e1cr7zh10 css-sbt0p2-Flex-Root eboqfv50\\"><div class=\\"components-flex__item e1cr7zh14 css-d373l0-Item-LabelWrapper eboqfv51\\"><label for=\\"inspector-select-control-0\\" class=\\"components-input-control__label css-7tv4lf-Text-BaseLabel e1cr7zh13\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label></div><div class=\\"components-input-control__container css-99mm9s-Container e1cr7zh11\\"><select class=\\"components-select-control__input css-hwcz8s-Select e12x0a390\\" id=\\"inspector-select-control-0\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select><span class=\\"components-input-control__suffix css-1lym30p-Suffix e1cr7zh19\\"><div class=\\"css-s55r1c-DownArrowWrapper e12x0a391\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z\\"></path></svg></div></span><fieldset aria-hidden=\\"true\\" class=\\"components-input-control__backdrop css-15qcvxb-Fieldset e1cr7zh15\\"></fieldset></div></div></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
@@ -24,7 +24,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <Path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </SVG>
         }
@@ -60,7 +60,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
             xmlns="http://www.w3.org/2000/svg"
           >
             <Path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </SVG>
         }

diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -164,7 +164,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -338,7 +338,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -512,7 +512,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -686,7 +686,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -860,7 +860,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -1034,7 +1034,7 @@ exports[`ColorPicker should render color picker 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>

diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss
@@ -6,7 +6,8 @@
 	flex-shrink: 0;
 	flex-wrap: wrap;
 
-	& & {
+	// Unset for nested toolbar groups. Increase specificity.
+	& .components-toolbar-group.components-toolbar-group {
 		border-width: 0;
 		margin: 0;
 	}

diff --git a/...it-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/...it-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
diff --git a/...dit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/...dit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,4 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+q