@wordpress/block-library 9.0.0 → 9.0.2

package/src/buttons/test/__snapshots__/edit.native.js.snap

@@ -2,51 +2,69 @@
 
 exports[`Buttons block color customization sets a background color 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-amber"} /--></div>
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-amber"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-background-color has-background wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block color customization sets a custom gradient background color 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"gradient":"linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"}}} /--></div>
+<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"gradient":"linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="" style="background:linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block color customization sets a gradient background color 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} /--></div>
+<div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block color customization sets a text color 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"textColor":"pale-pink"} /--></div>
+<div class="wp-block-buttons"><!-- wp:button {"textColor":"pale-pink"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-pale-pink-color has-text-color wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items center option 1`] = `
 "<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items left option 1`] = `
 "<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items right option 1`] = `
 "<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block when a button is shown adds another button using the inline appender 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
+<!-- /wp:button -->
 
-<!-- wp:button /--></div>
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->
 
 <!-- wp:paragraph -->
@@ -56,7 +74,9 @@ exports[`Buttons block when a button is shown adds another button using the inli
 
 exports[`Buttons block when a button is shown adds another button using the inserter 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
+<!-- /wp:button -->
 
 <!-- wp:button -->
 <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Hello!</a></div>

package/src/buttons/test/edit.native.js

@@ -21,7 +21,9 @@ import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
 const BUTTONS_HTML = `<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->`;
 
 beforeAll( () => {
@@ -248,10 +250,9 @@ describe( 'Buttons block', () => {
 			'Justify items right',
 		].forEach( ( justificationOption ) =>
 			it( `sets ${ justificationOption } option`, async () => {
-				const initialHtml = `<!-- wp:buttons -->
-				<div class="wp-block-buttons"><!-- wp:button /--></div>
-				<!-- /wp:buttons -->`;
-				const screen = await initializeEditor( { initialHtml } );
+				const screen = await initializeEditor( {
+					initialHtml: BUTTONS_HTML,
+				} );
 
 				const [ block ] = await screen.findAllByLabelText(
 					/Buttons Block\. Row 1/

package/src/embed/variations.js

@@ -259,14 +259,6 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?scribd\.com\/.+/i ],
 		attributes: { providerNameSlug: 'scribd', responsive: true },
 	},
-	{
-		name: 'slideshare',
-		title: 'Slideshare',
-		icon: embedContentIcon,
-		description: __( 'Embed Slideshare content.' ),
-		patterns: [ /^https?:\/\/(.+?\.)?slideshare\.net\/.+/i ],
-		attributes: { providerNameSlug: 'slideshare', responsive: true },
-	},
 	{
 		name: 'smugmug',
 		title: 'SmugMug',

package/src/gallery/v1/gallery-image.js

@@ -222,6 +222,8 @@ class GalleryImage extends Component {
 						onClick={ isFirstItem ? undefined : onMoveBackward }
 						label={ __( 'Move image backward' ) }
 						aria-disabled={ isFirstItem }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 					<Button
@@ -229,6 +231,8 @@ class GalleryImage extends Component {
 						onClick={ isLastItem ? undefined : onMoveForward }
 						label={ __( 'Move image forward' ) }
 						aria-disabled={ isLastItem }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 				</ButtonGroup>
@@ -237,12 +241,16 @@ class GalleryImage extends Component {
 						icon={ edit }
 						onClick={ this.onEdit }
 						label={ __( 'Replace image' ) }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 					<Button
 						icon={ closeSmall }
 						onClick={ onRemove }
 						label={ __( 'Remove image' ) }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 				</ButtonGroup>

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/block-library'
 	);

package/src/media-text/style.scss

@@ -15,27 +15,28 @@
 }
 
 .wp-block-media-text.is-vertically-aligned-top {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: start;
 	}
 }
+
 .wp-block-media-text,
 .wp-block-media-text.is-vertically-aligned-center {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: center;
 	}
 }
 
 .wp-block-media-text.is-vertically-aligned-bottom {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: end;
 	}
 }
 
-.wp-block-media-text .wp-block-media-text__media {
+.wp-block-media-text > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
@@ -43,7 +44,7 @@
 	margin: 0;
 }
 
-.wp-block-media-text .wp-block-media-text__content {
+.wp-block-media-text > .wp-block-media-text__content {
 	direction: ltr;
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
@@ -53,14 +54,14 @@
 	word-break: break-word;
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
 	grid-row: 1;
 	/*!rtl:end:ignore*/
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
@@ -75,18 +76,18 @@
 	vertical-align: middle;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
 	height: 100%;
 	min-height: 250px;
 	background-size: cover;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media > a {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media > a {
 	display: block;
 	height: 100%;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media img {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media img {
 	// The image is visually hidden but accessible to assistive technologies.
 	position: absolute;
 	width: 1px;
@@ -107,11 +108,11 @@
 @media (max-width: #{ ($break-small) }) {
 	.wp-block-media-text.is-stacked-on-mobile {
 		grid-template-columns: 100% !important;
-		.wp-block-media-text__media {
+		> .wp-block-media-text__media {
 			grid-column: 1;
 			grid-row: 1;
 		}
-		.wp-block-media-text__content {
+		> .wp-block-media-text__content {
 			grid-column: 1;
 			grid-row: 2;
 		}

package/src/navigation/editor.scss

@@ -468,10 +468,6 @@ $color-control-label-height: 20px;
 	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 }
 
-.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
-	right: $sidebar-width;
-}
-
 // When fullscreen.
 .is-fullscreen-mode {
 	.wp-block-navigation__responsive-container.is-menu-open {

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/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/edit.js

@@ -121,6 +121,7 @@ export default function QuoteEdit( {
 					}
 					addLabel={ __( 'Add citation' ) }
 					removeLabel={ __( 'Remove citation' ) }
+					excludeElementClassName
 					className="wp-block-quote__citation"
 					insertBlocksAfter={ insertBlocksAfter }
 					{ ...( ! isWebPlatform ? { textAlign } : {} ) }

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/social-link/edit.js

@@ -6,15 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { DELETE, BACKSPACE } from '@wordpress/keycodes';
-import { useDispatch } from '@wordpress/data';
-
 import {
 	InspectorControls,
 	URLPopover,
 	URLInput,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import {
@@ -36,9 +32,7 @@ const SocialLinkURLPopover = ( {
 	setAttributes,
 	setPopover,
 	popoverAnchor,
-	clientId,
 } ) => {
-	const { removeBlock } = useDispatch( blockEditorStore );
 	return (
 		<URLPopover
 			anchor={ popoverAnchor }
@@ -62,18 +56,6 @@ const SocialLinkURLPopover = ( {
 						label={ __( 'Enter social link' ) }
 						hideLabelFromVision
 						disableSuggestions
-						onKeyDown={ ( event ) => {
-							if (
-								!! url ||
-								event.defaultPrevented ||
-								! [ BACKSPACE, DELETE ].includes(
-									event.keyCode
-								)
-							) {
-								return;
-							}
-							removeBlock( clientId );
-						} }
 					/>
 				</div>
 				<Button
@@ -91,7 +73,6 @@ const SocialLinkEdit = ( {
 	context,
 	isSelected,
 	setAttributes,
-	clientId,
 } ) => {
 	const { url, service, label = '', rel } = attributes;
 	const {
@@ -178,7 +159,6 @@ const SocialLinkEdit = ( {
 						setAttributes={ setAttributes }
 						setPopover={ setPopover }
 						popoverAnchor={ popoverAnchor }
-						clientId={ clientId }
 					/>
 				) }
 			</li>

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/utils/caption.js

@@ -32,6 +32,7 @@ export function Caption( {
 	placeholder = __( 'Add caption' ),
 	label = __( 'Caption text' ),
 	showToolbarButton = true,
+	excludeElementClassName,
 	className,
 	readOnly,
 	tagName = 'figcaption',
@@ -70,6 +71,7 @@ export function Caption( {
 		},
 		[ isCaptionEmpty ]
 	);
+
 	return (
 		<>
 			{ showToolbarButton && (
@@ -96,7 +98,9 @@ export function Caption( {
 						tagName={ tagName }
 						className={ clsx(
 							className,
-							__experimentalGetElementClassName( 'caption' )
+							excludeElementClassName
+								? ''
+								: __experimentalGetElementClassName( 'caption' )
 						) }
 						ref={ ref }
 						aria-label={ label }