@wordpress/block-library 8.28.0 → 8.28.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.28.0",
+	"version": "8.28.2",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,38 +31,38 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.51.0",
-		"@wordpress/api-fetch": "^6.48.0",
-		"@wordpress/autop": "^3.51.0",
-		"@wordpress/blob": "^3.51.0",
-		"@wordpress/block-editor": "^12.19.0",
-		"@wordpress/blocks": "^12.28.0",
-		"@wordpress/components": "^26.0.0",
-		"@wordpress/compose": "^6.28.0",
-		"@wordpress/core-data": "^6.28.0",
-		"@wordpress/data": "^9.21.0",
-		"@wordpress/date": "^4.51.0",
-		"@wordpress/deprecated": "^3.51.0",
-		"@wordpress/dom": "^3.51.0",
-		"@wordpress/element": "^5.28.0",
-		"@wordpress/escape-html": "^2.51.0",
-		"@wordpress/hooks": "^3.51.0",
-		"@wordpress/html-entities": "^3.51.0",
-		"@wordpress/i18n": "^4.51.0",
-		"@wordpress/icons": "^9.42.0",
-		"@wordpress/interactivity": "^5.0.0",
-		"@wordpress/interactivity-router": "^1.1.0",
-		"@wordpress/keycodes": "^3.51.0",
-		"@wordpress/notices": "^4.19.0",
-		"@wordpress/patterns": "^1.12.0",
-		"@wordpress/primitives": "^3.49.0",
-		"@wordpress/private-apis": "^0.33.0",
-		"@wordpress/reusable-blocks": "^4.28.0",
-		"@wordpress/rich-text": "^6.28.0",
-		"@wordpress/server-side-render": "^4.28.0",
-		"@wordpress/url": "^3.52.0",
-		"@wordpress/viewport": "^5.28.0",
-		"@wordpress/wordcount": "^3.51.0",
+		"@wordpress/a11y": "^3.51.1",
+		"@wordpress/api-fetch": "^6.48.1",
+		"@wordpress/autop": "^3.51.1",
+		"@wordpress/blob": "^3.51.1",
+		"@wordpress/block-editor": "^12.19.2",
+		"@wordpress/blocks": "^12.28.2",
+		"@wordpress/components": "^26.0.2",
+		"@wordpress/compose": "^6.28.1",
+		"@wordpress/core-data": "^6.28.2",
+		"@wordpress/data": "^9.21.1",
+		"@wordpress/date": "^4.51.1",
+		"@wordpress/deprecated": "^3.51.1",
+		"@wordpress/dom": "^3.51.1",
+		"@wordpress/element": "^5.28.1",
+		"@wordpress/escape-html": "^2.51.1",
+		"@wordpress/hooks": "^3.51.1",
+		"@wordpress/html-entities": "^3.51.1",
+		"@wordpress/i18n": "^4.51.1",
+		"@wordpress/icons": "^9.42.1",
+		"@wordpress/interactivity": "^5.0.1",
+		"@wordpress/interactivity-router": "^1.1.1",
+		"@wordpress/keycodes": "^3.51.1",
+		"@wordpress/notices": "^4.19.1",
+		"@wordpress/patterns": "^1.12.2",
+		"@wordpress/primitives": "^3.49.1",
+		"@wordpress/private-apis": "^0.33.1",
+		"@wordpress/reusable-blocks": "^4.28.2",
+		"@wordpress/rich-text": "^6.28.2",
+		"@wordpress/server-side-render": "^4.28.2",
+		"@wordpress/url": "^3.52.1",
+		"@wordpress/viewport": "^5.28.1",
+		"@wordpress/wordcount": "^3.51.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -80,5 +80,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "eb796371e9630636a4a8837033807b0c4a06ed67"
+	"gitHead": "730beb7fd33d3382d6032c3f33e451625a0fcf36"
 }

package/src/button/block.json

