@wordpress/block-library 8.26.0 → 8.27.1

package/src/heading/edit.js

@@ -17,6 +17,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	HeadingLevelDropdown,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 
 /**
@@ -40,6 +41,7 @@ function HeadingEdit( {
 		} ),
 		style,
 	} );
+	const blockEditingMode = useBlockEditingMode();
 
 	const { canGenerateAnchors } = useSelect( ( select ) => {
 		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
@@ -90,20 +92,22 @@ function HeadingEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					value={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ blockEditingMode === 'default' && (
+				<BlockControls group="block">
+					<HeadingLevelDropdown
+						value={ level }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<RichText
 				identifier="content"
 				tagName={ tagName }

package/src/heading/edit.native.js

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, Platform } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+	store as blockEditorStore,
+	HeadingLevelDropdown,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { generateAnchor, setAnchor } from './autogenerate-anchors';
+
+function HeadingEdit( {
+	attributes,
+	setAttributes,
+	mergeBlocks,
+	onReplace,
+	style,
+	clientId,
+} ) {
+	const { textAlign, content, level, placeholder, anchor } = attributes;
+	const tagName = 'h' + level;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+		style,
+	} );
+
+	const { canGenerateAnchors } = useSelect( ( select ) => {
+		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+
+		return {
+			canGenerateAnchors:
+				!! settings.generateAnchors ||
+				getGlobalBlockCount( 'core/table-of-contents' ) > 0,
+		};
+	}, [] );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	// Initially set anchor for headings that have content but no anchor set.
+	// This is used when transforming a block to heading, or for legacy anchors.
+	useEffect( () => {
+		if ( ! canGenerateAnchors ) {
+			return;
+		}
+
+		if ( ! anchor && content ) {
+			// This side-effect should not create an undo level.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				anchor: generateAnchor( clientId, content ),
+			} );
+		}
+		setAnchor( clientId, anchor );
+
+		// Remove anchor map when block unmounts.
+		return () => setAnchor( clientId, null );
+	}, [ anchor, content, clientId, canGenerateAnchors ] );
+
+	const onContentChange = ( value ) => {
+		const newAttrs = { content: value };
+		if (
+			canGenerateAnchors &&
+			( ! anchor ||
+				! value ||
+				generateAnchor( clientId, content ) === anchor )
+		) {
+			newAttrs.anchor = generateAnchor( clientId, value );
+		}
+		setAttributes( newAttrs );
+	};
+
+	return (
+		<>
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					value={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<RichText
+				identifier="content"
+				tagName={ tagName }
+				value={ content }
+				onChange={ onContentChange }
+				onMerge={ mergeBlocks }
+				onSplit={ ( value, isOriginal ) => {
+					let block;
+
+					if ( isOriginal || value ) {
+						block = createBlock( 'core/heading', {
+							...attributes,
+							content: value,
+						} );
+					} else {
+						block = createBlock(
+							getDefaultBlockName() ?? 'core/heading'
+						);
+					}
+
+					if ( isOriginal ) {
+						block.clientId = clientId;
+					}
+
+					return block;
+				} }
+				onReplace={ onReplace }
+				onRemove={ () => onReplace( [] ) }
+				placeholder={ placeholder || __( 'Heading' ) }
+				textAlign={ textAlign }
+				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
+				{ ...blockProps }
+			/>
+		</>
+	);
+}
+
+export default HeadingEdit;

package/src/image/block.json

@@ -4,7 +4,12 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight" ],
+	"usesContext": [
+		"allowResize",
+		"imageCrop",
+		"fixedHeight",
+		"pattern/overrides"
+	],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",
@@ -129,6 +134,5 @@
 		{ "name": "rounded", "label": "Rounded" }
 	],
 	"editorStyle": "wp-block-image-editor",
-	"style": "wp-block-image",
-	"viewScript": "file:./view.min.js"
+	"style": "wp-block-image"
 }

package/src/image/edit.js

@@ -19,7 +19,7 @@ import {
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { image as icon } from '@wordpress/icons';
+import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -111,6 +111,7 @@ export function ImageEdit( {
 		aspectRatio,
 		scale,
 		align,
+		metadata,
 	} = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState();
 
@@ -332,6 +333,7 @@ export function ImageEdit( {
 	} );
 
 	// Much of this description is duplicated from MediaPlaceholder.
+	const isUrlAttributeConnected = !! metadata?.bindings?.url;
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
@@ -340,11 +342,14 @@ export function ImageEdit( {
 						!! borderProps.className && ! isSelected,
 				} ) }
 				withIllustration={ true }
-				icon={ icon }
+				icon={ isUrlAttributeConnected ? pluginsIcon : icon }
 				label={ __( 'Image' ) }
-				instructions={ __(
-					'Upload an image file, pick one from your media library, or add one with a URL.'
-				) }
+				instructions={
+					! isUrlAttributeConnected &&
+					__(
+						'Upload an image file, pick one from your media library, or add one with a URL.'
+					)
+				}
 				style={ {
 					aspectRatio:
 						! ( width && height ) && aspectRatio
@@ -356,7 +361,15 @@ export function ImageEdit( {
 					...borderProps.style,
 				} }
 			>
-				{ content }
+				{ isUrlAttributeConnected ? (
+					<span
+						className={ 'block-bindings-media-placeholder-message' }
+					>
+						{ __( 'Connected to a custom field' ) }
+					</span>
+				) : (
+					content
+				) }
 			</Placeholder>
 		);
 	};

package/src/image/editor.scss

@@ -27,6 +27,12 @@
 			opacity: 0;
 		}
 	}
+	.block-bindings-media-placeholder-message {
+		opacity: 0;
+	}
+	&.is-selected .block-bindings-media-placeholder-message {
+		opacity: 1;
+	}
 
 	// Remove the transition while we still have a legacy placeholder style.
 	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
@@ -38,7 +44,6 @@
 	}
 }
 
-
 figure.wp-block-image:not(.wp-block) {
 	margin: 0;
 }

package/src/image/image.js

@@ -124,6 +124,7 @@ export default function Image( {
 		linkTarget,
 		sizeSlug,
 		lightbox,
+		metadata,
 	} = attributes;
 
 	// The only supported unit is px, so we can parseInt to strip the px here.
@@ -355,7 +356,8 @@ export default function Image( {
 	const lightboxChecked =
 		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
-	const lightboxToggleDisabled = linkDestination !== 'none';
+	const lightboxToggleDisabled =
+		linkDestination && linkDestination !== 'none';
 
 	const dimensionsControl = (
 		<DimensionsTool
@@ -410,21 +412,59 @@ export default function Image( {
 		</InspectorControls>
 	);
 
+	const {
+		lockUrlControls = false,
+		lockAltControls = false,
+		lockTitleControls = false,
+	} = useSelect(
+		( select ) => {
+			if ( ! isSelected ) {
+				return {};
+			}
+
+			const { getBlockBindingsSource } = unlock(
+				select( blockEditorStore )
+			);
+			const {
+				url: urlBinding,
+				alt: altBinding,
+				title: titleBinding,
+			} = metadata?.bindings || {};
+			return {
+				lockUrlControls:
+					!! urlBinding &&
+					getBlockBindingsSource( urlBinding?.source?.name )
+						?.lockAttributesEditing === true,
+				lockAltControls:
+					!! altBinding &&
+					getBlockBindingsSource( altBinding?.source?.name )
+						?.lockAttributesEditing === true,
+				lockTitleControls:
+					!! titleBinding &&
+					getBlockBindingsSource( titleBinding?.source?.name )
+						?.lockAttributesEditing === true,
+			};
+		},
+		[ isSelected ]
+	);
+
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ ! multiImageSelection && ! isEditingImage && (
-					<ImageURLInputUI
-						url={ href || '' }
-						onChangeUrl={ onSetHref }
-						linkDestination={ linkDestination }
-						mediaUrl={ ( image && image.source_url ) || url }
-						mediaLink={ image && image.link }
-						linkTarget={ linkTarget }
-						linkClass={ linkClass }
-						rel={ rel }
-					/>
-				) }
+				{ ! multiImageSelection &&
+					! isEditingImage &&
+					! lockUrlControls && (
+						<ImageURLInputUI
+							url={ href || '' }
+							onChangeUrl={ onSetHref }
+							linkDestination={ linkDestination }
+							mediaUrl={ ( image && image.source_url ) || url }
+							mediaLink={ image && image.link }
+							linkTarget={ linkTarget }
+							linkClass={ linkClass }
+							rel={ rel }
+						/>
+					) }
 				{ allowCrop && (
 					<ToolbarButton
 						onClick={ () => setIsEditingImage( true ) }
@@ -440,19 +480,21 @@ export default function Image( {
 					/>
 				) }
 			</BlockControls>
-			{ ! multiImageSelection && ! isEditingImage && (
-				<BlockControls group="other">
-					<MediaReplaceFlow
-						mediaId={ id }
-						mediaURL={ url }
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						accept="image/*"
-						onSelect={ onSelectImage }
-						onSelectURL={ onSelectURL }
-						onError={ onUploadError }
-					/>
-				</BlockControls>
-			) }
+			{ ! multiImageSelection &&
+				! isEditingImage &&
+				! lockUrlControls && (
+					<BlockControls group="other">
+						<MediaReplaceFlow
+							mediaId={ id }
+							mediaURL={ url }
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							accept="image/*"
+							onSelect={ onSelectImage }
+							onSelectURL={ onSelectURL }
+							onError={ onUploadError }
+						/>
+					</BlockControls>
+				) }
 			{ ! multiImageSelection && externalBlob && (
 				<BlockControls>
 					<ToolbarGroup>
@@ -483,16 +525,27 @@ export default function Image( {
 								label={ __( 'Alternative text' ) }
 								value={ alt || '' }
 								onChange={ updateAlt }
+								disabled={ lockAltControls }
 								help={
-									<>
-										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+									lockAltControls ? (
+										<>
+											{ __(
+												'Connected to a custom field'
+											) }
+										</>
+									) : (
+										<>
+											<ExternalLink href="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.' ) }
-									</>
+										</>
+									)
 								}
 								__nextHasNoMarginBottom
 							/>
@@ -542,17 +595,22 @@ export default function Image( {
 					label={ __( 'Title attribute' ) }
 					value={ title || '' }
 					onChange={ onSetTitle }
+					disabled={ lockTitleControls }
 					help={
-						<>
-							{ __(
-								'Describe the role of this image on the page.'
-							) }
-							<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
+						lockTitleControls ? (
+							<>{ __( 'Connected to a custom field' ) }</>
+						) : (
+							<>
 								{ __(
-									'(Note: many devices and browsers do not display this text.)'
+									'Describe the role of this image on the page.'
 								) }
-							</ExternalLink>
-						</>
+								<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
+									{ __(
+										'(Note: many devices and browsers do not display this text.)'
+									) }
+								</ExternalLink>
+							</>
+						)
 					}
 				/>
 			</InspectorControls>
@@ -747,7 +805,8 @@ export default function Image( {
 	}
 
 	if ( ! url && ! temporaryURL ) {
-		return sizeControls;
+		// Add all controls if the image attributes are connected.
+		return metadata?.bindings ? controls : sizeControls;
 	}
 
 	return (

package/src/image/index.js

@@ -29,6 +29,12 @@ export const settings = {
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
+		const customName = attributes?.metadata?.name;
+
+		if ( context === 'list-view' && customName ) {
+			return customName;
+		}
+
 		if ( context === 'accessibility' ) {
 			const { caption, alt, url } = attributes;
 

package/src/image/index.php

@@ -37,10 +37,6 @@ function render_block_core_image( $attributes, $content, $block ) {
 	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
 	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
 
-	$is_gutenberg_plugin = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
-	$view_js_file_handle = 'wp-block-image-view';
-	$script_handles      = $block->block_type->view_script_handles;
-
 	/*
 	 * If the lightbox is enabled and the image is not linked, add the filter
 	 * and the JavaScript view file.
@@ -51,34 +47,22 @@ function render_block_core_image( $attributes, $content, $block ) {
 		isset( $lightbox_settings['enabled'] ) &&
 		true === $lightbox_settings['enabled']
 	) {
-		if ( $is_gutenberg_plugin ) {
-			gutenberg_enqueue_module( '@wordpress/block-library/image' );
-			// Remove the view script because we are using the module.
-			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file_handle ) );
-		} elseif ( ! in_array( $view_js_file_handle, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file_handle ) );
-		}
+		wp_enqueue_script_module( '@wordpress/block-library/image' );
 
 		/*
-		 * This render needs to happen in a filter with priority 15 to ensure
-		 * that it runs after the duotone filter and that duotone styles are
-		 * applied to the image in the lightbox. We also need to ensure that the
-		 * lightbox works with any plugins that might use filters as well. We
-		 * can consider removing this in the future if the way the blocks are
-		 * rendered changes, or if a new kind of filter is introduced.
+		 * This render needs to happen in a filter with priority 15 to ensure that
+		 * it runs after the duotone filter and that duotone styles are applied to
+		 * the image in the lightbox. Lightbox has to work with any plugins that
+		 * might use filters as well. Removing this can be considered in the
+		 * future if the way the blocks are rendered changes, or if a
+		 * new kind of filter is introduced.
 		 */
 		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
 	} else {
 		/*
-		 * Remove the filter and the JavaScript view file if previously added by
-		 * other Image blocks.
+		 * Remove the filter if previously added by other Image blocks.
 		 */
 		remove_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15 );
