WordPress · karmatosed · Oct 9, 2023 · Oct 2, 2023 · Oct 2, 2023 · Oct 3, 2023
@@ -84,35 +84,35 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 
 	$aria_label = __( 'Enlarge image', 'gutenberg' );
 
+	$processor->next_tag( 'img' );
 	$alt_attribute = $processor->get_attribute( 'alt' );
 
-	if ( null !== $alt_attribute ) {
+	// An empty alt attribute `alt=""` is valid for decorative images.
+	if ( is_string( $alt_attribute ) ) {
 		$alt_attribute = trim( $alt_attribute );
 	}
 
+	// It only makes sense to append the alt text to the button aria-label when the alt text is non-empty.
 	if ( $alt_attribute ) {
 		/* translators: %s: Image alt text. */
 		$aria_label = sprintf( __( 'Enlarge image: %s', 'gutenberg' ), $alt_attribute );
 	}
-	$content = $processor->get_updated_html();
 
 	// If we don't set a default, it won't work if Lightbox is set to enabled by default.
 	$lightbox_animation = 'zoom';
 	if ( isset( $lightbox_settings['animation'] ) && '' !== $lightbox_settings['animation'] ) {
 		$lightbox_animation = $lightbox_settings['animation'];
 	}
 
-	// We want to store the src in the context so we can set it dynamically when the lightbox is opened.
-	$z = new WP_HTML_Tag_Processor( $content );
-	$z->next_tag( 'img' );
-
+	// Note: We want to store the `src` in the context so we
+	// can set it dynamically when the lightbox is opened.
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
 		$img_width        = $img_metadata['width'];
 		$img_height       = $img_metadata['height'];
 	} else {
-		$img_uploaded_src = $z->get_attribute( 'src' );
+		$img_uploaded_src = $processor->get_attribute( 'src' );
 		$img_width        = 'none';
 		$img_height       = 'none';
 	}
@@ -123,7 +123,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 		$scale_attr = false;
 	}
 
-	$w = new WP_HTML_Tag_Processor( $content );
+	$w = new WP_HTML_Tag_Processor( $block_content );
 	$w->next_tag( 'figure' );
 	$w->add_class( 'wp-lightbox-container' );
 	$w->set_attribute( 'data-wp-interactive', true );
@@ -163,27 +163,28 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 	// Wrap the image in the body content with a button.
 	$img = null;
 	preg_match( '/<img[^>]+>/', $body_content, $img );
-	$button       =
-				'<button
-					type="button"
-					aria-haspopup="dialog"
-					aria-label="' . esc_attr( $aria_label ) . '"
-					data-wp-on--click="actions.core.image.showLightbox"
-					data-wp-style--width="context.core.image.imageButtonWidth"
-					data-wp-style--height="context.core.image.imageButtonHeight"
-					data-wp-style--left="context.core.image.imageButtonLeft"
-					data-wp-style--top="context.core.image.imageButtonTop"
-				>
-				</button>'
-				. $img[0];
+
+	$button =
+		$img[0]
+		. '<button
+			type="button"
+			aria-haspopup="dialog"
+			aria-label="' . esc_attr( $aria_label ) . '"
+			data-wp-on--click="actions.core.image.showLightbox"
+			data-wp-style--width="context.core.image.imageButtonWidth"
+			data-wp-style--height="context.core.image.imageButtonHeight"
+			data-wp-style--left="context.core.image.imageButtonLeft"
+			data-wp-style--top="context.core.image.imageButtonTop"
+		></button>';
+
 	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 
 	// We need both a responsive image and an enlarged image to animate
 	// the zoom seamlessly on slow internet connections; the responsive
 	// image is a copy of the one in the body, which animates immediately
 	// as the lightbox is opened, while the enlarged one is a full-sized
 	// version that will likely still be loading as the animation begins.
-	$m = new WP_HTML_Tag_Processor( $content );
+	$m = new WP_HTML_Tag_Processor( $block_content );
 	$m->next_tag( 'figure' );
 	$m->add_class( 'responsive-image' );
 	$m->next_tag( 'img' );
@@ -199,7 +200,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 	$m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
 	$initial_image_content = $m->get_updated_html();
 
-	$q = new WP_HTML_Tag_Processor( $content );
+	$q = new WP_HTML_Tag_Processor( $block_content );
 	$q->next_tag( 'figure' );
 	$q->add_class( 'enlarged-image' );
 	$q->next_tag( 'img' );
@@ -219,7 +220,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 
 	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
 	$close_button_color = esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) );
