@wordpress/block-editor 12.18.0 → 12.18.2

package/build-style/style-rtl.css

@@ -128,11 +128,11 @@ iframe[name=editor-canvas] {
   display: block;
 }
 
-iframe[name=editor-canvas]:not(.has-history) {
+iframe[name=editor-canvas]:not(.has-editor-padding) {
   background-color: #fff;
 }
 
-iframe[name=editor-canvas].has-history {
+iframe[name=editor-canvas].has-editor-padding {
   padding: 48px 48px 0;
 }
 
@@ -2692,7 +2692,7 @@ iframe[name=editor-canvas].has-history {
   margin-bottom: 8px;
 }
 .block-editor-media-flow__url-input .block-editor-link-control {
-  width: 300px;
+  width: 200px;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
   padding: 0;
@@ -3094,47 +3094,37 @@ iframe[name=editor-canvas].has-history {
 }
 
 .block-editor-url-popover__additional-controls {
-  border-top: 1px solid #ddd;
-}
-
-.block-editor-url-popover__additional-controls > div[role=menu] .components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) > svg {
-  box-shadow: none;
+  border-top: 1px solid #1e1e1e;
+  padding: 8px 8px;
 }
 
-.block-editor-url-popover__additional-controls div[role=menu] > .components-button {
-  padding-right: 12px;
+.block-editor-url-popover__input-container {
+  padding: 8px;
+  padding-right: 16px;
 }
 
 .block-editor-url-popover__row {
   display: flex;
+  gap: 4px;
 }
 
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
   flex-grow: 1;
+  gap: 4px;
 }
 
-.block-editor-url-popover .components-button.has-icon {
-  padding: 3px;
-}
-.block-editor-url-popover .components-button.has-icon > svg {
-  padding: 5px;
-  border-radius: 2px;
-  height: 30px;
-  width: 30px;
-}
-.block-editor-url-popover .components-button.has-icon:not(:disabled):focus {
-  box-shadow: none;
+.block-editor-url-popover__additional-controls .components-button.has-icon {
+  padding-right: 8px;
+  padding-left: 8px;
+  height: auto;
+  text-align: right;
 }
-.block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: 2px solid transparent;
+.block-editor-url-popover__additional-controls .components-button.has-icon > svg {
+  margin-left: 8px;
 }
 
 .block-editor-url-popover__settings-toggle {
   flex-shrink: 0;
-  border-radius: 0;
-  border-right: 1px solid #ddd;
-  margin-right: 1px;
 }
 .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
   transform: rotate(-180deg);
@@ -3143,7 +3133,7 @@ iframe[name=editor-canvas].has-history {
 .block-editor-url-popover__settings {
   display: block;
   padding: 16px;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #1e1e1e;
 }
 
 .block-editor-url-popover__link-editor,
@@ -3152,19 +3142,46 @@ iframe[name=editor-canvas].has-history {
 }
 
 .block-editor-url-popover__link-viewer-url {
-  margin: 7px;
+  display: flex;
+  align-items: center;
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 150px;
-  max-width: 500px;
+  margin-left: 8px;
 }
 .block-editor-url-popover__link-viewer-url.has-invalid-link {
   color: #cc1818;
 }
 
+.block-editor-url-popover__expand-on-click {
+  display: flex;
+  align-items: center;
+  min-width: 350px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.block-editor-url-popover__expand-on-click .fullscreen-icon {
+  padding-left: 4px;
+}
+.block-editor-url-popover__expand-on-click .fullscreen-icon > svg {
+  width: 24px;
+  height: 24px;
+}
+.block-editor-url-popover__expand-on-click .text {
+  flex-grow: 1;
+}
+.block-editor-url-popover__expand-on-click .text p {
+  margin: 0;
+}
+.block-editor-url-popover__expand-on-click .description {
+  color: #949494;
+}
+.block-editor-url-popover__expand-on-click .remove-link {
+  margin-left: 8px;
+}
+
 .html-anchor-control .components-external-link {
   display: block;
   margin-top: 8px;

package/build-style/style.css

@@ -128,11 +128,11 @@ iframe[name=editor-canvas] {
   display: block;
 }
 
-iframe[name=editor-canvas]:not(.has-history) {
+iframe[name=editor-canvas]:not(.has-editor-padding) {
   background-color: #fff;
 }
 
-iframe[name=editor-canvas].has-history {
+iframe[name=editor-canvas].has-editor-padding {
   padding: 48px 48px 0;
 }
 
@@ -2693,7 +2693,7 @@ iframe[name=editor-canvas].has-history {
   margin-bottom: 8px;
 }
 .block-editor-media-flow__url-input .block-editor-link-control {
-  width: 300px;
+  width: 200px;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
   padding: 0;
@@ -3095,47 +3095,37 @@ iframe[name=editor-canvas].has-history {
 }
 
 .block-editor-url-popover__additional-controls {
-  border-top: 1px solid #ddd;
-}
-
-.block-editor-url-popover__additional-controls > div[role=menu] .components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) > svg {
-  box-shadow: none;
+  border-top: 1px solid #1e1e1e;
+  padding: 8px 8px;
 }
 
-.block-editor-url-popover__additional-controls div[role=menu] > .components-button {
-  padding-left: 12px;
+.block-editor-url-popover__input-container {
+  padding: 8px;
+  padding-left: 16px;
 }
 
 .block-editor-url-popover__row {
   display: flex;
+  gap: 4px;
 }
 
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
   flex-grow: 1;
+  gap: 4px;
 }
 
-.block-editor-url-popover .components-button.has-icon {
-  padding: 3px;
-}
-.block-editor-url-popover .components-button.has-icon > svg {
-  padding: 5px;
-  border-radius: 2px;
-  height: 30px;
-  width: 30px;
-}
-.block-editor-url-popover .components-button.has-icon:not(:disabled):focus {
-  box-shadow: none;
+.block-editor-url-popover__additional-controls .components-button.has-icon {
+  padding-left: 8px;
+  padding-right: 8px;
+  height: auto;
+  text-align: left;
 }
-.block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: 2px solid transparent;
+.block-editor-url-popover__additional-controls .components-button.has-icon > svg {
+  margin-right: 8px;
 }
 
 .block-editor-url-popover__settings-toggle {
   flex-shrink: 0;
-  border-radius: 0;
-  border-left: 1px solid #ddd;
-  margin-left: 1px;
 }
 .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
   transform: rotate(180deg);
@@ -3144,7 +3134,7 @@ iframe[name=editor-canvas].has-history {
 .block-editor-url-popover__settings {
   display: block;
   padding: 16px;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #1e1e1e;
 }
 
 .block-editor-url-popover__link-editor,
@@ -3153,19 +3143,46 @@ iframe[name=editor-canvas].has-history {
 }
 
 .block-editor-url-popover__link-viewer-url {
-  margin: 7px;
+  display: flex;
+  align-items: center;
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 150px;
-  max-width: 500px;
+  margin-right: 8px;
 }
 .block-editor-url-popover__link-viewer-url.has-invalid-link {
   color: #cc1818;
 }
 
+.block-editor-url-popover__expand-on-click {
+  display: flex;
+  align-items: center;
+  min-width: 350px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.block-editor-url-popover__expand-on-click .fullscreen-icon {
+  padding-right: 4px;
+}
+.block-editor-url-popover__expand-on-click .fullscreen-icon > svg {
+  width: 24px;
+  height: 24px;
+}
+.block-editor-url-popover__expand-on-click .text {
+  flex-grow: 1;
+}
+.block-editor-url-popover__expand-on-click .text p {
+  margin: 0;
+}
+.block-editor-url-popover__expand-on-click .description {
+  color: #949494;
+}
+.block-editor-url-popover__expand-on-click .remove-link {
+  margin-right: 8px;
+}
+
 .html-anchor-control .components-external-link {
   display: block;
   margin-top: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.18.0",
+	"version": "12.18.2",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,7 +38,7 @@
 		"@wordpress/a11y": "^3.50.0",
 		"@wordpress/api-fetch": "^6.47.0",
 		"@wordpress/blob": "^3.50.0",
-		"@wordpress/blocks": "^12.27.0",
+		"@wordpress/blocks": "^12.27.1",
 		"@wordpress/commands": "^0.21.0",
 		"@wordpress/components": "^25.16.0",
 		"@wordpress/compose": "^6.27.0",
@@ -59,7 +59,7 @@
 		"@wordpress/preferences": "^3.27.0",
 		"@wordpress/private-apis": "^0.32.0",
 		"@wordpress/rich-text": "^6.27.0",
-		"@wordpress/style-engine": "^1.33.0",
+		"@wordpress/style-engine": "^1.33.1",
 		"@wordpress/token-list": "^2.50.0",
 		"@wordpress/url": "^3.51.0",
 		"@wordpress/warning": "^2.50.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
+	"gitHead": "fefb6f718fbfd5df9390f366d5733369f613084a"
 }

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

@@ -4,10 +4,10 @@ iframe[name="editor-canvas"] {
 	display: block;
 }
 
-iframe[name="editor-canvas"]:not(.has-history) {
+iframe[name="editor-canvas"]:not(.has-editor-padding) {
 	background-color: $white;
 }
 
-iframe[name="editor-canvas"].has-history {
+iframe[name="editor-canvas"].has-editor-padding {
 	padding: $grid-unit-60 $grid-unit-60 0;
 }

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

@@ -98,6 +98,7 @@ export default function AspectRatioTool( {
 	onChange = () => {},
 	options = DEFAULT_ASPECT_RATIO_OPTIONS,
 	defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
+	hasValue,
 	isShownByDefault = true,
 } ) {
 	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
@@ -105,7 +106,9 @@ export default function AspectRatioTool( {
 
 	return (
 		<ToolsPanelItem
-			hasValue={ () => displayValue !== defaultValue }
+			hasValue={
+				hasValue ? hasValue : () => displayValue !== defaultValue
+			}
 			label={ __( 'Aspect ratio' ) }
 			onDeselect={ () => onChange( undefined ) }
 			isShownByDefault={ isShownByDefault }

package/src/components/global-styles/dimensions-panel.js

@@ -27,6 +27,7 @@ import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import SpacingSizesControl from '../spacing-sizes-control';
 import HeightControl from '../height-control';
 import ChildLayoutControl from '../child-layout-control';
+import AspectRatioTool from '../dimensions-tool/aspect-ratio-tool';
 import { cleanEmptyObject } from '../../hooks/utils';
 import { setImmutably } from '../../utils/object';
 
@@ -39,6 +40,7 @@ export function useHasDimensionsPanel( settings ) {
 	const hasMargin = useHasMargin( settings );
 	const hasGap = useHasGap( settings );
 	const hasMinHeight = useHasMinHeight( settings );
+	const hasAspectRatio = useHasAspectRatio( settings );
 	const hasChildLayout = useHasChildLayout( settings );
 
 	return (
@@ -49,6 +51,7 @@ export function useHasDimensionsPanel( settings ) {
 			hasMargin ||
 			hasGap ||
 			hasMinHeight ||
+			hasAspectRatio ||
 			hasChildLayout )
 	);
 }
@@ -77,6 +80,10 @@ function useHasMinHeight( settings ) {
 	return settings?.dimensions?.minHeight;
 }
 
+function useHasAspectRatio( settings ) {
+	return settings?.dimensions?.aspectRatio;
+}
+
 function useHasChildLayout( settings ) {
 	const {
 		type: parentLayoutType = 'default',
@@ -192,6 +199,7 @@ const DEFAULT_CONTROLS = {
 	margin: true,
 	blockGap: true,
 	minHeight: true,
+	aspectRatio: true,
 	childLayout: true,
 };
 
@@ -346,8 +354,18 @@ export default function DimensionsPanel( {
 	const showMinHeightControl = useHasMinHeight( settings );
 	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
 	const setMinHeightValue = ( newValue ) => {
+		const tempValue = setImmutably(
+			value,
+			[ 'dimensions', 'minHeight' ],
+			newValue
+		);
+		// Apply min-height, while removing any applied aspect ratio.
 		onChange(
-			setImmutably( value, [ 'dimensions', 'minHeight' ], newValue )
+			setImmutably(
+				tempValue,
+				[ 'dimensions', 'aspectRatio' ],
+				undefined
+			)
 		);
 	};
 	const resetMinHeightValue = () => {
@@ -355,6 +373,24 @@ export default function DimensionsPanel( {
 	};
 	const hasMinHeightValue = () => !! value?.dimensions?.minHeight;
 
+	// Aspect Ratio
+	const showAspectRatioControl = useHasAspectRatio( settings );
+	const aspectRatioValue = decodeValue(
+		inheritedValue?.dimensions?.aspectRatio
+	);
+	const setAspectRatioValue = ( newValue ) => {
+		const tempValue = setImmutably(
+			value,
+			[ 'dimensions', 'aspectRatio' ],
+			newValue
+		);
+		// Apply aspect-ratio, while removing any applied min-height.
+		onChange(
+			setImmutably( tempValue, [ 'dimensions', 'minHeight' ], undefined )
+		);
+	};
+	const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;
+
 	// Child Layout
 	const showChildLayoutControl = useHasChildLayout( settings );
 	const childLayout = inheritedValue?.layout;
@@ -397,6 +433,7 @@ export default function DimensionsPanel( {
 			dimensions: {
 				...previousValue?.dimensions,
 				minHeight: undefined,
+				aspectRatio: undefined,
 			},
 		};
 	}, [] );
@@ -617,6 +654,18 @@ export default function DimensionsPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showAspectRatioControl && (
+				<AspectRatioTool
+					hasValue={ hasAspectRatioValue }
+					value={ aspectRatioValue }
+					onChange={ setAspectRatioValue }
+					panelId={ panelId }
+					isShownByDefault={
+						defaultControls.aspectRatio ??
+						DEFAULT_CONTROLS.aspectRatio
+					}
+				/>
+			) }
 			{ showChildLayoutControl && (
 				<VStack
 					as={ ToolsPanelItem }

package/src/components/global-styles/hooks.js

@@ -49,6 +49,7 @@ const VALID_SETTINGS = [
 	'color.palette',
 	'color.text',
 	'custom',
+	'dimensions.aspectRatio',
 	'dimensions.minHeight',
 	'layout.contentSize',
 	'layout.definitions',
@@ -66,7 +67,6 @@ const VALID_SETTINGS = [
 	'spacing.units',
 	'typography.fluid',
 	'typography.customFontSize',
-	'typography.defaultFontSizes',
 	'typography.dropCap',
 	'typography.fontFamilies',
 	'typography.fontSizes',
@@ -239,7 +239,6 @@ export function useSettingsForBlockElement(
 				...updatedSettings.typography,
 				fontSizes: {},
 				customFontSize: false,
-				defaultFontSizes: false,
 			};
 		}
 
@@ -344,12 +343,14 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
-		if ( ! supportedStyles.includes( 'minHeight' ) ) {
-			updatedSettings.dimensions = {
-				...updatedSettings.dimensions,
-				minHeight: false,
-			};
-		}
+		[ 'aspectRatio', 'minHeight' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.dimensions = {
+					...updatedSettings.dimensions,
+					[ key ]: false,
+				};
+			}
+		} );
 
 		[ 'radius', 'color', 'style', 'width' ].forEach( ( key ) => {
 			if (

package/src/components/global-styles/typography-panel.js

@@ -22,7 +22,7 @@ import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import WritingModeControl from '../writing-mode-control';
 import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
-import { setImmutably, uniqByProperty } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -53,10 +53,7 @@ export function useHasTypographyPanel( settings ) {
 
 function useHasFontSizeControl( settings ) {
 	return (
-		( settings?.typography?.defaultFontSizes !== false &&
-			settings?.typography?.fontSizes?.default?.length ) ||
-		settings?.typography?.fontSizes?.theme?.length ||
-		settings?.typography?.fontSizes?.custom?.length ||
+		hasMergedOrigins( settings?.typography?.fontSizes ) ||
 		settings?.typography?.customFontSize
 	);
 }
@@ -103,45 +100,16 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
-/**
- * TODO: The reversing and filtering of default font sizes is a hack so the
- * dropdown UI matches what is generated in the global styles CSS stylesheet.
- *
- * This is a temporary solution until #57733 is resolved. At which point,
- * the mergedFontSizes would just need to be the concatenated array of all
- * presets or a custom dropdown with sections for each.
- *
- * @see {@link https://github.com/WordPress/gutenberg/issues/57733}
- *
- * @param {Object} settings The global styles settings.
- *
- * @return {Array} The merged font sizes.
- */
-function getMergedFontSizes( settings ) {
-	// The font size presets are merged in reverse order so that the duplicates
-	// that may defined later in the array have higher priority to match the CSS.
-	const mergedFontSizesAll = uniqByProperty(
-		[
-			settings?.typography?.fontSizes?.custom,
-			settings?.typography?.fontSizes?.theme,
-			settings?.typography?.fontSizes?.default,
-		].flatMap( ( presets ) => presets?.toReversed() ?? [] ),
-		'slug'
-	).reverse();
-
-	// Default presets exist in the global styles CSS no matter the setting, so
-	// filtering them out in the UI has to be done after merging.
-	const mergedFontSizes =
-		settings?.typography?.defaultFontSizes === false
-			? mergedFontSizesAll.filter(
-					( { slug } ) =>
-						! [ 'small', 'medium', 'large', 'x-large' ].includes(
-							slug
-						)
-			  )
-			: mergedFontSizesAll;
-
-	return mergedFontSizes;
+function getUniqueFontSizesBySlug( settings ) {
+	const fontSizes = settings?.typography?.fontSizes;
+	const mergedFontSizes = fontSizes ? mergeOrigins( fontSizes ) : [];
+	const uniqueSizes = [];
+	for ( const currentSize of mergedFontSizes ) {
+		if ( ! uniqueSizes.some( ( { slug } ) => slug === currentSize.slug ) ) {
+			uniqueSizes.push( currentSize );
+		}
+	}
+	return uniqueSizes;
 }
 
 function TypographyToolsPanel( {
@@ -217,7 +185,7 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const mergedFontSizes = getMergedFontSizes( settings );
+	const mergedFontSizes = getUniqueFontSizesBySlug( settings );
 
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {

package/src/components/global-styles/use-global-styles-output.js

@@ -434,6 +434,12 @@ export function getStylesDeclarations(
 			);
 		}
 
+		// For aspect ratio to work, other dimensions rules (and Cover block defaults) must be unset.
+		// This ensures that a fixed height does not override the aspect ratio.
+		if ( cssProperty === 'aspect-ratio' ) {
+			output.push( 'min-height: unset' );
+		}
+
 		output.push( `${ cssProperty }: ${ ruleValue }` );
 	} );
 

package/src/components/media-replace-flow/style.scss

@@ -27,7 +27,7 @@
 	}
 
 	.block-editor-link-control {
-		width: 300px; // Hardcoded width avoids resizing of control when switching between preview/edit.
+		width: 200px; // Hardcoded width avoids resizing of control when switching between preview/edit.
 
 		.block-editor-url-input {
 			padding: 0; // Cancel unnecessary default 1px padding in this case.

package/src/components/rich-text/index.js

@@ -160,8 +160,7 @@ export function RichTextWrapper(
 				if (
 					blockTypeAttributes?.[ attribute ]?.source ===
 						'rich-text' &&
-					getBlockBindingsSource( args.source.name )
-						?.lockAttributesEditing
+					getBlockBindingsSource( args.source )?.lockAttributesEditing
 				) {
 					shouldDisableEditing = true;
 					break;