@wordpress/block-editor 12.18.0 → 12.18.2

package/src/components/url-popover/image-url-input-ui.js

@@ -6,15 +6,19 @@ import { useRef, useState } from '@wordpress/element';
 import {
 	ToolbarButton,
 	Button,
-	NavigableMenu,
 	MenuItem,
 	ToggleControl,
 	TextControl,
-	SVG,
-	Path,
+	MenuGroup,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { link as linkIcon, close } from '@wordpress/icons';
+import {
+	link as linkIcon,
+	image,
+	page,
+	fullscreen,
+	linkOff,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -27,14 +31,6 @@ const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
 const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
 
-const icon = (
-	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M0,0h24v24H0V0z" fill="none" />
-		<Path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z" />
-		<Path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z" />
-	</SVG>
-);
-
 const ImageURLInputUI = ( {
 	linkDestination,
 	onChangeUrl,
@@ -45,6 +41,9 @@ const ImageURLInputUI = ( {
 	linkTarget,
 	linkClass,
 	rel,
+	showLightboxSetting,
+	lightboxEnabled,
+	onSetLightbox,
 } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 	// Use internal state instead of a ref to make sure that the component
@@ -138,6 +137,7 @@ const ImageURLInputUI = ( {
 				onChangeUrl( {
 					href: urlInput,
 					linkDestination: selectedDestination,
+					lightbox: { enabled: false },
 				} );
 			}
 			stopEditLink();
@@ -157,22 +157,17 @@ const ImageURLInputUI = ( {
 		const linkDestinations = [
 			{
 				linkDestination: LINK_DESTINATION_MEDIA,
-				title: __( 'Media File' ),
+				title: __( 'Link to image file' ),
 				url: mediaType === 'image' ? mediaUrl : undefined,
-				icon,
+				icon: image,
 			},
 		];
 		if ( mediaType === 'image' && mediaLink ) {
 			linkDestinations.push( {
 				linkDestination: LINK_DESTINATION_ATTACHMENT,
-				title: __( 'Attachment Page' ),
+				title: __( 'Link to attachment page' ),
 				url: mediaType === 'image' ? mediaLink : undefined,
-				icon: (
-					<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-						<Path d="M0 0h24v24H0V0z" fill="none" />
-						<Path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z" />
-					</SVG>
-				),
+				icon: page,
 			} );
 		}
 		return linkDestinations;
@@ -225,7 +220,7 @@ const ImageURLInputUI = ( {
 			/>
 			<TextControl
 				__nextHasNoMarginBottom
-				label={ __( 'Link CSS Class' ) }
+				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }
 			/>
@@ -233,6 +228,7 @@ const ImageURLInputUI = ( {
 	);
 
 	const linkEditorValue = urlInput !== null ? urlInput : url;
+	const showLinkEditor = ( ! linkEditorValue && ! lightboxEnabled ) === true;
 
 	const urlLabel = (
 		getLinkDestinations().find(
@@ -245,7 +241,7 @@ const ImageURLInputUI = ( {
 			<ToolbarButton
 				icon={ linkIcon }
 				className="components-toolbar__control"
-				label={ url ? __( 'Edit link' ) : __( 'Insert link' ) }
+				label={ url ? __( 'Edit link' ) : __( 'Add link' ) }
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
 				ref={ setPopoverAnchor }
@@ -256,14 +252,17 @@ const ImageURLInputUI = ( {
 					anchor={ popoverAnchor }
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
-					renderSettings={ () => advancedOptions }
+					renderSettings={
+						! lightboxEnabled ? () => advancedOptions : null
+					}
 					additionalControls={
-						! linkEditorValue && (
-							<NavigableMenu>
+						showLinkEditor && (
+							<MenuGroup>
 								{ getLinkDestinations().map( ( link ) => (
 									<MenuItem
 										key={ link.linkDestination }
 										icon={ link.icon }
+										iconPosition="left"
 										onClick={ () => {
 											setUrlInput( null );
 											onSetHref( link.url );
@@ -273,20 +272,45 @@ const ImageURLInputUI = ( {
 										{ link.title }
 									</MenuItem>
 								) ) }
-							</NavigableMenu>
+								{ showLightboxSetting && (
+									<MenuItem
+										key="expand-on-click"
+										className="block-editor-url-popover__expand-on-click"
+										icon={ fullscreen }
+										info={ __(
+											'Scale the image with a lightbox effect.'
+										) }
+										iconPosition="left"
+										onClick={ () => {
+											setUrlInput( null );
+											onChangeUrl( {
+												linkDestination:
+													LINK_DESTINATION_NONE,
+												href: '',
+											} );
+											onSetLightbox( true );
+											stopEditLink();
+										} }
+									>
+										{ __( 'Expand on click' ) }
+									</MenuItem>
+								) }
+							</MenuGroup>
 						)
 					}
 				>
-					{ ( ! url || isEditingLink ) && (
-						<URLPopover.LinkEditor
-							className="block-editor-format-toolbar__link-container-content"
-							value={ linkEditorValue }
-							onChangeInputValue={ setUrlInput }
-							onSubmit={ onSubmitLinkChange() }
-							autocompleteRef={ autocompleteRef }
-						/>
+					{ ( ! url || isEditingLink ) && ! lightboxEnabled && (
+						<>
+							<URLPopover.LinkEditor
+								className="block-editor-format-toolbar__link-container-content"
+								value={ linkEditorValue }
+								onChangeInputValue={ setUrlInput }
+								onSubmit={ onSubmitLinkChange() }
+								autocompleteRef={ autocompleteRef }
+							/>
+						</>
 					) }
-					{ url && ! isEditingLink && (
+					{ url && ! isEditingLink && ! lightboxEnabled && (
 						<>
 							<URLPopover.LinkViewer
 								className="block-editor-format-toolbar__link-container-content"
@@ -295,12 +319,37 @@ const ImageURLInputUI = ( {
 								urlLabel={ urlLabel }
 							/>
 							<Button
-								icon={ close }
+								icon={ linkOff }
 								label={ __( 'Remove link' ) }
 								onClick={ onLinkRemove }
+								size="compact"
 							/>
 						</>
 					) }
+					{ ! url && ! isEditingLink && lightboxEnabled && (
+						<div className="block-editor-url-popover__expand-on-click">
+							<div className="fullscreen-icon">
+								{ fullscreen }
+							</div>
+							<div className="text">
+								<p>{ __( 'Expand on click' ) }</p>
+								<p className="description">
+									{ __(
+										'Scales the image with a lightbox effect'
+									) }
+								</p>
+							</div>
+							<Button
+								icon={ linkOff }
+								className="remove-link"
+								label={ __( 'Disable expand on click' ) }
+								onClick={ () => {
+									onSetLightbox( false );
+								} }
+								size="compact"
+							/>
+						</div>
+					) }
 				</URLPopover>
 			) }
 		</>

package/src/components/url-popover/index.js

@@ -70,6 +70,7 @@ function URLPopover( {
 			focusOnMount={ focusOnMount }
 			placement={ computedPlacement }
 			shift
+			variant="toolbar"
 			{ ...popoverProps }
 		>
 			<div className="block-editor-url-popover__input-container">
@@ -82,6 +83,7 @@ function URLPopover( {
 							label={ __( 'Link settings' ) }
 							onClick={ toggleSettingsVisibility }
 							aria-expanded={ isSettingsExpanded }
+							size="compact"
 						/>
 					) }
 				</div>

package/src/components/url-popover/link-editor.js

@@ -40,6 +40,7 @@ export default function LinkEditor( {
 				icon={ keyboardReturn }
 				label={ __( 'Apply' ) }
 				type="submit"
+				size="compact"
 			/>
 		</form>
 	);

package/src/components/url-popover/link-viewer.js

@@ -41,6 +41,7 @@ export default function LinkViewer( {
 					icon={ edit }
 					label={ __( 'Edit' ) }
 					onClick={ onEditLinkClick }
+					size="compact"
 				/>
 			) }
 		</div>

package/src/components/url-popover/style.scss

@@ -1,53 +1,39 @@
 .block-editor-url-popover__additional-controls {
-	border-top: $border-width solid $gray-300;
+	border-top: $border-width solid $gray-900;
+	padding: $grid-unit-10 $grid-unit-10;
 }
 
-.block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg {
-	box-shadow: none;
-}
-
-.block-editor-url-popover__additional-controls div[role="menu"] > .components-button {
-	padding-left: $grid-unit-15;
+.block-editor-url-popover__input-container {
+	padding: $grid-unit-10;
+	padding-left: $grid-unit-20;
 }
 
 .block-editor-url-popover__row {
 	display: flex;
+	gap: $grid-unit-05;
 }
 
 // Any children of the popover-row that are not the settings-toggle
 // should take up as much space as possible.
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
 	flex-grow: 1;
+	gap: $grid-unit-05;
 }
 
-// Mimic toolbar component styles for the icons in this popover.
-.block-editor-url-popover .components-button.has-icon {
-	padding: 3px;
+.block-editor-url-popover__additional-controls .components-button.has-icon {
+	padding-left: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	height: auto;
+	text-align: left;
 
 	> svg {
-		padding: 5px;
-		border-radius: $radius-block-ui;
-		height: 30px;
-		width: 30px;
-	}
-
-	&:not(:disabled):focus {
-		box-shadow: none;
-
-		> svg {
-			@include block-toolbar-button-style__focus();
-		}
+		margin-right: $grid-unit-10;
 	}
 }
 
 .block-editor-url-popover__settings-toggle {
 	flex-shrink: 0;
 
-	// Add a left divider to the toggle button.
-	border-radius: 0;
-	border-left: $border-width solid $gray-300;
-	margin-left: 1px;
-
 	&[aria-expanded="true"] .dashicon {
 		transform: rotate(180deg);
 	}
@@ -56,7 +42,7 @@
 .block-editor-url-popover__settings {
 	display: block;
 	padding: $grid-unit-20;
-	border-top: $border-width solid $gray-300;
+	border-top: $border-width solid $gray-900;
 }
 
 .block-editor-url-popover__link-editor,
@@ -65,16 +51,50 @@
 }
 
 .block-editor-url-popover__link-viewer-url {
-	margin: $grid-unit-10 - $border-width;
+	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: $grid-unit-10;
 
 	&.has-invalid-link {
 		color: $alert-red;
 	}
 }
+
+.block-editor-url-popover__expand-on-click {
+	display: flex;
+	align-items: center;
+	min-width: $modal-min-width;
+	overflow: hidden;
+	white-space: nowrap;
+
+	.fullscreen-icon {
+		padding-right: $grid-unit-05;
+
+		> svg {
+			width: $icon-size;
+			height: $icon-size;
+		}
+	}
+
+	.text {
+		flex-grow: 1;
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.description {
+		color: $gray-600;
+	}
+
+	.remove-link {
+		margin-right: $grid-unit-10;
+	}
+
+}

package/src/hooks/dimensions.js

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import { Platform, useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
@@ -18,8 +23,7 @@ import { MarginVisualizer } from './margin';
 import { PaddingVisualizer } from './padding';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
-
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -125,6 +129,73 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 	);
 }
 
+/**
+ * Determine whether there is block support for dimensions.
+ *
+ * @param {string} blockName Block name.
+ * @param {string} feature   Background image feature to check for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasDimensionsSupport( blockName, feature = 'any' ) {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const support = getBlockSupport( blockName, DIMENSIONS_SUPPORT_KEY );
+
+	if ( support === true ) {
+		return true;
+	}
+
+	if ( feature === 'any' ) {
+		return !! ( support?.aspectRatio || !! support?.minHeight );
+	}
+
+	return !! support?.[ feature ];
+}
+
+export default {
+	useBlockProps,
+	attributeKeys: [ 'minHeight', 'style' ],
+	hasSupport( name ) {
+		return hasDimensionsSupport( name, 'aspectRatio' );
+	},
+};
+
+function useBlockProps( { name, minHeight, style } ) {
+	if (
+		! hasDimensionsSupport( name, 'aspectRatio' ) ||
+		shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' )
+	) {
+		return {};
+	}
+
+	const className = classnames( {
+		'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
+	} );
+
+	// Allow dimensions-based inline style overrides to override any global styles rules that
+	// might be set for the block, and therefore affect the display of the aspect ratio.
+	const inlineStyleOverrides = {};
+
+	// Apply rules to unset incompatible styles.
+	// Note that a set `aspectRatio` will win out if both an aspect ratio and a minHeight are set.
+	// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
+	// that is set should be intentional and should override any existing minHeight. The Cover block
+	// and dimensions controls have logic that will manually clear the aspect ratio if a minHeight
+	// is set.
+	if ( style?.dimensions?.aspectRatio ) {
+		// To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
+		inlineStyleOverrides.minHeight = 'unset';
+	} else if ( minHeight || style?.dimensions?.minHeight ) {
+		// To ensure the minHeight does not get overridden by `aspectRatio` unset any existing rule.
+		inlineStyleOverrides.aspectRatio = 'unset';
+	}
+
+	return { className, style: inlineStyleOverrides };
+}
+
 /**
  * @deprecated
  */

package/src/hooks/index.js

@@ -16,6 +16,7 @@ import './generated-class-name';
 import style from './style';
 import './settings';
 import color from './color';
+import dimensions from './dimensions';
 import duotone from './duotone';
 import fontFamily from './font-family';
 import fontSize from './font-size';
@@ -47,6 +48,7 @@ createBlockListBlockFilter( [
 	align,
 	style,
 	color,
+	dimensions,
 	duotone,
 	fontFamily,
 	fontSize,
@@ -69,7 +71,7 @@ createBlockSaveFilter( [
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
-export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props';
+export { getShadowClassesAndStyles } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';

package/src/hooks/index.native.js

@@ -28,7 +28,7 @@ createBlockSaveFilter( [
 ] );
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
-export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props';
+export { getShadowClassesAndStyles } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';

package/src/hooks/style.js

@@ -133,10 +133,14 @@ const skipSerializationPathsEdit = {
  */
 const skipSerializationPathsSave = {
 	...skipSerializationPathsEdit,
+	[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: [
+		`${ DIMENSIONS_SUPPORT_KEY }.aspectRatio`,
+	], // Skip serialization of aspect ratio in save mode.
 	[ `${ BACKGROUND_SUPPORT_KEY }` ]: [ BACKGROUND_SUPPORT_KEY ], // Skip serialization of background support in save mode.
 };
 
 const skipSerializationPathsSaveChecks = {
+	[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: true,
 	[ `${ BACKGROUND_SUPPORT_KEY }` ]: true,
 };
 

package/src/hooks/use-bindings-attributes.js

@@ -44,7 +44,7 @@ const createEditFunctionWithBindingsAttribute = () =>
 				Object.entries( updatedAttributes.metadata.bindings ).forEach(
 					( [ attributeName, settings ] ) => {
 						const source = getBlockBindingsSource(
-							settings.source.name
+							settings.source
 						);
 
 						if ( source ) {
@@ -52,10 +52,7 @@ const createEditFunctionWithBindingsAttribute = () =>
 							const {
 								placeholder,
 								useValue: [ metaValue = null ] = [],
-							} = source.useSource(
-								props,
-								settings.source.attributes
-							);
+							} = source.useSource( props, settings.args );
 
 							if ( placeholder && ! metaValue ) {
 								// If the attribute is `src` or `href`, a placeholder can't be used because it is not a valid url.

package/src/hooks/use-shadow-props.js

@@ -18,20 +18,6 @@ export function getShadowClassesAndStyles( attributes ) {
 	const shadow = attributes.style?.shadow || '';
 
 	return {
-		className: undefined,
 		style: getInlineStyles( { shadow } ),
 	};
 }
-
-/**
- * Derives the shadow related props for a block from its shadow block support
- * attributes.
- *
- * @param {Object} attributes Block attributes.
- *
- * @return {Object} ClassName & style props from shadow block support.
- */
-export function useShadowProps( attributes ) {
-	const shadowProps = getShadowClassesAndStyles( attributes );
-	return shadowProps;
-}

package/src/hooks/utils.js

@@ -177,10 +177,7 @@ export function useBlockSettings( name, parentLayout ) {
 		backgroundImage,
 		backgroundSize,
 		fontFamilies,
-		userFontSizes,
-		themeFontSizes,
-		defaultFontSizes,
-		defaultFontSizesEnabled,
+		fontSizes,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -195,6 +192,7 @@ export function useBlockSettings( name, parentLayout ) {
 		blockGap,
 		spacingSizes,
 		units,
+		aspectRatio,
 		minHeight,
 		layout,
 		borderColor,
@@ -226,10 +224,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'background.backgroundImage',
 		'background.backgroundSize',
 		'typography.fontFamilies',
-		'typography.fontSizes.custom',
-		'typography.fontSizes.theme',
-		'typography.fontSizes.default',
-		'typography.defaultFontSizes',
+		'typography.fontSizes',
 		'typography.customFontSize',
 		'typography.fontStyle',
 		'typography.fontWeight',
@@ -244,6 +239,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'spacing.blockGap',
 		'spacing.spacingSizes',
 		'spacing.units',
+		'dimensions.aspectRatio',
 		'dimensions.minHeight',
 		'layout',
 		'border.color',
@@ -312,12 +308,9 @@ export function useBlockSettings( name, parentLayout ) {
 					custom: fontFamilies,
 				},
 				fontSizes: {
-					custom: userFontSizes,
-					theme: themeFontSizes,
-					default: defaultFontSizes,
+					custom: fontSizes,
 				},
 				customFontSize,
-				defaultFontSizes: defaultFontSizesEnabled,
 				fontStyle,
 				fontWeight,
 				lineHeight,
@@ -343,6 +336,7 @@ export function useBlockSettings( name, parentLayout ) {
 				width: borderWidth,
 			},
 			dimensions: {
+				aspectRatio,
 				minHeight,
 			},
 			layout,
@@ -353,10 +347,7 @@ export function useBlockSettings( name, parentLayout ) {
 		backgroundImage,
 		backgroundSize,
 		fontFamilies,
-		userFontSizes,
-		themeFontSizes,
-		defaultFontSizes,
-		defaultFontSizesEnabled,
+		fontSizes,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -371,6 +362,7 @@ export function useBlockSettings( name, parentLayout ) {
 		blockGap,
 		spacingSizes,
 		units,
+		aspectRatio,
 		minHeight,
 		layout,
 		parentLayout,

package/src/index.js

@@ -12,7 +12,6 @@ export {
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
-	useShadowProps as __experimentalUseShadowProps,
 	useCachedTruthy,
 } from './hooks';
 export * from './components';

package/src/utils/object.js

@@ -49,19 +49,3 @@ export const getValueFromObjectPath = ( object, path, defaultValue ) => {
 	} );
 	return value ?? defaultValue;
 };
-
-/**
- * Helper util to filter out objects with duplicate values for a given property.
- *
- * @param {Object[]} array    Array of objects to filter.
- * @param {string}   property Property to filter unique values by.
- *
- * @return {Object[]} Array of objects with unique values for the specified property.
- */
-export function uniqByProperty( array, property ) {
-	const seen = new Set();
-	return array.filter( ( item ) => {
-		const value = item[ property ];
-		return seen.has( value ) ? false : seen.add( value );
-	} );
-}