@@ -8,7 +8,6 @@
 	"description": "Prompt visitors to take action with a button-style link.",
 	"keywords": [ "link" ],
 	"textdomain": "default",
-	"usesContext": [ "pattern/overrides" ],
 	"attributes": {
 		"tagName": {
 			"type": "string",

package/src/button/edit.js

@@ -246,7 +246,7 @@ function ButtonEdit( props ) {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
 					getBlockBindingsSource( metadata?.bindings?.url?.source )
-						?.lockAttributesEditing === true,
+						?.lockAttributesEditing,
 			};
 		},
 		[ isSelected ]

package/src/file/index.php

@@ -53,7 +53,7 @@ function render_block_core_file( $attributes, $content ) {
 
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
-		$processor->set_attribute( 'data-wp-interactive', '{"namespace":"core/file"}' );
+		$processor->set_attribute( 'data-wp-interactive', 'core/file' );
 		$processor->next_tag( 'object' );
 		$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
 		$processor->set_attribute( 'hidden', true );

package/src/footnotes/index.php

@@ -68,15 +68,30 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
  * @since 6.3.0
  */
 function register_block_core_footnotes() {
-	$post_types = get_post_types(
+	register_block_type_from_metadata(
+		__DIR__ . '/footnotes',
 		array(
-			'show_in_rest' => true,
-			'public'       => true,
+			'render_callback' => 'render_block_core_footnotes',
 		)
 	);
+}
+add_action( 'init', 'register_block_core_footnotes' );
+
+
+/**
+ * Registers the footnotes meta field required for footnotes to work.
+ *
+ * @since 6.5.0
+ */
+function register_block_core_footnotes_post_meta() {
+	$post_types = get_post_types( array( 'show_in_rest' => true ) );
 	foreach ( $post_types as $post_type ) {
 		// Only register the meta field if the post type supports the editor, custom fields, and revisions.
-		if ( post_type_supports( $post_type, 'editor' ) && post_type_supports( $post_type, 'custom-fields' ) && post_type_supports( $post_type, 'revisions' ) ) {
+		if (
+			post_type_supports( $post_type, 'editor' ) &&
+			post_type_supports( $post_type, 'custom-fields' ) &&
+			post_type_supports( $post_type, 'revisions' )
+		) {
 			register_post_meta(
 				$post_type,
 				'footnotes',
@@ -89,14 +104,12 @@ function register_block_core_footnotes() {
 			);
 		}
 	}
-	register_block_type_from_metadata(
-		__DIR__ . '/footnotes',
-		array(
-			'render_callback' => 'render_block_core_footnotes',
-		)
-	);
 }
-add_action( 'init', 'register_block_core_footnotes' );
+/**
+ * Most post types are registered at priority 10, so use priority 20 here in
+ * order to catch them.
+*/
+add_action( 'init', 'register_block_core_footnotes_post_meta', 20 );
 
 /**
  * Adds the footnotes field to the revisions display.

package/src/heading/block.json

@@ -7,7 +7,6 @@
 	"description": "Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.",
 	"keywords": [ "title", "subtitle" ],
 	"textdomain": "default",
-	"usesContext": [ "pattern/overrides" ],
 	"attributes": {
 		"textAlign": {
 			"type": "string"

package/src/image/block.json

@@ -4,12 +4,7 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [
-		"allowResize",
-		"imageCrop",
-		"fixedHeight",
-		"pattern/overrides"
-	],
+	"usesContext": [ "allowResize", "imageCrop", "fixedHeight" ],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",

package/src/image/edit.js

@@ -349,7 +349,7 @@ export function ImageEdit( {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
 					getBlockBindingsSource( metadata?.bindings?.url?.source )
-						?.lockAttributesEditing === true,
+						?.lockAttributesEditing,
 			};
 		},
 		[ isSingleSelected ]

package/src/image/editor.scss

@@ -181,3 +181,8 @@ figure.wp-block-image:not(.wp-block) {
 		padding-right: 0;
 	}
 }
+
+.wp-block-image__toolbar_content_textarea {
+	// Corresponds to the size of the textarea in the block inspector.
+	width: 250px;
+}

package/src/image/image.js

@@ -10,6 +10,7 @@ import {
 	TextControl,
 	ToolbarButton,
 	ToolbarGroup,
+	Dropdown,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -30,6 +31,7 @@ import {
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
+import { DOWN } from '@wordpress/keycodes';
 import { getFilename } from '@wordpress/url';
 import { switchToBlockType } from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
@@ -177,6 +179,7 @@ export default function Image( {
 	const [ externalBlob, setExternalBlob ] = useState();
 	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const hasNonContentControls = blockEditingMode === 'default';
+	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 	const isResizable =
 		allowResize &&
 		hasNonContentControls &&
@@ -427,7 +430,7 @@ export default function Image( {
 				lockUrlControls:
 					!! urlBinding &&
 					getBlockBindingsSource( urlBinding?.source )
-						?.lockAttributesEditing === true,
+						?.lockAttributesEditing,
 				lockHrefControls:
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
@@ -435,11 +438,11 @@ export default function Image( {
 				lockAltControls:
 					!! altBinding &&
 					getBlockBindingsSource( altBinding?.source )
-						?.lockAttributesEditing === true,
+						?.lockAttributesEditing,
 				lockTitleControls:
 					!! titleBinding &&
 					getBlockBindingsSource( titleBinding?.source )
-						?.lockAttributesEditing === true,
+						?.lockAttributesEditing,
 			};
 		},
 		[ clientId, isSingleSelected, metadata?.bindings ]
@@ -505,6 +508,113 @@ export default function Image( {
 					</ToolbarGroup>
 				</BlockControls>
 			) }
+			{ isContentOnlyMode && (
+				// Add some extra controls for content attributes when content only mode is active.
+				// With content only mode active, the inspector is hidden, so users need another way
+				// to edit these attributes.
+				<BlockControls group="other">
+					<Dropdown
+						popoverProps={ { position: 'bottom right' } }
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<ToolbarButton
+								onClick={ onToggle }
+								aria-haspopup="true"
+								aria-expanded={ isOpen }
+								onKeyDown={ ( event ) => {
+									if ( ! isOpen && event.keyCode === DOWN ) {
+										event.preventDefault();
+										onToggle();
+									}
+								} }
+							>
+								{ _x(
+									'Alt',
+									'Alternative text for an image. Block toolbar label, a low character count is preferred.'
+								) }
+							</ToolbarButton>
+						) }
+						renderContent={ () => (
+							<TextareaControl
+								className="wp-block-image__toolbar_content_textarea"
+								label={ __( 'Alternative text' ) }
+								value={ alt || '' }
+								onChange={ updateAlt }
+								disabled={ lockAltControls }
+								help={
+									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 />
+											{ __(
+												'Leave empty if decorative.'
+											) }
+										</>
+									)
+								}
+								__nextHasNoMarginBottom
+							/>
+						) }
+					/>
+					<Dropdown
+						popoverProps={ { position: 'bottom right' } }
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<ToolbarButton
+								onClick={ onToggle }
+								aria-haspopup="true"
+								aria-expanded={ isOpen }
+								onKeyDown={ ( event ) => {
+									if ( ! isOpen && event.keyCode === DOWN ) {
+										event.preventDefault();
+										onToggle();
+									}
+								} }
+							>
+								{ __( 'Title' ) }
+							</ToolbarButton>
+						) }
+						renderContent={ () => (
+							<TextControl
+								className="wp-block-image__toolbar_content_textarea"
+								__nextHasNoMarginBottom
+								label={ __( 'Title attribute' ) }
+								value={ title || '' }
+								onChange={ onSetTitle }
+								disabled={ lockTitleControls }
+								help={
+									lockTitleControls ? (
+										<>
+											{ __(
+												'Connected to a custom field'
+											) }
+										</>
+									) : (
+										<>
+											{ __(
+												'Describe the role of this image on the page.'
+											) }
+											<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
+												{ __(
+													'(Note: many devices and browsers do not display this text.)'
+												) }
+											</ExternalLink>
+										</>
+									)
+								}
+							/>
+						) }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }
@@ -524,7 +634,7 @@ export default function Image( {
 								label={ __( 'Alternative text' ) }
 								value={ alt || '' }
 								onChange={ updateAlt }
-								disabled={ lockAltControls }
+								readOnly={ lockAltControls }
 								help={
 									lockAltControls ? (
 										<>
@@ -566,7 +676,7 @@ export default function Image( {
 					label={ __( 'Title attribute' ) }
 					value={ title || '' }
 					onChange={ onSetTitle }
-					disabled={ lockTitleControls }
+					readOnly={ lockTitleControls }
 					help={
 						lockTitleControls ? (
 							<>{ __( 'Connected to a custom field' ) }</>

package/src/image/index.php

@@ -159,7 +159,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$figure_class_names = $p->get_attribute( 'class' );
 	$figure_styles      = $p->get_attribute( 'style' );
 	$p->add_class( 'wp-lightbox-container' );
-	$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/image"}' );
+	$p->set_attribute( 'data-wp-interactive', 'core/image' );
 	$p->set_attribute(
 		'data-wp-context',
 		wp_json_encode(
@@ -240,7 +240,7 @@ function block_core_image_print_lightbox_overlay() {
 	echo <<<HTML
 		<div 
 			class="wp-lightbox-overlay zoom"
-			data-wp-interactive='{"namespace":"core/image"}'
+			data-wp-interactive="core/image"
 			data-wp-context='{}'
 			data-wp-bind--role="state.roleAttribute"
 			data-wp-bind--aria-label="state.currentImage.ariaLabel"

package/src/navigation/constants.js

@@ -23,5 +23,3 @@ export const SELECT_NAVIGATION_MENUS_ARGS = [
 	'wp_navigation',
 	PRELOADED_NAVIGATION_MENUS_QUERY,
 ];
-
-export const NAVIGATION_MOBILE_COLLAPSE = '600px';

package/src/navigation/edit/index.js

@@ -42,7 +42,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { close, Icon } from '@wordpress/icons';
-import { useInstanceId, useMediaQuery } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -71,7 +71,6 @@ import MenuInspectorControls from './menu-inspector-controls';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
-import { NAVIGATION_MOBILE_COLLAPSE } from '../constants';
 import { unlock } from '../../lock-unlock';
 
 function Navigation( {
@@ -298,14 +297,6 @@ function Navigation( {
 		[ clientId ]
 	);
 	const isResponsive = 'never' !== overlayMenu;
-	const isMobileBreakPoint = useMediaQuery(
-		`(max-width: ${ NAVIGATION_MOBILE_COLLAPSE })`
-	);
-
-	const isCollapsed =
-		( 'mobile' === overlayMenu && isMobileBreakPoint ) ||
-		'always' === overlayMenu;
-
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames(
@@ -319,7 +310,6 @@ function Navigation( {
 				'is-vertical': orientation === 'vertical',
 				'no-wrap': flexWrap === 'nowrap',
 				'is-responsive': isResponsive,
-				'is-collapsed': isCollapsed,
 				'has-text-color': !! textColor.color || !! textColor?.class,
 				[ getColorClassName( 'color', textColor?.slug ) ]:
 					!! textColor?.slug,

package/src/navigation/editor.scss

@@ -429,7 +429,7 @@ $color-control-label-height: 20px;
 // These needs extra specificity in the editor.
 .wp-block-navigation__responsive-container:not(.is-menu-open) {
 	.components-button.wp-block-navigation__responsive-container-close {
-		.is-collapsed & {
+		@include break-small {
 			display: none;
 		}
 	}