@wordpress/block-library 9.1.0 → 9.2.0

package/src/image/style.scss

@@ -1,4 +1,9 @@
 .wp-block-image {
+
+	a {
+		display: inline-block;
+	}
+
 	img {
 		height: auto;
 		max-width: 100%;
@@ -27,6 +32,11 @@
 		text-align: center;
 	}
 
+	&.alignfull a,
+	&.alignwide a {
+		width: 100%;
+	}
+
 	&.alignfull img,
 	&.alignwide img {
 		height: auto;
@@ -78,7 +88,7 @@
 	// Supply caption styles to images, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 

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/index.php

@@ -29,28 +29,78 @@ function render_block_core_media_text( $attributes, $content ) {
 		return $content;
 	}
 
-	$image_tag = '<figure class="wp-block-media-text__media"><img>';
-	$content   = preg_replace( '/<figure\s+class="wp-block-media-text__media">/', $image_tag, $content );
+	$media_tag_processor   = new WP_HTML_Tag_Processor( $content );
+	$wrapping_figure_query = array(
+		'tag_name'   => 'figure',
+		'class_name' => 'wp-block-media-text__media',
+	);
+	$has_media_on_right    = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
+	$image_fill            = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
+	$focal_point           = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
+	$unique_id             = 'wp-block-media-text__media-' . wp_unique_id();
 
-	$processor = new WP_HTML_Tag_Processor( $content );
-	if ( isset( $attributes['imageFill'] ) && $attributes['imageFill'] ) {
-		$position = '50% 50%';
-		if ( isset( $attributes['focalPoint'] ) ) {
-			$position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+	if ( $has_media_on_right ) {
+		// Loop through all the figure tags and set a bookmark on the last figure tag.
+		while ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
+			$media_tag_processor->set_bookmark( 'last_figure' );
+		}
+		if ( $media_tag_processor->has_bookmark( 'last_figure' ) ) {
+			$media_tag_processor->seek( 'last_figure' );
+			if ( $image_fill ) {
+				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
+			} else {
+				// Insert a unique ID to identify the figure tag.
+				$media_tag_processor->set_attribute( 'id', $unique_id );
+			}
+		}
+	} else {
+		if ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
+			if ( $image_fill ) {
+				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
+			} else {
+				// Insert a unique ID to identify the figure tag.
+				$media_tag_processor->set_attribute( 'id', $unique_id );
+			}
 		}
-		$processor->next_tag( 'figure' );
-		$processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' );
-	}
-	$processor->next_tag( 'img' );
-	$media_size_slug = 'full';
-	if ( isset( $attributes['mediaSizeSlug'] ) ) {
-		$media_size_slug = $attributes['mediaSizeSlug'];
 	}
-	$processor->set_attribute( 'src', esc_url( $current_featured_image ) );
-	$processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
-	$processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
 
-	$content = $processor->get_updated_html();
+	$content = $media_tag_processor->get_updated_html();
+
+	// If the image is not set to fill, add the image tag inside the figure tag,
+	// and update the image attributes in order to display the featured image.
+	if ( ! $image_fill ) {
+		$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
+		$image_tag       = '<img class="wp-block-media-text__featured_image">';
+		$content         = preg_replace(
+			'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
+			'$1' . $image_tag,
+			$content
+		);
+
+		$image_tag_processor = new WP_HTML_Tag_Processor( $content );
+		if ( $image_tag_processor->next_tag(
+			array(
+				'tag_name' => 'figure',
+				'id'       => $unique_id,
+			)
+		) ) {
+			// The ID is only used to ensure that the correct figure tag is selected,
+			// and can now be removed.
+			$image_tag_processor->remove_attribute( 'id' );
+			if ( $image_tag_processor->next_tag(
+				array(
+					'tag_name'   => 'img',
+					'class_name' => 'wp-block-media-text__featured_image',
+				)
+			) ) {
+				$image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) );
+				$image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+				$image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
+
+				$content = $image_tag_processor->get_updated_html();
+			}
+		}
+	}
 
 	return $content;
 }

package/src/media-text/style.scss

@@ -68,6 +68,10 @@
 	/*!rtl:end:ignore*/
 }
 
