@wordpress/block-library 9.0.0 → 9.1.0

package/src/navigation/index.php

@@ -495,7 +495,7 @@ class WP_Navigation_Block_Renderer {
 		$close_button_directives         = '';
 		if ( $is_interactive ) {
 			$open_button_directives                  = '
-				data-wp-on--click="actions.openMenuOnClick"
+				data-wp-on-async--click="actions.openMenuOnClick"
 				data-wp-on--keydown="actions.handleMenuKeydown"
 			';
 			$responsive_container_directives         = '
@@ -503,7 +503,7 @@ class WP_Navigation_Block_Renderer {
 				data-wp-class--is-menu-open="state.isMenuOpen"
 				data-wp-watch="callbacks.initMenu"
 				data-wp-on--keydown="actions.handleMenuKeydown"
-				data-wp-on--focusout="actions.handleMenuFocusout"
+				data-wp-on-async--focusout="actions.handleMenuFocusout"
 				tabindex="-1"
 			';
 			$responsive_dialog_directives            = '
@@ -512,7 +512,7 @@ class WP_Navigation_Block_Renderer {
 				data-wp-bind--role="state.roleAttribute"
 			';
 			$close_button_directives                 = '
-				data-wp-on--click="actions.closeMenuOnClick"
+				data-wp-on-async--click="actions.closeMenuOnClick"
 			';
 			$responsive_container_content_directives = '
 				data-wp-watch="callbacks.focusFirstElement"
@@ -826,7 +826,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
 		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu" }' );
 		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
-		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
+		$tags->set_attribute( 'data-wp-on-async--focusout', 'actions.handleMenuFocusout' );
 		$tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' );
 
 		// This is a fix for Safari. Without it, Safari doesn't change the active
@@ -836,8 +836,8 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$tags->set_attribute( 'tabindex', '-1' );
 
 		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
-			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' );
-			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on-async--mouseenter', 'actions.openMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on-async--mouseleave', 'actions.closeMenuOnHover' );
 		}
 
 		// Add directives to the toggle submenu button.
@@ -847,7 +847,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation-submenu__toggle',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on--click', 'actions.toggleMenuOnClick' );
+			$tags->set_attribute( 'data-wp-on-async--click', 'actions.toggleMenuOnClick' );
 			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isMenuOpen' );
 			// The `aria-expanded` attribute for SSR is already added in the submenu block.
 		}
@@ -858,7 +858,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation__submenu-container',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on--focus', 'actions.openMenuOnFocus' );
+			$tags->set_attribute( 'data-wp-on-async--focus', 'actions.openMenuOnFocus' );
 		}
 
 		// Iterate through subitems if exist.

package/src/navigation/view.js