-	$dialog_label       = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image', 'gutenberg' );
+	$dialog_label       = esc_attr__( 'Enlarged image', 'gutenberg' );
 	$close_button_label = esc_attr__( 'Close', 'gutenberg' );
 
 	$lightbox_html = <<<HTML

@@ -45,7 +45,7 @@ public function register_routes() {
 					'callback'            => array( $this, 'install_fonts' ),
 					'permission_callback' => array( $this, 'update_font_library_permissions_check' ),
 					'args'                => array(
-						'fontFamilies' => array(
+						'font_families' => array(
 							'required'          => true,
 							'type'              => 'string',
 							'validate_callback' => array( $this, 'validate_install_font_families' ),
@@ -147,13 +147,13 @@ private function get_validation_errors( $font_families, $files ) {
 		$error_messages = array();
 
 		if ( ! is_array( $font_families ) ) {
-			$error_messages[] = __( 'fontFamilies should be an array of font families.', 'gutenberg' );
+			$error_messages[] = __( 'font_families should be an array of font families.', 'gutenberg' );
 			return $error_messages;
 		}
 
 		// Checks if there is at least one font family.
 		if ( count( $font_families ) < 1 ) {
-			$error_messages[] = __( 'fontFamilies should have at least one font family definition.', 'gutenberg' );
+			$error_messages[] = __( 'font_families should have at least one font family definition.', 'gutenberg' );
 			return $error_messages;
 		}
 
@@ -260,7 +260,7 @@ public function validate_install_font_families( $param, $request ) {
 	 */
 	public function uninstall_schema() {
 		return array(
-			'fontFamilies' => array(
+			'font_families' => array(
 				'type'        => 'array',
 				'description' => __( 'The font families to install.', 'gutenberg' ),
 				'required'    => true,
@@ -289,7 +289,7 @@ public function uninstall_schema() {
 	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
 	 */
 	public function uninstall_fonts( $request ) {
-		$fonts_to_uninstall = $request->get_param( 'fontFamilies' );
+		$fonts_to_uninstall = $request->get_param( 'font_families' );
 
 		$errors    = array();
 		$successes = array();
@@ -397,7 +397,7 @@ private function needs_write_permission( $font_families ) {
 	 */
 	public function install_fonts( $request ) {
 		// Get new fonts to install.
-		$fonts_param = $request->get_param( 'fontFamilies' );
+		$fonts_param = $request->get_param( 'font_families' );
 
 		/*
 		 * As this is receiving form data, the font families are encoded as a string.

@@ -244,3 +244,4 @@ function () {
 require __DIR__ . '/block-supports/duotone.php';
 require __DIR__ . '/block-supports/shadow.php';
 require __DIR__ . '/block-supports/background.php';
+require __DIR__ . '/block-supports/behaviors.php';
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -128,6 +128,7 @@ $z-layers: (
 	".block-editor-block-rename-modal": 1000001,
 	".edit-site-list__rename-modal": 1000001,
 	".edit-site-swap-template-modal": 1000001,
+	".edit-site-template-panel__replace-template-modal": 1000001,
 
 	// Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
 	// because it uses emotion and not sass. We need it to render on top its parent popover.

@@ -14,7 +14,6 @@ import {
 	Popover,
 } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -65,9 +64,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		<div className="block-editor-block-styles">
 			<div className="block-editor-block-styles__variants">
 				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.isDefault
-						? __( 'Default' )
-						: style.label || style.name;
+					const buttonText = style.label || style.name;
 
 					return (
 						<Button

@@ -38,7 +38,14 @@ function bubbleEvent( event, Constructor, frame ) {
 		init[ key ] = event[ key ];
 	}
 
-	if ( event instanceof frame.ownerDocument.defaultView.MouseEvent ) {
+	// Check if the event is a MouseEvent generated within the iframe.
+	// If so, adjust the coordinates to be relative to the position of
+	// the iframe. This ensures that components such as Draggable
+	// receive coordinates relative to the window, instead of relative
+	// to the iframe. Without this, the Draggable event handler would
+	// result in components "jumping" position as soon as the user
+	// drags over the iframe.
+	if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {
 		const rect = frame.getBoundingClientRect();
 		init.clientX += rect.left;
 		init.clientY += rect.top;

@@ -7,10 +7,11 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	ExternalLink,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
+import { useMemo, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -73,13 +74,11 @@ export function BlockPatternsSyncFilter( {
 			{
 				value: SYNC_TYPES.full,
 				label: __( 'Synced' ),
-				info: __( 'Updated everywhere' ),
 				disabled: shouldDisableSyncFilter,
 			},
 			{
 				value: SYNC_TYPES.unsynced,
-				label: __( 'Standard' ),
-				info: __( 'Edit freely' ),
+				label: __( 'Not synced' ),
 				disabled: shouldDisableSyncFilter,
 			},
 		],
@@ -95,20 +94,17 @@ export function BlockPatternsSyncFilter( {
 			},
 			{
 				value: PATTERN_TYPES.directory,
-				label: __( 'Directory' ),
-				info: __( 'Pattern directory & core' ),
+				label: __( 'Pattern Directory' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
 				value: PATTERN_TYPES.theme,
-				label: __( 'Theme' ),
-				info: __( 'Bundled with the theme' ),
+				label: __( 'Theme & Plugins' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
 				value: PATTERN_TYPES.user,
 				label: __( 'User' ),
-				info: __( 'Custom created' ),
 			},
 		],
 		[ shouldDisableNonUserSources ]
@@ -149,7 +145,7 @@ export function BlockPatternsSyncFilter( {
 			>
 				{ () => (
 					<>
-						<MenuGroup label={ __( 'Author' ) }>
+						<MenuGroup label={ __( 'Source' ) }>
 							<MenuItemsChoice
 								choices={ patternSourceMenuOptions }
 								onSelect={ ( value ) => {
@@ -175,6 +171,22 @@ export function BlockPatternsSyncFilter( {
 								value={ patternSyncFilter }
 							/>
 						</MenuGroup>
+						<div className="block-editor-tool-selector__help">
+							{ createInterpolateElement(
+								__(
+									'Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'
+								),
+								{
+									Link: (
+										<ExternalLink
+											href={ __(
+												'https://wordpress.org/patterns/'
+											) }
+										/>
+									),
+								}
+							) }
+						</div>
 					</>
 				) }
 			</DropdownMenu>

@@ -321,9 +321,6 @@ export function BlockPatternsCategoryPanel( {
 						category={ category }
 					/>
 				</HStack>
-				{ category.description && (
-					<Text>{ category.description }</Text>
-				) }
 				{ ! currentCategoryPatterns.length && (
 					<Text
 						variant="muted"

@@ -1,16 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
-/** @typedef {import('./api').InserterMediaRequest} InserterMediaRequest */
-/** @typedef {import('./api').InserterMediaItem} InserterMediaItem */
+/** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
 
 /**
  * Fetches media items based on the provided category.
@@ -50,48 +51,14 @@ export function useMediaResults( category, query = {} ) {
 	return { mediaList, isLoading };
 }
 
-function useInserterMediaCategories() {
-	const {
-		inserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-	} = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return {
-			inserterMediaCategories: settings.inserterMediaCategories,
-			allowedMimeTypes: settings.allowedMimeTypes,
-			enableOpenverseMediaCategory: settings.enableOpenverseMediaCategory,
-		};
-	}, [] );
-	// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
-	// some of them. In this case we shouldn't add the category to the available media
-	// categories list in the inserter.
-	const allowedCategories = useMemo( () => {
-		if ( ! inserterMediaCategories || ! allowedMimeTypes ) {
-			return;
-		}
-		return inserterMediaCategories.filter( ( category ) => {
-			// Check if Openverse category is enabled.
-			if (
-				! enableOpenverseMediaCategory &&
-				category.name === 'openverse'
-			) {
-				return false;
-			}
-			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
-				mimeType.startsWith( `${ category.mediaType }/` )
-			);
-		} );
-	}, [
-		inserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-	] );
-	return allowedCategories;
-}
-
 export function useMediaCategories( rootClientId ) {
 	const [ categories, setCategories ] = useState( [] );
+
+	const inserterMediaCategories = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getInserterMediaCategories(),
+		[]
+	);
 	const { canInsertImage, canInsertVideo, canInsertAudio } = useSelect(
 		( select ) => {
 			const { canInsertBlockType } = select( blockEditorStore );
@@ -112,7 +79,6 @@ export function useMediaCategories( rootClientId ) {
 		},
 		[ rootClientId ]
 	);
-	const inserterMediaCategories = useInserterMediaCategories();
 	useEffect( () => {
 		( async () => {
 			const _categories = [];

@@ -314,7 +314,7 @@ $block-inserter-tabs-height: 44px;
 		overflow-y: auto;
 		flex-grow: 1;
 		height: 100%;
-		padding: $grid-unit-40 $grid-unit-30;
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }