@wordpress/block-editor 12.3.1 → 12.3.2

package/build-style/style-rtl.css

@@ -328,6 +328,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-left-color: #e0e0e0;
 }
+.block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
+  display: none;
+}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-right: 64px;
@@ -1883,15 +1886,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__field {
   margin: 16px;
 }
-.block-editor-link-control__field > .components-base-control__field {
-  display: flex;
-  align-items: center;
-}
-.block-editor-link-control__field .components-base-control__label {
-  margin-left: 16px;
-  margin-bottom: 0;
-  min-width: 29px;
-}
 .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -1903,13 +1897,14 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  width: calc(100% - 32px);
   display: block;
-  padding: 11px 16px;
+  border: 1px solid #949494;
+  border-radius: 2px;
+  height: 40px;
   margin: 0;
+  padding: 8px 16px;
   position: relative;
-  border: 1px solid #ddd;
-  border-radius: 2px;
+  width: 100%;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
@@ -1949,12 +1944,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
+  padding: 8px;
   order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
   position: relative;
-  margin-top: -15px;
 }
 .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
   content: "";
@@ -2235,48 +2230,18 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
-  margin-top: 16px;
-  padding-top: 16px;
   position: relative;
 }
-.block-editor-link-control__drawer-inner::after {
-  content: "";
-  display: block;
-  height: 1px;
-  background-color: #ddd;
-  position: absolute;
-  right: -16px;
-  left: -16px;
-  top: 0;
-}
-
-.block-editor-link-control__tools {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0;
-  padding: 16px;
-  margin-top: calc(var(--wp-admin-border-width-focus) * -1);
-  padding-top: var(--wp-admin-border-width-focus);
-  overflow: hidden;
-}
 
 .block-editor-link-control__unlink {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.block-editor-link-control__settings {
-  flex: 1;
-  margin: 0;
-}
-.is-alternate .block-editor-link-control__settings {
-  border-top: 1px solid #1e1e1e;
-}
-
 .block-editor-link-control__setting {
   margin-bottom: 16px;
+  flex: 1;
+  padding: 8px 24px 8px 0;
 }
 .block-editor-link-control__setting input {
   margin-right: 0;
@@ -2285,6 +2250,37 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin-bottom: 0;
 }
 
+.block-editor-link-control__tools {
+  padding: 8px 8px 0 8px;
+  margin-top: -16px;
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle {
+  padding-right: 0;
+  gap: 0;
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
+  visibility: visible;
+  transition: transform 0.1s ease;
+  transform: rotate(-90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
+  visibility: visible;
+  transform: rotate(0deg);
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
   display: block;
 }

package/build-style/style.css

@@ -328,6 +328,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-right-color: #e0e0e0;
 }
+.block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
+  display: none;
+}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-left: 64px;
@@ -1884,15 +1887,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__field {
   margin: 16px;
 }
-.block-editor-link-control__field > .components-base-control__field {
-  display: flex;
-  align-items: center;
-}
-.block-editor-link-control__field .components-base-control__label {
-  margin-right: 16px;
-  margin-bottom: 0;
-  min-width: 29px;
-}
 .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -1904,13 +1898,14 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  width: calc(100% - 32px);
   display: block;
-  padding: 11px 16px;
+  border: 1px solid #949494;
+  border-radius: 2px;
+  height: 40px;
   margin: 0;
+  padding: 8px 16px;
   position: relative;
-  border: 1px solid #ddd;
-  border-radius: 2px;
+  width: 100%;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
@@ -1950,12 +1945,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
+  padding: 8px;
   order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
   position: relative;
-  margin-top: -15px;
 }
 .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
   content: "";
@@ -2236,48 +2231,18 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
-  margin-top: 16px;
-  padding-top: 16px;
   position: relative;
 }
-.block-editor-link-control__drawer-inner::after {
-  content: "";
-  display: block;
-  height: 1px;
-  background-color: #ddd;
-  position: absolute;
-  left: -16px;
-  right: -16px;
-  top: 0;
-}
-
-.block-editor-link-control__tools {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0;
-  padding: 16px;
-  margin-top: calc(var(--wp-admin-border-width-focus) * -1);
-  padding-top: var(--wp-admin-border-width-focus);
-  overflow: hidden;
-}
 
 .block-editor-link-control__unlink {
   padding-left: 16px;
   padding-right: 16px;
 }
 