@@ -143,7 +143,7 @@ const { state, actions } = store(
 				// If focus is outside modal, and in the document, close menu
 				// event.target === The element losing focus
 				// event.relatedTarget === The element receiving focus (if any)
-				// When focusout is outsite the document,
+				// When focusout is outside the document,
 				// `window.document.activeElement` doesn't change.
 
 				// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.

package/src/page-list/convert-to-links-modal.js

@@ -36,6 +36,7 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 				</Button>
 				<Button
 					variant="primary"
+					__experimentalIsFocusable
 					disabled={ disabled }
 					onClick={ onClick }
 				>

package/src/page-list/edit.js

@@ -338,6 +338,7 @@ export default function PageListEdit( {
 						<p>{ convertDescription }</p>
 						<Button
 							variant="primary"
+							__experimentalIsFocusable
 							disabled={ ! hasResolvedPages }
 							onClick={ convertToNavigationLinks }
 						>

package/src/post-content/block.json

@@ -11,11 +11,23 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"layout": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"dimensions": {
 			"minHeight": true
 		},
 		"spacing": {
-			"blockGap": true
+			"blockGap": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"color": {
 			"gradients": true,

package/src/post-date/edit.js

@@ -8,7 +8,11 @@ import clsx from 'clsx';
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
-import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
 import {
 	AlignmentControl,
 	BlockControls,
@@ -82,7 +86,9 @@ export default function PostDateEdit( {
 
 	let postDate = date ? (
 		<time dateTime={ dateI18n( 'c', date ) } ref={ setPopoverAnchor }>
-			{ dateI18n( format || siteFormat, date ) }
+			{ format === 'human-diff'
+				? humanTimeDiff( date )
+				: dateI18n( format || siteFormat, date ) }
 		</time>
 	) : (
 		dateLabel

package/src/post-date/index.php

@@ -20,8 +20,14 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID          = $block->context['postId'];
-	$formatted_date   = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+	$post_ID = $block->context['postId'];
+
+	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
+		// translators: %s: human-readable time difference.
+		$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID ) ) );
+	} else {
+		$formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+	}
 	$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
 	$classes          = array();
 
@@ -38,7 +44,12 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	 */
 	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
 		if ( get_the_modified_date( 'Ymdhi', $post_ID ) > get_the_date( 'Ymdhi', $post_ID ) ) {
-			$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+			if ( 'human-diff' === $attributes['format'] ) {
+				// translators: %s: human-readable time difference.
+				$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) );
+			} else {
+				$formatted_date = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+			}
 			$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
 			$classes[]        = 'wp-block-post-date__modified-date';
 		} else {

package/src/pullquote/block.json

@@ -26,6 +26,13 @@
 	"supports": {
 		"anchor": true,
 		"align": [ "left", "right", "wide", "full" ],
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"background": true,
@@ -35,6 +42,12 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"__experimentalDefaultControls": {
+				"minHeight": false
+			}
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/query/edit/inspector-controls/create-new-post-link.js

@@ -1,23 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
-const CreateNewPostLink = ( {
-	attributes: { query: { postType } = {} } = {},
-} ) => {
-	if ( ! postType ) {
-		return null;
-	}
+const CreateNewPostLink = ( { postType } ) => {
 	const newPostUrl = addQueryArgs( 'post-new.php', {
 		post_type: postType,
 	} );
+
+	const addNewItemLabel = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			return getPostType( postType )?.labels?.add_new_item;
+		},
+		[ postType ]
+	);
 	return (
 		<div className="wp-block-query__create-new-link">
 			{ createInterpolateElement(
-				__( '<a>Add new post</a>' ),
+				'<a>' + addNewItemLabel + '</a>',
 				// eslint-disable-next-line jsx-a11y/anchor-has-content
 				{ a: <a href={ newPostUrl } /> }
 			) }

package/src/query/edit/inspector-controls/index.js

@@ -131,9 +131,11 @@ export default function QueryInspectorControls( props ) {
 
 	return (
 		<>
-			<BlockInfo>
-				<CreateNewPostLink { ...props } />
-			</BlockInfo>
+			{ !! postType && (
+				<BlockInfo>
+					<CreateNewPostLink postType={ postType } />
+				</BlockInfo>
+			) }
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (

package/src/query/editor.scss

@@ -39,7 +39,8 @@
 		position: sticky;
 		top: 0;
 		padding: $grid-unit-20 0;
-		margin-bottom: 2px;
+		transform: translateY(- $grid-unit-05); // Offsets the top padding on the modal content container
+		margin-bottom: - $grid-unit-05;
 		z-index: z-index(".block-library-query-pattern__selection-search");
 	}
 }

package/src/query-pagination-next/index.php

@@ -77,7 +77,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		) ) {
 			$p->set_attribute( 'data-wp-key', 'query-pagination-next' );
 			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
-			$p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' );
 			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
 			$content = $p->get_updated_html();
 		}

package/src/query-pagination-previous/index.php

@@ -63,7 +63,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 		) ) {
 			$p->set_attribute( 'data-wp-key', 'query-pagination-previous' );
 			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
-			$p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' );
 			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
 			$content = $p->get_updated_html();
 		}

package/src/quote/block.json

@@ -29,6 +29,19 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
+		"dimensions": {
+			"minHeight": true,
+			"__experimentalDefaultControls": {
+				"minHeight": false
+			}
+		},
 		"__experimentalOnEnter": true,
 		"__experimentalOnMerge": true,
 		"typography": {

package/src/search/index.php

@@ -191,8 +191,8 @@ function render_block_core_search( $attributes ) {
 		 data-wp-interactive="core/search"'
 		. $form_context .
 		'data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
-		 data-wp-on--keydown="actions.handleSearchKeydown"
-		 data-wp-on--focusout="actions.handleSearchFocusout"
+		 data-wp-on-async--keydown="actions.handleSearchKeydown"
+		 data-wp-on-async--focusout="actions.handleSearchFocusout"
 		';
 	}
 

package/src/site-logo/index.php

@@ -159,6 +159,8 @@ add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' );
  *
  * @since 5.8.0
  *
+ * @global array $_ignore_site_logo_changes
+ *
  * @param array $old_value Previous theme mod settings.
  * @param array $value     Updated theme mod settings.
  */
@@ -179,6 +181,8 @@ function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
  * Deletes the site logo when all theme mods are being removed.
  *
  * @since 5.8.0
+ *
+ * @global array $_ignore_site_logo_changes
  */
 function _delete_site_logo_on_remove_theme_mods() {
 	global $_ignore_site_logo_changes;
@@ -211,6 +215,8 @@ add_action( 'setup_theme', '_delete_site_logo_on_remove_custom_logo_on_setup_the
  * Removes the custom_logo theme-mod when the site_logo option gets deleted.
  *
  * @since 5.9.0
+ *
+ * @global array $_ignore_site_logo_changes
  */
 function _delete_custom_logo_on_remove_site_logo() {
 	global $_ignore_site_logo_changes;

package/src/social-links/test/edit.native.js

@@ -9,6 +9,8 @@ import {
 	initializeEditor,
 	within,
 	getBlock,
+	screen,
+	triggerBlockListLayout,
 	waitFor,
 	waitForModalVisible,
 } from 'test/helpers';
@@ -33,7 +35,7 @@ afterAll( () => {
 
 describe( 'Social links block', () => {
 	it( 'inserts block with the default icons and the WordPress link set as active', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 
 		// Add block
 		await addBlock( screen, 'Social Icons' );
@@ -65,7 +67,7 @@ describe( 'Social links block', () => {
 	} );
 
 	it( 'shows active links correctly when not selected', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 
 		// Add Social Icons block
 		await addBlock( screen, 'Social Icons' );
@@ -105,7 +107,7 @@ describe( 'Social links block', () => {
 	} );
 
 	it( 'shows the social links bottom sheet when tapping on the inline appender', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 
 		// Add block
 		await addBlock( screen, 'Social Icons' );
@@ -154,8 +156,42 @@ describe( 'Social links block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( 'shows only the social link blocks when tapping on the inline appender', async () => {
+		await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Social Icons' );
+
+		// Get block
+		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
+		fireEvent.press( socialLinksBlock );
+		await triggerBlockListLayout( socialLinksBlock );
+
+		// Open the links bottom sheet
+		const appenderButton =
+			within( socialLinksBlock ).getByTestId( 'appender-button' );
+		fireEvent.press( appenderButton );
+
+		// Find a social link in the inserter
+		const inserterList = screen.getByTestId( 'InserterUI-Blocks' );
+
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( inserterList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		// Check the Paragraph core block is not in the list
+		expect(
+			within( inserterList ).queryByLabelText( 'Paragraph block' )
+		).toBeNull();
+	} );
+
 	it( 'shows the ghost placeholder when no icon is active', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 		const { getByLabelText } = screen;
 
 		// Add block
@@ -201,7 +237,7 @@ describe( 'Social links block', () => {
 	} );
 
 	it( "should set a icon's URL", async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 		await addBlock( screen, 'Social Icons' );
 		fireEvent.press( screen.getByLabelText( 'Facebook social icon' ) );
 		fireEvent.press( screen.getByLabelText( 'Add link to Facebook' ) );

package/src/template-part/edit/title-modal.js

@@ -43,8 +43,8 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 						<Button
 							variant="primary"
 							type="submit"
+							__experimentalIsFocusable
 							disabled={ ! title.length }
-							aria-disabled={ ! title.length }
 						>
 							{ __( 'Create' ) }
 						</Button>

package/src/verse/block.json

@@ -21,6 +21,13 @@
 	},
 	"supports": {
 		"anchor": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -29,6 +36,12 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"__experimentalDefaultControls": {
+				"minHeight": false
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,