+.wp-block-media-text__media a {
+	display: inline-block;
+}
+
 .wp-block-media-text__media img,
 .wp-block-media-text__media video {
 	height: auto;

package/src/navigation/index.php

@@ -519,9 +519,11 @@ class WP_Navigation_Block_Renderer {
 			';
 		}
 
+		$overlay_inline_styles = esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) );
+
 		return sprintf(
 			'<button aria-haspopup="dialog" %3$s class="%6$s" %10$s>%8$s</button>
-				<div class="%5$s" style="%7$s" id="%1$s" %11$s>
+				<div class="%5$s" %7$s id="%1$s" %11$s>
 					<div class="wp-block-navigation__responsive-close" tabindex="-1">
 						<div class="wp-block-navigation__responsive-dialog" %12$s>
 							<button %4$s class="wp-block-navigation__responsive-container-close" %13$s>%9$s</button>
@@ -537,7 +539,7 @@ class WP_Navigation_Block_Renderer {
 			$toggle_aria_label_close,
 			esc_attr( implode( ' ', $responsive_container_classes ) ),
 			esc_attr( implode( ' ', $open_button_classes ) ),
-			esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
+			( ! empty( $overlay_inline_styles ) ) ? "style=\"$overlay_inline_styles\"" : '',
 			$toggle_button_content,
 			$toggle_close_button_content,
 			$open_button_directives,
@@ -826,7 +828,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-async--focusout', 'actions.handleMenuFocusout' );
+		$tags->set_attribute( 'data-wp-on--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

package/src/navigation/style.scss

@@ -300,6 +300,7 @@ button.wp-block-navigation-item__content {
 	color: currentColor;
 	font-size: inherit;
 	font-family: inherit;
+	letter-spacing: inherit;
 	line-height: inherit;
 	font-style: inherit;
 	font-weight: inherit;

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

@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Paragraph block should be able to use a prefix to create a Heading block 1`] = `
+"<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading"></h1>
+<!-- /wp:heading -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a List block 1`] = `
+"<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a numbered List block 1`] = `
+"<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
 exports[`Paragraph block should prevent deleting the first Paragraph block when pressing backspace at the start 1`] = `
 "<!-- wp:paragraph -->
 <p>A quick brown fox jumps over the lazy dog.</p>

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

@@ -90,6 +90,105 @@ describe( 'Paragraph block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( 'should be able to use a prefix to create a Heading block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '# ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+
+		const headingBlock = getBlock( screen, 'Heading' );
+		expect( headingBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a Quote block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '> ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const quoteBlock = getBlock( screen, 'Quote' );
+		await triggerBlockListLayout( quoteBlock );
+
+		expect( quoteBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a List block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '- ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const listBlock = getBlock( screen, 'List' );
+		await triggerBlockListLayout( listBlock );
+
+		expect( listBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a numbered List block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '1. ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 2,
+			finalSelectionEnd: 2,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const listBlock = getBlock( screen, 'List' );
+		await triggerBlockListLayout( listBlock );
+
+		expect( listBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should bold text', async () => {
 		// Arrange
 		const screen = await initializeEditor();

package/src/post-date/index.php

@@ -44,7 +44,7 @@ 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 ) ) {
-			if ( 'human-diff' === $attributes['format'] ) {
+			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, 'modified' ) ) );
 			} else {

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/reset.scss

@@ -8,19 +8,18 @@
 // We use :where to keep specificity minimal.
 // https://css-tricks.com/almanac/selectors/w/where/
 :where(.editor-styles-wrapper) {
-	/**
-	* The following styles revert to the browser defaults overriding the WPAdmin styles.
-	* This is only needed while the block editor is not being loaded in an iframe.
-	*/
-	font-family: serif; // unfortunately initial doesn't work for font-family.
-	font-size: initial;
-	line-height: initial;
-	color: initial;
+	// The following styles revert to the browser defaults overriding the WPAdmin styles.
+	html & {
+		font-family: serif; // unfortunately initial doesn't work for font-family.
+		font-size: initial;
+		line-height: initial;
+		color: initial;
 
-	// Many themes with white backgrounds load editor styles but fail to also provide
-	// an explicit white background color, assuming a white editing canvas.
-	// So to match browser defaults, we provide a white default here as well.
-	background: #fff;
+		// Many themes with white backgrounds load editor styles but fail to also provide
+		// an explicit white background color, assuming a white editing canvas.
+		// So to match browser defaults, we provide a white default here as well.
+		background: #fff;
+	}
 
 	.wp-align-wrapper {
 		max-width: $content-width;

package/src/site-tagline/block.json

@@ -44,6 +44,7 @@
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/site-title/block.json

@@ -55,6 +55,7 @@
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

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/table/theme.scss

@@ -6,7 +6,7 @@
 		word-break: normal;
 	}
 
-	figcaption {
+	:where(figcaption) {
 		@include caption-style-theme();
 	}
 }

package/src/table-of-contents/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/table-of-contents",
 	"title": "Table of Contents",
-	"category": "layout",
+	"category": "design",
 	"description": "Summarize your post with a list of headings. Add HTML anchors to Heading blocks to link them here.",
 	"keywords": [ "document outline", "summary" ],
 	"textdomain": "default",

package/src/template-part/index.php

@@ -161,7 +161,7 @@ function render_block_core_template_part( $attributes ) {
 	global $wp_embed;
 	$content = $wp_embed->autoembed( $content );
 
-	if ( empty( $attributes['tagName'] ) ) {
+	if ( empty( $attributes['tagName'] ) || tag_escape( $attributes['tagName'] ) !== $attributes['tagName'] ) {
 		$area_tag = 'div';
 		if ( $area_definition && isset( $area_definition['area_tag'] ) ) {
 			$area_tag = $area_definition['area_tag'];

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 }

package/src/verse/block.json

@@ -51,6 +51,7 @@
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/video/style.scss

@@ -19,7 +19,7 @@
 	// Supply caption styles to videos, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 }

package/src/video/theme.scss

@@ -1,4 +1,4 @@
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
 	@include caption-style-theme();
 }