-.block-editor-link-control__settings {
-  flex: 1;
-  margin: 0;
-}
-.is-alternate .block-editor-link-control__settings {
-  border-top: 1px solid #1e1e1e;
-}
-
 .block-editor-link-control__setting {
   margin-bottom: 16px;
+  flex: 1;
+  padding: 8px 0 8px 24px;
 }
 .block-editor-link-control__setting input {
   margin-left: 0;
@@ -2286,6 +2251,37 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin-bottom: 0;
 }
 
+.block-editor-link-control__tools {
+  padding: 8px 8px 0 8px;
+  margin-top: -16px;
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle {
+  padding-left: 0;
+  gap: 0;
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
+  visibility: visible;
+  transition: transform 0.1s ease;
+  transform: rotate(90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
+  visibility: visible;
+  transform: rotate(0deg);
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
   display: block;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.3.1",
+	"version": "12.3.2",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,12 +32,13 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
 		"@wordpress/a11y": "^3.35.1",
 		"@wordpress/api-fetch": "^6.32.1",
 		"@wordpress/blob": "^3.35.1",
 		"@wordpress/blocks": "^12.12.1",
-		"@wordpress/components": "^25.1.1",
+		"@wordpress/components": "^25.1.2",
 		"@wordpress/compose": "^6.12.1",
 		"@wordpress/data": "^9.5.1",
 		"@wordpress/date": "^4.35.1",
@@ -48,12 +49,12 @@
 		"@wordpress/hooks": "^3.35.1",
 		"@wordpress/html-entities": "^3.35.1",
 		"@wordpress/i18n": "^4.35.1",
-		"@wordpress/icons": "^9.26.1",
+		"@wordpress/icons": "^9.26.2",
 		"@wordpress/is-shallow-equal": "^4.35.1",
 		"@wordpress/keyboard-shortcuts": "^4.12.1",
 		"@wordpress/keycodes": "^3.35.1",
 		"@wordpress/notices": "^4.3.1",
-		"@wordpress/preferences": "^3.12.1",
+		"@wordpress/preferences": "^3.12.2",
 		"@wordpress/private-apis": "^0.17.1",
 		"@wordpress/rich-text": "^6.12.1",
 		"@wordpress/shortcode": "^3.35.1",
@@ -84,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ce5639111c30763dbdf07f40eeb136ea6030ecf1"
+	"gitHead": "a00463f06c90ae6705951861eb889e67a52bf448"
 }

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -25,7 +25,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
           />
         </svg>
       </button>
@@ -48,7 +48,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
           />
         </svg>
       </button>
@@ -80,7 +80,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+          d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
         />
       </svg>
     </button>
@@ -113,7 +113,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
           />
         </svg>
       </button>
@@ -136,7 +136,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
           />
         </svg>
       </button>
@@ -159,7 +159,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
+            d="M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z"
           />
         </svg>
       </button>

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -23,7 +23,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
+          d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
         />
       </svg>
     </button>
@@ -55,7 +55,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
+            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z"
           />
         </svg>
       </button>
@@ -77,7 +77,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
+            d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
           />
         </svg>
       </button>
@@ -99,7 +99,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z"
+            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
           />
         </svg>
       </button>
@@ -121,7 +121,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M6 15h14V9H6v6zm6-10.8v1.5h8V4.2h-8zm0 15.6h8v-1.5h-8v1.5z"
+            d="M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
           />
         </svg>
       </button>

package/src/components/block-lock/toolbar.js

@@ -3,7 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useReducer } from '@wordpress/element';
+import { focus } from '@wordpress/dom';
+import { useReducer, useRef, useEffect } from '@wordpress/element';
 import { lock } from '@wordpress/icons';
 
 /**
@@ -12,7 +13,7 @@ import { lock } from '@wordpress/icons';
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
 
-export default function BlockLockToolbar( { clientId } ) {
+export default function BlockLockToolbar( { clientId, wrapperRef } ) {
 	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
@@ -20,11 +21,37 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	if ( ! canLock ) {
-		return null;
-	}
+	const lockButtonRef = useRef( null );
+	const isFirstRender = useRef( true );
+
+	const shouldHideBlockLockUI =
+		! canLock || ( canEdit && canMove && canRemove );
+
+	// Restore focus manually on the first focusable element in the toolbar
+	// when the block lock modal is closed and the block is not locked anymore.
+	// See https://github.com/WordPress/gutenberg/issues/51447
+	useEffect( () => {
+		if ( isFirstRender.current ) {
+			isFirstRender.current = false;
+			return;
+		}
+
+		if ( ! isModalOpen && shouldHideBlockLockUI ) {
+			focus.focusable
+				.find( wrapperRef.current, {
+					sequential: false,
+				} )
+				.find(
+					( element ) =>
+						element.tagName === 'BUTTON' &&
+						element !== lockButtonRef.current
+				)
+				?.focus();
+		}
+		// wrapperRef is a reference object and should be stable
+	}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );
 
-	if ( canEdit && canMove && canRemove ) {
+	if ( shouldHideBlockLockUI ) {
 		return null;
 	}
 
@@ -35,6 +62,7 @@ export default function BlockLockToolbar( { clientId } ) {
 					icon={ lock }
 					label={ __( 'Unlock' ) }
 					onClick={ toggleModal }
+					ref={ lockButtonRef }
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (

package/src/components/block-toolbar/index.js

@@ -78,6 +78,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		};
 	}, [] );
 
+	const toolbarWrapperRef = useRef( null );
+
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
@@ -123,18 +125,19 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	} );
 
 	return (
-		<div className={ classes }>
+		<div className={ classes } ref={ toolbarWrapperRef }>
 			{ ! isMultiToolbar &&
 				isLargeViewport &&
 				blockEditingMode === 'default' && <BlockParentSelector /> }
-			<div ref={ nodeRef } { ...showMoversGestures }>
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					blockEditingMode === 'default' && (
+			{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+				blockEditingMode === 'default' && (
+					<div ref={ nodeRef } { ...showMoversGestures }>
 						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 							<BlockSwitcher clientIds={ blockClientIds } />
 							{ ! isMultiToolbar && (
 								<BlockLockToolbar
 									clientId={ blockClientIds[ 0 ] }
+									wrapperRef={ toolbarWrapperRef }
 								/>
 							) }
 							<BlockMover
@@ -142,8 +145,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 								hideDragHandle={ hideDragHandle }
 							/>
 						</ToolbarGroup>
-					) }
-			</div>
+					</div>
+				) }
 			{ shouldShowVisualToolbar && isMultiToolbar && (
 				<BlockGroupToolbar />
 			) }

package/src/components/block-tools/style.scss

@@ -121,6 +121,10 @@
 		}
 	}
 
+	&:has(.block-editor-block-toolbar:empty) {
+		display: none;
+	}
+
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
 

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @type {SelectControlProps[]}
+ */
+export const DEFAULT_ASPECT_RATIO_OPTIONS = [
+	{
+		label: _x( 'Original', 'Aspect ratio option for dimensions control' ),
+		value: 'auto',
+	},
+	{
+		label: _x(
+			'Square - 1:1',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '1',
+	},
+	{
+		label: _x(
+			'Standard - 4:3',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '4/3',
+	},
+	{
+		label: _x(
+			'Portrait - 3:4',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '3/4',
+	},
+	{
+		label: _x(
+			'Classic - 3:2',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '3/2',
+	},
+	{
+		label: _x(
+			'Classic Portrait - 2:3',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '2/3',
+	},
+	{
+		label: _x(
+			'Wide - 16:9',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '16/9',
+	},
+	{
+		label: _x(
+			'Tall - 9:16',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '9/16',
+	},
+	{
+		label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
+		value: 'custom',
+		disabled: true,
+		hidden: true,
+	},
+];
+
+/**
+ * @callback AspectRatioToolPropsOnChange
+ * @param {string} [value] New aspect ratio value.
+ * @return {void} No return.
+ */
+
+/**
+ * @typedef {Object} AspectRatioToolProps
+ * @property {string}                       [panelId]          ID of the panel this tool is associated with.
+ * @property {string}                       [value]            Current aspect ratio value.
+ * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.
+ * @property {SelectControlProps[]}         [options]          Aspect ratio options.
+ * @property {string}                       [defaultValue]     Default aspect ratio value.
+ * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ */
+
+export default function AspectRatioTool( {
+	panelId,
+	value,
+	onChange = () => {},
+	options = DEFAULT_ASPECT_RATIO_OPTIONS,
+	defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
+	isShownByDefault = true,
+} ) {
+	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
+	const displayValue = value ?? 'auto';
+
+	return (
+		<ToolsPanelItem
+			hasValue={ () => displayValue !== defaultValue }
+			label={ __( 'Aspect ratio' ) }
+			onDeselect={ () => onChange( undefined ) }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<SelectControl
+				label={ __( 'Aspect ratio' ) }
+				value={ displayValue }
+				options={ options }
+				onChange={ onChange }
+				size={ '__unstable-large' }
+				__nextHasNoMarginBottom
+			/>
+		</ToolsPanelItem>
+	);
+}