@wordpress/edit-site 5.33.0 → 5.34.0

package/build-style/style.css

@@ -371,37 +371,46 @@
   }
 }
 .dataviews-view-grid .dataviews-view-grid__card {
-  border-radius: 4px;
-  border: 1px solid #e0e0e0;
   height: 100%;
   justify-content: flex-start;
 }
 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions {
-  padding: 4px 8px 4px 4px;
+  padding: 8px 0 4px;
 }
 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field {
-  min-height: 40px;
-}
-.dataviews-view-grid .dataviews-view-grid__card.is-selected {
-  border-color: var(--wp-admin-theme-color);
-  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  min-height: 32px;
 }
 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   color: #1e1e1e;
 }
+.dataviews-view-grid .dataviews-view-grid__card.is-selected .page-pages-preview-field__button::after {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+}
 .dataviews-view-grid .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
-  border-bottom: 1px solid #e0e0e0;
   background-color: #f0f0f0;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
 }
 .dataviews-view-grid .dataviews-view-grid__media img {
   object-fit: cover;
   width: 100%;
   height: 100%;
 }
+.dataviews-view-grid .dataviews-view-grid__media::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
 .dataviews-view-grid .dataviews-view-grid__fields {
   position: relative;
   font-size: 12px;
@@ -410,7 +419,6 @@
 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
   padding: 12px 0;
   padding-top: 0;
-  margin: 0 12px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
   align-items: flex-start;
@@ -431,8 +439,7 @@
   color: #757575;
 }
 .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
-  padding: 12px;
-  padding-top: 0;
+  padding-bottom: 12px;
 }
 .dataviews-view-grid .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value {
   width: -moz-fit-content;
@@ -595,10 +602,6 @@
   flex-shrink: 0;
 }
 
-.dataviews-view-grid__title-actions .dataviews-view-table-selection-checkbox {
-  margin-left: 8px;
-}
-
 .dataviews-filter-summary__popover .components-popover__content {
   width: 230px;
   padding: 0;
@@ -1006,7 +1009,6 @@
   display: block;
   width: 100%;
   height: 100%;
-  background: #fff;
 }
 .edit-site-visual-editor .edit-site-visual-editor__editor-canvas.is-focused {
   outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
@@ -1072,32 +1074,26 @@
 }
 .resizable-editor__drag-handle::after {
   position: absolute;
-  top: 24px;
+  top: 16px;
   left: 4px;
   right: 0;
-  bottom: 24px;
+  bottom: 16px;
   content: "";
   width: 4px;
-  background: #949494;
+  background-color: rgba(117, 117, 117, 0.4);
   border-radius: 2px;
 }
 .resizable-editor__drag-handle.is-left {
-  left: -16px;
+  left: -18px;
 }
 .resizable-editor__drag-handle.is-right {
-  right: -16px;
+  right: -18px;
 }
-.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
+.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:focus, .resizable-editor__drag-handle:active {
   opacity: 1;
 }
