@wordpress/block-library 9.1.0 → 9.3.0

package/src/query/edit/query-toolbar.js

@@ -5,10 +5,8 @@ import {
 	ToolbarGroup,
 	Dropdown,
 	ToolbarButton,
-	BaseControl,
 	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 
@@ -25,10 +23,6 @@ export default function QueryToolbar( {
 	clientId,
 } ) {
 	const hasPatterns = !! usePatterns( clientId, name ).length;
-	const maxPageInputId = useInstanceId(
-		QueryToolbar,
-		'blocks-query-pagination-max-page-input'
-	);
 
 	return (
 		<>
@@ -45,75 +39,69 @@ export default function QueryToolbar( {
 						) }
 						renderContent={ () => (
 							<>
-								<BaseControl>
-									<NumberControl
-										__unstableInputWidth="60px"
-										label={ __( 'Items per Page' ) }
-										labelPosition="edge"
-										min={ 1 }
-										max={ 100 }
-										onChange={ ( value ) => {
-											if (
-												isNaN( value ) ||
-												value < 1 ||
-												value > 100
-											) {
-												return;
-											}
-											setQuery( {
-												perPage: value,
-											} );
-										} }
-										step="1"
-										value={ query.perPage }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-								<BaseControl>
-									<NumberControl
-										__unstableInputWidth="60px"
-										label={ __( 'Offset' ) }
-										labelPosition="edge"
-										min={ 0 }
-										max={ 100 }
-										onChange={ ( value ) => {
-											if (
-												isNaN( value ) ||
-												value < 0 ||
-												value > 100
-											) {
-												return;
-											}
-											setQuery( { offset: value } );
-										} }
-										step="1"
-										value={ query.offset }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-								<BaseControl
-									id={ maxPageInputId }
+								<NumberControl
+									__unstableInputWidth="60px"
+									className="block-library-query-toolbar__popover-number-control"
+									label={ __( 'Items per Page' ) }
+									labelPosition="edge"
+									min={ 1 }
+									max={ 100 }
+									onChange={ ( value ) => {
+										if (
+											isNaN( value ) ||
+											value < 1 ||
+											value > 100
+										) {
+											return;
+										}
+										setQuery( {
+											perPage: value,
+										} );
+									} }
+									step="1"
+									value={ query.perPage }
+									isDragEnabled={ false }
+								/>
+								<NumberControl
+									__unstableInputWidth="60px"
+									className="block-library-query-toolbar__popover-number-control"
+									label={ __( 'Offset' ) }
+									labelPosition="edge"
+									min={ 0 }
+									max={ 100 }
+									onChange={ ( value ) => {
+										if (
+											isNaN( value ) ||
+											value < 0 ||
+											value > 100
+										) {
+											return;
+										}
+										setQuery( { offset: value } );
+									} }
+									step="1"
+									value={ query.offset }
+									isDragEnabled={ false }
+								/>
+								<NumberControl
+									__unstableInputWidth="60px"
+									className="block-library-query-toolbar__popover-number-control"
+									label={ __( 'Max pages to show' ) }
+									labelPosition="edge"
+									min={ 0 }
+									onChange={ ( value ) => {
+										if ( isNaN( value ) || value < 0 ) {
+											return;
+										}
+										setQuery( { pages: value } );
+									} }
+									step="1"
+									value={ query.pages }
+									isDragEnabled={ false }
 									help={ __(
 										'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
 									) }
-								>
-									<NumberControl
-										id={ maxPageInputId }
-										__unstableInputWidth="60px"
-										label={ __( 'Max page to show' ) }
-										labelPosition="edge"
-										min={ 0 }
-										onChange={ ( value ) => {
-											if ( isNaN( value ) || value < 0 ) {
-												return;
-											}
-											setQuery( { pages: value } );
-										} }
-										step="1"
-										value={ query.pages }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
+								/>
 							</>
 						) }
 					/>

package/src/query/editor.scss

@@ -1,5 +1,9 @@
 .block-library-query-toolbar__popover .components-popover__content {
 	min-width: 230px;
+
+	.block-library-query-toolbar__popover-number-control {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .wp-block-query__create-new-link {

package/src/query/index.js

@@ -19,6 +19,46 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {
+		viewportWidth: 650,
+		attributes: {
+			namespace: 'core/posts-list',
+			query: {
+				perPage: 4,
+				pages: 1,
+				offset: 0,
+				postType: 'post',
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				sticky: 'exclude',
+				inherit: false,
+			},
+		},
+		innerBlocks: [
+			{
+				name: 'core/post-template',
+				attributes: {
+					layout: {
+						type: 'grid',
+						columnCount: 2,
+					},
+				},
+				innerBlocks: [
+					{
+						name: 'core/post-title',
+					},
+					{
+						name: 'core/post-date',
+					},
+					{
+						name: 'core/post-excerpt',
+					},
+				],
+			},
+		],
+	},
 	save,
 	variations,
 	deprecated,

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

@@ -42,13 +42,18 @@ const SocialLinkURLPopover = ( {
 	return (
 		<URLPopover
 			anchor={ popoverAnchor }
-			onClose={ () => setPopover( false ) }
+			aria-label={ __( 'Edit social link' ) }
+			onClose={ () => {
+				setPopover( false );
+				popoverAnchor?.focus();
+			} }
 		>
 			<form
 				className="block-editor-url-popover__link-editor"
 				onSubmit={ ( event ) => {
 					event.preventDefault();
 					setPopover( false );
+					popoverAnchor?.focus();
 				} }
 			>
 				<div className="block-editor-url-input">
@@ -136,9 +141,9 @@ const SocialLinkEdit = ( {
 					<PanelRow>
 						<TextControl
 							__nextHasNoMarginBottom
-							label={ __( 'Link text' ) }
+							label={ __( 'Text' ) }
 							help={ __(
-								'The link text is visible when enabled from the parent Social Icons block.'
+								'The text is visible when enabled from the parent Social Icons block.'
 							) }
 							value={ label }
 							onChange={ ( value ) =>
@@ -162,6 +167,7 @@ const SocialLinkEdit = ( {
 					className="wp-block-social-link-anchor"
 					ref={ setPopoverAnchor }
 					onClick={ () => setPopover( true ) }
+					aria-haspopup="dialog"
 				>
 					<IconComponent />
 					<span

package/src/social-links/style.scss

@@ -107,7 +107,7 @@
 }
 
 // Provide colors for a range of icons.
-.wp-block-social-links:not(.is-style-logos-only) {
+:where(.wp-block-social-links:not(.is-style-logos-only)) {
 	// Generic items such as mail, feed, etc.
 	@import "../social-link/socials-with-bg.scss";
 }
@@ -116,7 +116,7 @@
 // The specificity for this selector has not been reduced to 0-1-0 as per
 // global styles variation selectors as the lack of background should be
 // enforced for this block style.
-.wp-block-social-links.is-style-logos-only {
+:where(.wp-block-social-links.is-style-logos-only) {
 	.wp-social-link {
 		background: none;
 

package/src/table/edit.js

@@ -16,7 +16,6 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -41,7 +40,6 @@ import {
 	tableRowDelete,
 	table,
 } from '@wordpress/icons';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -57,6 +55,7 @@ import {
 	toggleSection,
 	isEmptyTableSection,
 } from './state';
+import { Caption } from '../utils/caption';
 
 const ALIGNMENT_CONTROLS = [
 	{
@@ -98,7 +97,7 @@ function TableEdit( {
 	insertBlocksAfter,
 	isSelected,
 } ) {
-	const { hasFixedLayout, caption, head, foot } = attributes;
+	const { hasFixedLayout, head, foot } = attributes;
 	const [ initialRowCount, setInitialRowCount ] = useState( 2 );
 	const [ initialColumnCount, setInitialColumnCount ] = useState( 2 );
 	const [ selectedCell, setSelectedCell ] = useState();
@@ -523,27 +522,7 @@ function TableEdit( {
 					{ renderedSections }
 				</table>
 			) }
-			{ ! isEmpty && (
-				<RichText
-					identifier="caption"
-					tagName="figcaption"
-					className={ __experimentalGetElementClassName( 'caption' ) }
-					aria-label={ __( 'Table caption text' ) }
-					placeholder={ __( 'Add caption' ) }
-					value={ caption }
-					onChange={ ( value ) =>
-						setAttributes( { caption: value } )
-					}
-					// Deselect the selected table cell when the caption is focused.
-					onFocus={ () => setSelectedCell() }
-					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
-					}
-				/>
-			) }
-			{ isEmpty && (
+			{ isEmpty ? (
 				<Placeholder
 					label={ __( 'Table' ) }
 					icon={ <BlockIcon icon={ icon } showColors /> }
@@ -582,6 +561,14 @@ function TableEdit( {
 						</Button>
 					</form>
 				</Placeholder>
+			) : (
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Table caption text' ) }
+				/>
 			) }
 		</figure>
 	);

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

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

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

@@ -6,6 +6,7 @@ import { useLayoutEffect, useEffect, useRef } from '@wordpress/element';
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Returns whether the current user can edit the given entity.
@@ -46,7 +47,6 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 		if ( hasUploadStarted.current ) {
 			return;
 		}
-
 		if (
 			! latestArgs.current.url ||
 			! isBlobURL( latestArgs.current.url )
@@ -84,3 +84,16 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 		} );
 	}, [ getSettings ] );
 }
+
+export function useToolsPanelDropdownMenuProps() {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+}

package/src/verse/block.json

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

package/src/video/block.json

@@ -56,6 +56,10 @@
 			"attribute": "preload",
 			"default": "metadata"
 		},
+		"blob": {
+			"type": "string",
+			"__experimentalRole": "local"
+		},
 		"src": {
 			"type": "string",
 			"source": "attribute",

package/src/video/edit.js

@@ -25,7 +25,7 @@ import {
 	MediaReplaceFlow,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
@@ -74,10 +74,10 @@ function VideoEdit( {
 	const videoPlayer = useRef();
 	const posterImageButton = useRef();
 	const { id, controls, poster, src, tracks } = attributes;
-	const isTemporaryVideo = ! id && isBlobURL( src );
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
 	useUploadMediaFromBlobURL( {
-		url: src,
+		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
 		onChange: onSelectVideo,
 		onError: onUploadError,
@@ -100,19 +100,28 @@ function VideoEdit( {
 				id: undefined,
 				poster: undefined,
 				caption: undefined,
+				blob: undefined,
 			} );
+			setTemporaryURL();
+			return;
+		}
+
+		if ( isBlobURL( media.url ) ) {
+			setTemporaryURL( media.url );
 			return;
 		}
 
 		// Sets the block's attribute and updates the edit component from the
 		// selected media.
 		setAttributes( {
+			blob: undefined,
 			src: media.url,
 			id: media.id,
 			poster:
 				media.image?.src !== media.icon ? media.image?.src : undefined,
 			caption: media.caption,
 		} );
+		setTemporaryURL();
 	}
 
 	function onSelectURL( newSrc ) {
@@ -125,7 +134,13 @@ function VideoEdit( {
 				onReplace( embedBlock );
 				return;
 			}
-			setAttributes( { src: newSrc, id: undefined, poster: undefined } );
+			setAttributes( {
+				blob: undefined,
+				src: newSrc,
+				id: undefined,
+				poster: undefined,
+			} );
+			setTemporaryURL();
 		}
 	}
 
@@ -135,14 +150,14 @@ function VideoEdit( {
 	}
 
 	const classes = clsx( className, {
-		'is-transient': isTemporaryVideo,
+		'is-transient': !! temporaryURL,
 	} );
 
 	const blockProps = useBlockProps( {
 		className: classes,
 	} );
 
-	if ( ! src ) {
+	if ( ! src && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -264,13 +279,13 @@ function VideoEdit( {
 					<video
 						controls={ controls }
 						poster={ poster }
-						src={ src }
+						src={ src || temporaryURL }
 						ref={ videoPlayer }
 					>
 						<Tracks tracks={ tracks } />
 					</video>
 				</Disabled>
-				{ isTemporaryVideo && <Spinner /> }
+				{ !! temporaryURL && <Spinner /> }
 				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }

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();
 }
 

package/src/video/transforms.js

@@ -20,7 +20,7 @@ const transforms = {
 				// It's already done as part of the `componentDidMount`
 				// in the video block
 				const block = createBlock( 'core/video', {
-					src: createBlobURL( file ),
+					blob: createBlobURL( file ),
 				} );
 				return block;
 			},