@wordpress/block-library 8.25.1-next.79a6196f.0 → 8.27.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',
+		gutenberg_url( '/build/interactivity/image.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,