@wordpress/block-library 8.28.1 → 8.28.3

package/build-style/navigation/style.css

@@ -504,18 +504,20 @@ button.wp-block-navigation-item__content {
   right: auto;
   left: auto;
 }
-:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) {
-  display: block;
-  width: 100%;
-  position: relative;
-  z-index: auto;
-  background-color: inherit;
-}
-:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
-  display: none;
-}
-:not(.is-collapsed) > .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
-  left: 0;
+@media (min-width: 600px) {
+  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
+    display: block;
+    width: 100%;
+    position: relative;
+    z-index: auto;
+    background-color: inherit;
+  }
+  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
+    display: none;
+  }
+  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+    left: 0;
+  }
 }
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
@@ -559,8 +561,10 @@ button.wp-block-navigation-item__content {
   font-weight: inherit;
   font-size: inherit;
 }
-:not(.is-collapsed) > .wp-block-navigation__responsive-container-open {
-  display: none;
+@media (min-width: 600px) {
+  .wp-block-navigation__responsive-container-open:not(.always-shown) {
+    display: none;
+  }
 }
 
 .wp-block-navigation__responsive-container-close {

package/build-style/style-rtl.css

@@ -2568,18 +2568,20 @@ button.wp-block-navigation-item__content {
   left: auto;
   right: auto;
 }
-:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) {
-  display: block;
-  width: 100%;
-  position: relative;
-  z-index: auto;
-  background-color: inherit;
-}
-:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
-  display: none;
-}
-:not(.is-collapsed) > .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
-  right: 0;
+@media (min-width: 600px) {
+  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
+    display: block;
+    width: 100%;
+    position: relative;
+    z-index: auto;
+    background-color: inherit;
+  }
+  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
+    display: none;
+  }
+  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+    right: 0;
+  }
 }
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
@@ -2623,8 +2625,10 @@ button.wp-block-navigation-item__content {
   font-weight: inherit;
   font-size: inherit;
 }
-:not(.is-collapsed) > .wp-block-navigation__responsive-container-open {
-  display: none;
+@media (min-width: 600px) {
+  .wp-block-navigation__responsive-container-open:not(.always-shown) {
+    display: none;
+  }
 }
 
 .wp-block-navigation__responsive-container-close {

package/build-style/style.css

@@ -2598,18 +2598,20 @@ button.wp-block-navigation-item__content {
   right: auto;
   left: auto;
 }
-:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) {
-  display: block;
-  width: 100%;
-  position: relative;
-  z-index: auto;
-  background-color: inherit;
-}
-:not(.is-collapsed) > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
-  display: none;
-}
-:not(.is-collapsed) > .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
-  left: 0;
+@media (min-width: 600px) {
+  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
+    display: block;
+    width: 100%;
+    position: relative;
+    z-index: auto;
+    background-color: inherit;
+  }
+  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
+    display: none;
+  }
+  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+    left: 0;
+  }
 }
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
@@ -2653,8 +2655,10 @@ button.wp-block-navigation-item__content {
   font-weight: inherit;
   font-size: inherit;
 }
-:not(.is-collapsed) > .wp-block-navigation__responsive-container-open {
-  display: none;
+@media (min-width: 600px) {
+  .wp-block-navigation__responsive-container-open:not(.always-shown) {
+    display: none;
+  }
 }
 
 .wp-block-navigation__responsive-container-close {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.28.1",
+	"version": "8.28.3",
 	"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.1",
-		"@wordpress/blocks": "^12.28.1",
-		"@wordpress/components": "^26.0.1",
-		"@wordpress/compose": "^6.28.0",
-		"@wordpress/core-data": "^6.28.1",
-		"@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.1",
-		"@wordpress/primitives": "^3.49.0",
-		"@wordpress/private-apis": "^0.33.0",
-		"@wordpress/reusable-blocks": "^4.28.1",
-		"@wordpress/rich-text": "^6.28.1",
-		"@wordpress/server-side-render": "^4.28.1",
-		"@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.3",
+		"@wordpress/blocks": "^12.28.3",
+		"@wordpress/components": "^26.0.2",
+		"@wordpress/compose": "^6.28.1",
+		"@wordpress/core-data": "^6.28.3",
+		"@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.3",
+		"@wordpress/primitives": "^3.49.1",
+		"@wordpress/private-apis": "^0.33.1",
+		"@wordpress/reusable-blocks": "^4.28.3",
+		"@wordpress/rich-text": "^6.28.2",
+		"@wordpress/server-side-render": "^4.28.3",
+		"@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": "5902fc0f490528da6965dd4cf97f11192bcf5956"
+	"gitHead": "b12d75c5c5256fda2a0509bb432e20ddd3354d5e"
 }

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

@@ -238,15 +238,15 @@ function ButtonEdit( props ) {
 				return {};
 			}
 
-			const { getBlockBindingsSource } = unlock(
+			const blockBindingsSource = unlock(
 				select( blockEditorStore )
-			);
+			).getBlockBindingsSource( metadata?.bindings?.url?.source );
 
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					getBlockBindingsSource( metadata?.bindings?.url?.source )
-						?.lockAttributesEditing,
+					( ! blockBindingsSource ||
+						blockBindingsSource?.lockAttributesEditing ),
 			};
 		},
 		[ isSelected ]

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

@@ -341,15 +341,15 @@ export function ImageEdit( {
 				return {};
 			}
 
-			const { getBlockBindingsSource } = unlock(
+			const blockBindingsSource = unlock(
 				select( blockEditorStore )
-			);
+			).getBlockBindingsSource( metadata?.bindings?.url?.source );
 
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					getBlockBindingsSource( metadata?.bindings?.url?.source )
-						?.lockAttributesEditing,
+					( ! blockBindingsSource ||
+						blockBindingsSource?.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 &&
@@ -423,23 +426,32 @@ export default function Image( {
 			} = metadata?.bindings || {};
 			const hasParentPattern =
 				getBlockParentsByBlockName( clientId, 'core/block' ).length > 0;
+			const urlBindingSource = getBlockBindingsSource(
+				urlBinding?.source
+			);
+			const altBindingSource = getBlockBindingsSource(
+				altBinding?.source
+			);
+			const titleBindingSource = getBlockBindingsSource(
+				titleBinding?.source
+			);
 			return {
 				lockUrlControls:
 					!! urlBinding &&
-					getBlockBindingsSource( urlBinding?.source )
-						?.lockAttributesEditing,
+					( ! urlBindingSource ||
+						urlBindingSource?.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.
 					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
-					getBlockBindingsSource( altBinding?.source )
-						?.lockAttributesEditing,
+					( ! altBindingSource ||
+						altBindingSource?.lockAttributesEditing ),
 				lockTitleControls:
 					!! titleBinding &&
-					getBlockBindingsSource( titleBinding?.source )
-						?.lockAttributesEditing,
+					( ! titleBindingSource ||
+						titleBindingSource?.lockAttributesEditing ),
 			};
 		},
 		[ clientId, isSingleSelected, metadata?.bindings ]
@@ -505,6 +517,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 +643,7 @@ export default function Image( {
 								label={ __( 'Alternative text' ) }
 								value={ alt || '' }
 								onChange={ updateAlt }
-								disabled={ lockAltControls }
+								readOnly={ lockAltControls }
 								help={
 									lockAltControls ? (
 										<>
@@ -566,7 +685,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/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;
 		}
 	}