@wordpress/block-library 9.36.2-next.8fd3f8831.0 → 9.37.2-next.06ee73755.0

package/src/image/image.js

@@ -4,6 +4,7 @@
 import { isBlobURL } from '@wordpress/blob';
 import {
 	ExternalLink,
+	FocalPointPicker,
 	ResizableBox,
 	Spinner,
 	TextareaControl,
@@ -53,6 +54,7 @@ import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
 import { isExternalImage } from './edit';
 import { Caption } from '../utils/caption';
+import { MediaControl } from '../utils/media-control';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import {
 	MIN_SIZE,
@@ -60,7 +62,7 @@ import {
 	SIZED_LAYOUTS,
 	DEFAULT_MEDIA_SIZE_SLUG,
 } from './constants';
-import { evalAspectRatio } from './utils';
+import { evalAspectRatio, mediaPosition } from './utils';
 
 const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -278,6 +280,7 @@ export default function Image( {
 		height,
 		aspectRatio,
 		scale,
+		focalPoint,
 		linkTarget,
 		sizeSlug,
 		lightbox,
@@ -467,6 +470,15 @@ export default function Image( {
 		setAttributes( { alt: newAlt } );
 	}
 
+	const imperativeFocalPointPreview = ( value ) => {
+		if ( imageElement ) {
+			imageElement.style.setProperty(
+				'object-position',
+				mediaPosition( value )
+			);
+		}
+	};
+
 	function updateImage( newSizeSlug ) {
 		const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url;
 		if ( ! newUrl ) {
@@ -549,6 +561,7 @@ export default function Image( {
 		isResizable &&
 		( SIZED_LAYOUTS.includes( parentLayoutType ) ? (
 			<DimensionsTool
+				panelId={ clientId }
 				value={ { aspectRatio } }
 				onChange={ ( { aspectRatio: newAspectRatio } ) => {
 					setAttributes( {
@@ -561,6 +574,7 @@ export default function Image( {
 			/>
 		) : (
 			<DimensionsTool
+				panelId={ clientId }
 				value={ { width, height, scale, aspectRatio } }
 				onChange={ ( {
 					width: newWidth,
@@ -589,30 +603,13 @@ export default function Image( {
 			/>
 		) );
 
-	const resetAll = () => {
+	const resetSettings = () => {
 		setAttributes( {
-			alt: undefined,
-			width: undefined,
-			height: undefined,
-			scale: undefined,
-			aspectRatio: undefined,
 			lightbox: undefined,
 		} );
 		updateImage( DEFAULT_MEDIA_SIZE_SLUG );
 	};
 
-	const sizeControls = (
-		<InspectorControls>
-			<ToolsPanel
-				label={ __( 'Settings' ) }
-				resetAll={ resetAll }
-				dropdownMenuProps={ dropdownMenuProps }
-			>
-				{ dimensionsControl }
-			</ToolsPanel>
-		</InspectorControls>
-	);
-
 	const arePatternOverridesEnabled =
 		metadata?.bindings?.__default?.source === 'core/pattern-overrides';
 
@@ -721,10 +718,14 @@ export default function Image( {
 					onError={ onUploadError }
 					name={ ! url ? __( 'Add image' ) : __( 'Replace' ) }
 					onReset={ () => onSelectImage( undefined ) }
+					variant="toolbar"
 				/>
 			</BlockControls>
 		);
 
+	const hasDataFormBlockFields =
+		window?.__experimentalContentOnlyInspectorFields;
+
 	const controls = (
 		<>
 			{ showBlockControls && (
@@ -787,64 +788,139 @@ export default function Image( {
 					/>
 				</BlockControls>
 			) }
-			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ resetAll }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					{ isSingleSelected && (
-						<ToolsPanelItem
-							label={ __( 'Alternative text' ) }
-							isShownByDefault
-							hasValue={ () => !! alt }
-							onDeselect={ () =>
-								setAttributes( { alt: undefined } )
-							}
-						>
-							<TextareaControl
+			{ ! hasDataFormBlockFields && (
+				<InspectorControls group="content">
+					<ToolsPanel
+						label={ __( 'Media' ) }
+						resetAll={ () => onSelectImage( undefined ) }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						{ isSingleSelected && ! lockUrlControls && (
+							<ToolsPanelItem
+								label={ __( 'Image' ) }
+								hasValue={ () => !! url }
+								onDeselect={ () => onSelectImage( undefined ) }
+								isShownByDefault
+							>
+								<MediaControl
+									mediaId={ id }
+									mediaUrl={ url }
+									alt={ alt }
+									filename={
+										image?.media_details?.sizes?.full
+											?.file ||
+										image?.slug ||
+										getFilename( url )
+									}
+									allowedTypes={ ALLOWED_MEDIA_TYPES }
+									onSelect={ onSelectImage }
+									onSelectURL={ onSelectURL }
+									onError={ onUploadError }
+									onReset={ () => onSelectImage( undefined ) }
+									isUploading={ !! temporaryURL }
+									emptyLabel={ __( 'Add image' ) }
+								/>
+							</ToolsPanelItem>
+						) }
+						{ isSingleSelected && (
+							<ToolsPanelItem
 								label={ __( 'Alternative text' ) }
-								value={ alt || '' }
-								onChange={ updateAlt }
-								readOnly={ lockAltControls }
-								help={
-									lockAltControls ? (
-										<>{ lockAltControlsMessage }</>
-									) : (
-										<>
-											<ExternalLink
-												href={
-													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
-													__(
-														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
-													)
-												}
-											>
+								isShownByDefault
+								hasValue={ () => !! alt }
+								onDeselect={ () =>
+									setAttributes( { alt: undefined } )
+								}
+							>
+								<TextareaControl
+									label={ __( 'Alternative text' ) }
+									value={ alt || '' }
+									onChange={ updateAlt }
+									readOnly={ lockAltControls }
+									help={
+										lockAltControls ? (
+											<>{ lockAltControlsMessage }</>
+										) : (
+											<>
+												<ExternalLink
+													href={
+														// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+														__(
+															'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+														)
+													}
+												>
+													{ __(
+														'Describe the purpose of the image.'
+													) }
+												</ExternalLink>
+												<br />
 												{ __(
-													'Describe the purpose of the image.'
+													'Leave empty if decorative.'
 												) }
-											</ExternalLink>
-											<br />
-											{ __(
-												'Leave empty if decorative.'
-											) }
-										</>
-									)
-								}
-							/>
-						</ToolsPanelItem>
-					) }
-					{ dimensionsControl }
-					{ !! imageSizeOptions.length && (
+											</>
+										)
+									}
+								/>
+							</ToolsPanelItem>
+						) }
+					</ToolsPanel>
+				</InspectorControls>
+			) }
+			<InspectorControls
+				group="dimensions"
+				resetAllFilter={ ( attrs ) => ( {
+					...attrs,
+					aspectRatio: undefined,
+					width: undefined,
+					height: undefined,
+					scale: undefined,
+					focalPoint: undefined,
+				} ) }
+			>
+				{ dimensionsControl }
+				{ url && scale && (
+					<ToolsPanelItem
+						label={ __( 'Focal point' ) }
+						isShownByDefault
+						hasValue={ () => !! focalPoint }
+						onDeselect={ () =>
+							setAttributes( {
+								focalPoint: undefined,
+							} )
+						}
+						panelId={ clientId }
+					>
+						<FocalPointPicker
+							label={ __( 'Focal point' ) }
+							url={ url }
+							value={ focalPoint }
+							onDragStart={ imperativeFocalPointPreview }
+							onDrag={ imperativeFocalPointPreview }
+							onChange={ ( newFocalPoint ) =>
+								setAttributes( {
+									focalPoint: newFocalPoint,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				) }
+			</InspectorControls>
+			{ !! imageSizeOptions.length && (
+				<InspectorControls>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ resetSettings }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						<ResolutionTool
 							value={ sizeSlug }
 							defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
 							onChange={ updateImage }
 							options={ imageSizeOptions }
 						/>
-					) }
-				</ToolsPanel>
-			</InspectorControls>
+					</ToolsPanel>
+				</InspectorControls>
+			) }
 			<InspectorControls group="advanced">
 				<TextControl
 					__next40pxDefaultSize
@@ -926,6 +1002,10 @@ export default function Image( {
 							  }
 							: { width, height } ),
 						objectFit: scale,
+						objectPosition:
+							focalPoint && scale
+								? mediaPosition( focalPoint )
+								: undefined,
 						...borderProps.style,
 						...shadowProps.style,
 					} }
@@ -1086,8 +1166,7 @@ export default function Image( {
 		return (
 			<>
 				{ mediaReplaceFlow }
-				{ /* Add all controls if the image attributes are connected. */ }
-				{ metadata?.bindings ? controls : sizeControls }
+				{ controls }
 			</>
 		);
 	}

package/src/image/index.js

@@ -106,7 +106,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 		},
 	];
 	settings[ formKey ] = {
-		fields: [ 'image' ],
+		fields: [ 'image', 'link', 'caption', 'alt' ],
 	};
 }
 

package/src/image/index.php

@@ -94,7 +94,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 		$figcaption_span = $processor->block_core_image_extract_empty_figcaption_element();
 	}
 
-	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
+	$link_destination  = $attributes['linkDestination'] ?? 'none';
 	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
 
 	/*

package/src/image/save.js

@@ -14,6 +14,11 @@ import {
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { mediaPosition } from './utils';
+
 export default function save( { attributes } ) {
 	const {
 		url,
@@ -27,6 +32,7 @@ export default function save( { attributes } ) {
 		height,
 		aspectRatio,
 		scale,
+		focalPoint,
 		id,
 		linkTarget,
 		sizeSlug,
@@ -64,6 +70,10 @@ export default function save( { attributes } ) {
 				...shadowProps.style,
 				aspectRatio,
 				objectFit: scale,
+				objectPosition:
+					focalPoint && scale
+						? mediaPosition( focalPoint )
+						: undefined,
 				width,
 				height,
 			} }

package/src/image/utils.js

@@ -93,3 +93,7 @@ export function isValidFileType( file ) {
 		( mediaType ) => file.type.indexOf( mediaType ) === 0
 	);
 }
+
+export function mediaPosition( { x, y } = { x: 0.5, y: 0.5 } ) {
+	return `${ Math.round( x * 100 ) }% ${ Math.round( y * 100 ) }%`;
+}

package/src/index.js

@@ -9,11 +9,17 @@ import {
 	registerBlockType,
 	store as blocksStore,
 } from '@wordpress/blocks';
+import { useDisabled } from '@wordpress/compose';
 import { select } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 import { useServerSideRender } from '@wordpress/server-side-render';
 import { __, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import HtmlRenderer from './utils/html-renderer';
+
 /**
  * Internal dependencies
  */
@@ -350,8 +356,10 @@ export const registerCoreBlocks = (
 				...( ( bootstrappedBlockType?.apiVersion ?? 0 ) < 3 && {
 					apiVersion: 3,
 				} ),
+				// Inspector controls are rendered by the auto-register hook in block-editor
 				edit: function Edit( { attributes } ) {
-					const blockProps = useBlockProps();
+					const disabledRef = useDisabled();
+					const blockProps = useBlockProps( { ref: disabledRef } );
 					const { content, status, error } = useServerSideRender( {
 						block: blockName,
 						attributes,
@@ -376,11 +384,9 @@ export const registerCoreBlocks = (
 					}
 
 					return (
-						<div
-							{ ...blockProps }
-							dangerouslySetInnerHTML={ {
-								__html: content || '',
-							} }
+						<HtmlRenderer
+							wrapperProps={ blockProps }
+							html={ content }
 						/>
 					);
 				},

package/src/latest-comments/block.json

@@ -29,6 +29,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"align": true,
 		"color": {
 			"gradients": true,
@@ -61,6 +62,5 @@
 			"clientNavigation": true
 		}
 	},
-	"editorStyle": "wp-block-latest-comments-editor",
 	"style": "wp-block-latest-comments"
 }

package/src/latest-comments/edit.js

@@ -3,20 +3,22 @@
  */
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
-	Disabled,
 	RangeControl,
 	SelectControl,
+	Spinner,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import ServerSideRender from '@wordpress/server-side-render';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
+import { useServerSideRender } from '@wordpress/server-side-render';
+import { useDisabled } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import HtmlRenderer from '../utils/html-renderer';
 
 /**
  * Minimum number of comments a user can show using this block.
@@ -31,22 +33,29 @@ const MIN_COMMENTS = 1;
  */
 const MAX_COMMENTS = 100;
 
-export default function LatestComments( { attributes, setAttributes } ) {
+export default function LatestComments( { attributes, setAttributes, name } ) {
 	const { commentsToShow, displayAvatar, displayDate, displayContent } =
 		attributes;
 
-	const serverSideAttributes = {
-		...attributes,
-		style: {
-			...attributes?.style,
-			spacing: undefined,
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const { content, status, error } = useServerSideRender( {
+		attributes,
+		skipBlockSupportAttributes: true,
+		block: name,
+		urlQueryArgs: {
+			// The preview uses the site's locale to make it more true to how
+			// the block appears on the frontend. Setting the locale
+			// explicitly prevents any middleware from setting it to 'user'.
+			_locale: 'site',
 		},
-	};
+	} );
 
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const disabledRef = useDisabled();
+	const blockProps = useBlockProps( { ref: disabledRef } );
 
 	return (
-		<div { ...useBlockProps() }>
+		<>
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }
@@ -143,16 +152,25 @@ export default function LatestComments( { attributes, setAttributes } ) {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
-			<Disabled>
-				<ServerSideRender
-					block="core/latest-comments"
-					attributes={ serverSideAttributes }
-					// The preview uses the site's locale to make it more true to how
-					// the block appears on the frontend. Setting the locale
-					// explicitly prevents any middleware from setting it to 'user'.
-					urlQueryArgs={ { _locale: 'site' } }
-				/>
-			</Disabled>
-		</div>
+			{ status === 'loading' && (
+				<div { ...blockProps }>
+					<Spinner />
+				</div>
+			) }
+			{ status === 'error' && (
+				<div { ...blockProps }>
+					<p>
+						{ sprintf(
+							/* translators: %s: error message returned when rendering the block. */
+							__( 'Error: %s' ),
+							error
+						) }
+					</p>
+				</div>
+			) }
+			{ status === 'success' && (
+				<HtmlRenderer wrapperProps={ blockProps } html={ content } />
+			) }
+		</>
 	);
 }

package/src/latest-comments/index.php

@@ -47,7 +47,7 @@ function render_block_core_latest_comments( $attributes ) {
 	if ( isset( $attributes['displayExcerpt'] ) ) {
 		$display_content = $attributes['displayExcerpt'] ? 'excerpt' : 'none';
 	} else {
-		$display_content = isset( $attributes['displayContent'] ) ? $attributes['displayContent'] : 'excerpt';
+		$display_content = $attributes['displayContent'] ?? 'excerpt';
 	}
 
 	$comments = get_comments(

package/src/latest-posts/block.json

@@ -83,6 +83,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"align": true,
 		"html": false,
 		"color": {

package/src/loginout/block.json

@@ -21,6 +21,7 @@
 		"viewportWidth": 350
 	},
 	"supports": {
+		"anchor": true,
 		"className": true,
 		"color": {
 			"background": true,

package/src/math/block.json

@@ -8,6 +8,7 @@
 	"keywords": [ "equation", "formula", "latex", "mathematics" ],
 	"textdomain": "default",
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"__experimentalBorder": {
 			"color": true,

package/src/media-text/index.js

@@ -83,7 +83,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 		},
 	];
 	settings[ formKey ] = {
-		fields: [ 'media' ],
+		fields: [ 'media', 'link' ],
 	};
 }
 

package/src/media-text/index.php

@@ -77,7 +77,7 @@ function render_block_core_media_text( $attributes, $content ) {
 
 	// Add the image tag inside the figure tag, and update the image attributes
 	// in order to display the featured image.
-	$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
+	$media_size_slug = $attributes['mediaSizeSlug'] ?? 'full';
 	$image_tag       = '<img class="wp-block-media-text__featured_image">';
 	$content         = preg_replace(
 		'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',

package/src/navigation/block.json

@@ -106,6 +106,7 @@
 		"maxNestingLevel": "maxNestingLevel"
 	},
 	"supports": {
+		"anchor": true,
 		"align": [ "wide", "full" ],
 		"ariaLabel": true,
 		"contentRole": true,

package/src/navigation/constants.js

@@ -27,3 +27,12 @@ export const SELECT_NAVIGATION_MENUS_ARGS = [
 	'wp_navigation',
 	PRELOADED_NAVIGATION_MENUS_QUERY,
 ];
+
+/**
+ * Template part area identifier for navigation overlays.
+ * This constant defines the area name used when registering and filtering
+ * template parts that are specifically designed for navigation overlay layouts.
+ *
+ * @type {string}
+ */
+export const NAVIGATION_OVERLAY_TEMPLATE_PART_AREA = 'navigation-overlay';

package/src/navigation/edit/index.js

@@ -254,7 +254,6 @@ function Navigation( {
 
 	// These props are used by the navigation editor to override specific
 	// navigation block settings.
-	hasSubmenuIndicatorSetting = true,
 	customPlaceholder: CustomPlaceholder = null,
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
@@ -655,7 +654,7 @@ function Navigation( {
 	const stylingInspectorControls = (
 		<>
 			<InspectorControls>
-				{ hasSubmenuIndicatorSetting && (
+				{ ( ! isOverlayExperimentEnabled || hasSubmenus ) && (
 					<ToolsPanel
 						label={ __( 'Display' ) }
 						resetAll={ () => {

package/src/navigation/edit/overlay-template-part-selector.js

@@ -21,6 +21,7 @@ import { plus } from '@wordpress/icons';
  */
 import { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';
 import useCreateOverlayTemplatePart from './use-create-overlay';
+import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';
 
 /**
  * Overlay Template Part Selector component.
@@ -55,7 +56,8 @@ export default function OverlayTemplatePartSelector( {
 			return [];
 		}
 		return templateParts.filter(
-			( templatePart ) => templatePart.area === 'overlay'
+			( templatePart ) =>
+				templatePart.area === NAVIGATION_OVERLAY_TEMPLATE_PART_AREA
 		);
 	}, [ templateParts ] );