-
-		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-		if ( in_array( $view_js_file_handle, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file_handle ) );
-		}
 	}
 
 	return $processor->get_updated_html();
@@ -328,25 +312,6 @@ HTML;
 	return str_replace( '</figure>', $lightbox_html . '</figure>', $body_content );
 }
 
-/**
- * Ensures that the view script has the `wp-interactivity` dependency.
- *
- * @since 6.4.0
- *
- * @global WP_Scripts $wp_scripts
- */
-function block_core_image_ensure_interactivity_dependency() {
-	global $wp_scripts;
-	if (
-		isset( $wp_scripts->registered['wp-block-image-view'] ) &&
-		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-image-view']->deps, true )
-	) {
-		$wp_scripts->registered['wp-block-image-view']->deps[] = 'wp-interactivity';
-	}
-}
-
-add_action( 'wp_print_scripts', 'block_core_image_ensure_interactivity_dependency' );
-
 /**
  * Registers the `core/image` block on server.
  */
@@ -358,13 +323,11 @@ function register_block_core_image() {
 		)
 	);
 
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		gutenberg_register_module(
-			'@wordpress/block-library/image',
-			gutenberg_url( '/build/interactivity/image.min.js' ),
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-	}
+	wp_register_script_module(
+		'@wordpress/block-library/image',
+		defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/image.min.js' ) : includes_url( 'blocks/image/view.min.js' ),
+		array( '@wordpress/interactivity' ),
+		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+	);
 }
 add_action( 'init', 'register_block_core_image' );

package/src/more/index.js

@@ -20,6 +20,12 @@ export const settings = {
 	icon,
 	example: {},
 	__experimentalLabel( attributes, { context } ) {
+		const customName = attributes?.metadata?.name;
+
+		if ( context === 'list-view' && customName ) {
+			return customName;
+		}
+
 		if ( context === 'accessibility' ) {
 			return attributes.customText;
 		}

package/src/navigation/block.json

@@ -136,7 +136,6 @@
 		"interactivity": true,
 		"renaming": false
 	},
-	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

package/src/navigation/edit/index.js

@@ -16,8 +16,8 @@ import {
 import {
 	InspectorControls,
 	useBlockProps,
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
+	RecursionProvider,
+	useHasRecursion,
 	store as blockEditorStore,
 	withColors,
 	ContrastChecker,