-.resizable-editor__drag-handle:hover.is-variation-default::after, .resizable-editor__drag-handle:active.is-variation-default::after {
-  background: #ccc;
-}
-.resizable-editor__drag-handle:hover.is-variation-separator::after, .resizable-editor__drag-handle:active.is-variation-separator::after {
-  background: var(--wp-admin-theme-color);
-}
-.resizable-editor__drag-handle:focus::after {
-  box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
+.resizable-editor__drag-handle:hover::after, .resizable-editor__drag-handle:focus::after, .resizable-editor__drag-handle:active::after {
+  background-color: var(--wp-admin-theme-color);
 }
 .resizable-editor__drag-handle.is-variation-separator:focus::after {
   border-radius: 2px;
@@ -1580,6 +1576,13 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border-bottom: 1px solid #e0e0e0;
   padding-left: 60px;
 }
+.edit-site-header-edit-mode.show-block-toolbar .edit-site-header-edit-mode__start,
+.edit-site-header-edit-mode.show-block-toolbar .edit-site-header-edit-mode__end {
+  flex-basis: auto;
+}
+.edit-site-header-edit-mode.show-block-toolbar .edit-site-header-edit-mode__center {
+  display: none;
+}
 .edit-site-header-edit-mode .edit-site-header-edit-mode__start {
   display: flex;
   border: none;
@@ -1717,68 +1720,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   left: calc(50% + 1px);
 }
 
-.has-fixed-toolbar .selected-block-tools-wrapper {
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  height: 60px;
-}
-.has-fixed-toolbar .selected-block-tools-wrapper .block-editor-block-contextual-toolbar {
-  border-bottom: 0;
-  height: 100%;
-}
-.has-fixed-toolbar .selected-block-tools-wrapper .block-editor-block-toolbar {
-  height: 100%;
-  padding-top: 15px;
-}
-.has-fixed-toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .components-button:not(.block-editor-block-mover-button) {
-  height: 32px;
-}
-.has-fixed-toolbar .selected-block-tools-wrapper::after {
-  content: "";
-  width: 1px;
-  height: 24px;
-  background-color: #ddd;
-  margin-left: 8px;
-}
-.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar-group,
-.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar {
-  border-right: none;
-}
-.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar-group::after,
-.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar::after {
-  content: "";
-  width: 1px;
-  height: 24px;
-  background-color: #ddd;
-  margin-top: 4px;
-  margin-left: 8px;
-}
-.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
-.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar .components-toolbar-group.components-toolbar-group::after {
-  display: none;
-}
-.has-fixed-toolbar .selected-block-tools-wrapper .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
-  height: 32px;
-  overflow: visible;
-}
-@media (min-width: 600px) {
-  .has-fixed-toolbar .selected-block-tools-wrapper .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
-    position: relative;
-    top: -10px;
-  }
-}
-.has-fixed-toolbar .selected-block-tools-wrapper.is-collapsed {
-  display: none;
-}
-.has-fixed-toolbar .edit-site-header-edit-mode__center.is-collapsed {
-  display: none;
-}
-
-.edit-site-header-edit-mode__block-tools-toggle {
-  margin-left: 2px;
-}
-
 .components-popover.more-menu-dropdown__content {
   z-index: 99998;
 }
@@ -1865,6 +1806,15 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
+.page-pages-preview-field__button::after {
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
 
 .edit-site-patterns__header {
   position: sticky;
@@ -1908,9 +1858,16 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border-radius: 3px 3px 0 0;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-grid .block-editor-block-preview__container {
-  height: 100%;
   border-radius: 3px 3px 0 0;
 }
+.edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-table {
+  width: 96px;
+  flex-grow: 0;
+  border-radius: 2px;
+}
+.edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-table .page-patterns-preview-field__button {
+  border-radius: 2px;
+}
 .edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button {
   box-shadow: none;
   border: none;
@@ -1926,6 +1883,9 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
+.edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button[aria-disabled=true] {
+  cursor: default;
+}
 .edit-site-page-patterns-dataviews .edit-site-patterns__pattern-icon {
   fill: var(--wp-block-synced-color);
   flex-shrink: 0;
@@ -2009,7 +1969,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   height: 120px;
 }
 .page-templates-preview-field.is-viewtype-grid .block-editor-block-preview__container {
-  height: auto;
+  height: 100%;
 }
 .page-templates-preview-field.is-viewtype-grid .page-templates-preview-field__button {
   border-radius: 3px 3px 0 0;
@@ -2033,7 +1993,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   white-space: normal;
 }
 
-.edit-site-page-template-template-parts-dataviews .dataviews-pagination {
+.edit-site-page-templates .dataviews-pagination {
   z-index: 2;
 }
 
@@ -2223,30 +2183,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin-top: -1px;
 }
 
-.edit-site-change-status__content .components-popover__content {
-  min-width: 320px;
-  padding: 16px;
-}
-.edit-site-change-status__content .edit-site-change-status__options .components-base-control__field > .components-v-stack {
-  gap: 8px;
-}
-.edit-site-change-status__content .edit-site-change-status__options label .components-text {
-  display: block;
-}
-.edit-site-change-status__content .edit-site-change-status__password-legend {
-  padding: 0;
-  margin-bottom: 8px;
-}
-
-.edit-site-summary-field__trigger {
-  max-width: 100%;
-  display: block;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   padding-left: 0;
   padding-right: 16px;
@@ -2303,10 +2239,14 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   justify-content: center;
 }
 
+.edit-site .has-block-breadcrumbs.is-full-canvas .components-editor-notices__snackbar {
+  bottom: 40px;
+}
+
 .edit-site .components-editor-notices__snackbar {
   position: absolute;
   right: 0;
-  bottom: 40px;
+  bottom: 16px;
   padding-left: 16px;
   padding-right: 16px;
 }
@@ -3568,6 +3508,23 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   margin-bottom: 0;
 }
 
+.font-library-modal__fonts-title {
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 600;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list-item {
+  margin-bottom: 0;
+}
+
 .font-library-modal__font-card {
   border: 1px solid #e0e0e0;
   width: 100%;
@@ -3795,9 +3752,6 @@ body.js.site-editor-php {
 .edit-site .interface-complementary-area__pin-unpin-item.components-button {
   display: none;
 }
-.edit-site .interface-interface-skeleton__content {
-  background-color: #ddd;
-}
 
 /**
  * Animations

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.33.0",
+	"version": "5.34.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,46 +28,46 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.56.0",
-		"@wordpress/api-fetch": "^6.53.0",
-		"@wordpress/blob": "^3.56.0",
-		"@wordpress/block-editor": "^12.24.0",
-		"@wordpress/block-library": "^8.33.0",
-		"@wordpress/blocks": "^12.33.0",
-		"@wordpress/commands": "^0.27.0",
-		"@wordpress/components": "^27.4.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/core-commands": "^0.25.0",
-		"@wordpress/core-data": "^6.33.0",
-		"@wordpress/data": "^9.26.0",
-		"@wordpress/dataviews": "^1.0.0",
-		"@wordpress/date": "^4.56.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/dom": "^3.56.0",
-		"@wordpress/editor": "^13.33.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/escape-html": "^2.56.0",
-		"@wordpress/hooks": "^3.56.0",
-		"@wordpress/html-entities": "^3.56.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/keyboard-shortcuts": "^4.33.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/media-utils": "^4.47.0",
-		"@wordpress/notices": "^4.24.0",
-		"@wordpress/patterns": "^1.17.0",
-		"@wordpress/plugins": "^6.24.0",
-		"@wordpress/preferences": "^3.33.0",
-		"@wordpress/primitives": "^3.54.0",
-		"@wordpress/priority-queue": "^2.56.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/reusable-blocks": "^4.33.0",
-		"@wordpress/router": "^0.25.0",
-		"@wordpress/style-engine": "^1.39.0",
-		"@wordpress/url": "^3.57.0",
-		"@wordpress/viewport": "^5.33.0",
-		"@wordpress/widgets": "^3.33.0",
-		"@wordpress/wordcount": "^3.56.0",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/api-fetch": "^6.54.0",
+		"@wordpress/blob": "^3.57.0",
+		"@wordpress/block-editor": "^12.25.0",
+		"@wordpress/block-library": "^8.34.0",
+		"@wordpress/blocks": "^12.34.0",
+		"@wordpress/commands": "^0.28.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/core-commands": "^0.26.0",
+		"@wordpress/core-data": "^6.34.0",
+		"@wordpress/data": "^9.27.0",
+		"@wordpress/dataviews": "^1.1.0",
+		"@wordpress/date": "^4.57.0",
+		"@wordpress/deprecated": "^3.57.0",
+		"@wordpress/dom": "^3.57.0",
+		"@wordpress/editor": "^13.34.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/escape-html": "^2.57.0",
+		"@wordpress/hooks": "^3.57.0",
+		"@wordpress/html-entities": "^3.57.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/keyboard-shortcuts": "^4.34.0",
+		"@wordpress/keycodes": "^3.57.0",
+		"@wordpress/media-utils": "^4.48.0",
+		"@wordpress/notices": "^4.25.0",
+		"@wordpress/patterns": "^1.18.0",
+		"@wordpress/plugins": "^6.25.0",
+		"@wordpress/preferences": "^3.34.0",
+		"@wordpress/primitives": "^3.55.0",
+		"@wordpress/priority-queue": "^2.57.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/reusable-blocks": "^4.34.0",
+		"@wordpress/router": "^0.26.0",
+		"@wordpress/style-engine": "^1.40.0",
+		"@wordpress/url": "^3.58.0",
+		"@wordpress/viewport": "^5.34.0",
+		"@wordpress/widgets": "^3.34.0",
+		"@wordpress/wordcount": "^3.57.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"client-zip": "^2.4.4",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

package/src/components/add-new-page/index.js

@@ -72,16 +72,22 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 			<form onSubmit={ createPage }>
 				<VStack spacing={ 3 }>
 					<TextControl
+						__next40pxDefaultSize
 						label={ __( 'Page title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }
 						value={ title }
 					/>
 					<HStack spacing={ 2 } justify="end">
-						<Button variant="tertiary" onClick={ onClose }>
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
 							isBusy={ isCreatingPage }

package/src/components/add-new-pattern/index.js

@@ -11,8 +11,8 @@ import {
 	privateApis as editPatternsPrivateApis,
 	store as patternsStore,
 } from '@wordpress/patterns';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -37,13 +37,14 @@ export default function AddNewPattern() {
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
-	const isBlockBasedTheme = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentTheme()?.is_block_theme;
-	}, [] );
 	const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const patternUploadInputRef = useRef();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 
 	function handleCreatePattern( { pattern, categoryId } ) {
 		setShowPatternModal( false );
@@ -73,13 +74,13 @@ export default function AddNewPattern() {
 		setShowTemplatePartModal( false );
 	}
 
-	const controls = [
-		{
-			icon: symbol,
-			onClick: () => setShowPatternModal( true ),
-			title: __( 'Create pattern' ),
-		},
-	];
+	const controls = [];
+
+	controls.push( {
+		icon: symbol,
+		onClick: () => setShowPatternModal( true ),
+		title: __( 'Create pattern' ),
+	} );
 
 	if ( isBlockBasedTheme ) {
 		controls.push( {
@@ -131,7 +132,9 @@ export default function AddNewPattern() {
 				ref={ patternUploadInputRef }
 				onChange={ async ( event ) => {
 					const file = event.target.files?.[ 0 ];
-					if ( ! file ) return;
+					if ( ! file ) {
+						return;
+					}
 					try {
 						let currentCategoryId;
 						// When we're not handling template parts, we should

package/src/components/add-new-template/add-custom-generic-template-modal-content.js

@@ -43,6 +43,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 		<form onSubmit={ onCreateTemplate }>
 			<VStack spacing={ 6 }>
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
@@ -58,6 +59,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 					justify="right"
 				>
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => {
 							onClose();
@@ -66,6 +68,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						isBusy={ isBusy }

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -99,7 +99,9 @@ function useSearchSuggestions( entityForSuggestions, search ) {
 		);
 	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
 	useEffect( () => {
-		if ( ! searchHasResolved ) return;
+		if ( ! searchHasResolved ) {
+			return;
+		}
 		let newSuggestions = EMPTY_ARRAY;
 		if ( searchResults?.length ) {
 			newSuggestions = searchResults;

package/src/components/block-editor/resize-handle.js

@@ -3,7 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
-import { VisuallyHidden } from '@wordpress/components';
+import {
+	VisuallyHidden,
+	Tooltip,
+	__unstableMotion as motion,
+} from '@wordpress/components';
 
 const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
 
@@ -28,18 +32,33 @@ export default function ResizeHandle( {
 		}
 	}
 
+	const resizeHandleVariants = {
+		active: {
+			opacity: 1,
+			scaleY: 1.3,
+		},
+	};
+
+	const resizableHandleHelpId = `resizable-editor__resize-help-${ direction }`;
+
 	return (
 		<>
-			<button
-				className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` }
-				aria-label={ __( 'Drag to resize' ) }
-				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
-				onKeyDown={ handleKeyDown }
-				type="button"
-			/>
-			<VisuallyHidden
-				id={ `resizable-editor__resize-help-${ direction }` }
-			>
+			<Tooltip text={ __( 'Drag to resize' ) }>
+				<motion.button
+					className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` }
+					aria-label={ __( 'Drag to resize' ) }
+					aria-describedby={ resizableHandleHelpId }
+					onKeyDown={ handleKeyDown }
+					variants={ resizeHandleVariants }
+					whileFocus="active"
+					whileHover="active"
+					whileTap="active"
+					key="handle"
+					role="separator"
+					aria-orientation="vertical"
+				/>
+			</Tooltip>
+			<VisuallyHidden id={ resizableHandleHelpId }>
 				{ __( 'Use left and right arrow keys to resize the canvas.' ) }
 			</VisuallyHidden>
 		</>