@wordpress/block-library 9.2.0 → 9.4.0

package/src/query/variations.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { postList } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -14,53 +13,12 @@ import {
 	imageDateTitle,
 } from './icons';
 
-const QUERY_DEFAULT_ATTRIBUTES = {
-	query: {
-		perPage: 3,
-		pages: 0,
-		offset: 0,
-		postType: 'post',
-		order: 'desc',
-		orderBy: 'date',
-		author: '',
-		search: '',
-		exclude: [],
-		sticky: '',
-		inherit: false,
-	},
-};
-
 const variations = [
-	{
-		name: 'posts-list',
-		title: __( 'Posts List' ),
-		description: __(
-			'Display a list of your most recent posts, excluding sticky posts.'
-		),
-		icon: postList,
-		attributes: {
-			namespace: 'core/posts-list',
-			query: {
-				perPage: 4,
-				pages: 1,
-				offset: 0,
-				postType: 'post',
-				order: 'desc',
-				orderBy: 'date',
-				author: '',
-				search: '',
-				sticky: 'exclude',
-				inherit: false,
-			},
-		},
-		scope: [ 'inserter' ],
-		isActive: [ 'namespace', 'query.postType' ],
-	},
 	{
 		name: 'title-date',
 		title: __( 'Title & Date' ),
 		icon: titleDate,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
@@ -76,7 +34,7 @@ const variations = [
 		name: 'title-excerpt',
 		title: __( 'Title & Excerpt' ),
 		icon: titleExcerpt,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
@@ -92,7 +50,7 @@ const variations = [
 		name: 'title-date-excerpt',
 		title: __( 'Title, Date, & Excerpt' ),
 		icon: titleDateExcerpt,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
@@ -112,7 +70,7 @@ const variations = [
 		name: 'image-date-title',
 		title: __( 'Image, Date, & Title' ),
 		icon: imageDateTitle,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',

package/src/query-pagination-numbers/edit.js

@@ -51,6 +51,7 @@ export default function QueryPaginationNumbersEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Number of links' ) }
 						help={ __(
 							'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'

package/src/query-title/edit.js

@@ -13,11 +13,14 @@ import {
 	useBlockProps,
 	Warning,
 	HeadingLevelDropdown,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useArchiveLabel } from './use-archive-label';
 
 const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
@@ -25,17 +28,7 @@ export default function QueryTitleEdit( {
 	attributes: { type, level, textAlign, showPrefix, showSearchTerm },
 	setAttributes,
 } ) {
-	const { archiveTypeTitle, archiveNameLabel } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const {
-			__experimentalArchiveTitleNameLabel,
-			__experimentalArchiveTitleTypeLabel,
-		} = getSettings();
-		return {
-			archiveTypeTitle: __experimentalArchiveTitleTypeLabel,
-			archiveNameLabel: __experimentalArchiveTitleNameLabel,
-		};
-	} );
+	const { archiveTypeLabel, archiveNameLabel } = useArchiveLabel();
 
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
@@ -55,20 +48,20 @@ export default function QueryTitleEdit( {
 	let titleElement;
 	if ( type === 'archive' ) {
 		let title;
-		if ( archiveTypeTitle ) {
+		if ( archiveTypeLabel ) {
 			if ( showPrefix ) {
 				if ( archiveNameLabel ) {
 					title = sprintf(
 						/* translators: 1: Archive type title e.g: "Category", 2: Label of the archive e.g: "Shoes" */
 						__( '%1$s: %2$s' ),
-						archiveTypeTitle,
+						archiveTypeLabel,
 						archiveNameLabel
 					);
 				} else {
 					title = sprintf(
 						/* translators: %s: Archive type title e.g: "Category", "Tag"... */
 						__( '%s: Name' ),
-						archiveTypeTitle
+						archiveTypeLabel
 					);
 				}
 			} else if ( archiveNameLabel ) {
@@ -77,7 +70,7 @@ export default function QueryTitleEdit( {
 				title = sprintf(
 					/* translators: %s: Archive type title e.g: "Category", "Tag"... */
 					__( '%s name' ),
-					archiveTypeTitle
+					archiveTypeLabel
 				);
 			}
 		} else {

package/src/query-title/use-archive-label.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+export function useArchiveLabel() {
+	const templateSlug = useSelect( ( select ) => {
+		// @wordpress/block-library should not depend on @wordpress/editor.
+		// Blocks can be loaded into a *non-post* block editor, so to avoid
+		// declaring @wordpress/editor as a dependency, we must access its
+		// store by string.
+		// The solution here is to split WP specific blocks from generic blocks.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const { getCurrentPostId, getCurrentPostType, getCurrentTemplateId } =
+			select( 'core/editor' );
+		const currentPostType = getCurrentPostType();
+		const templateId =
+			getCurrentTemplateId() ||
+			( currentPostType === 'wp_template' ? getCurrentPostId() : null );
+
+		return templateId
+			? select( coreStore ).getEditedEntityRecord(
+					'postType',
+					'wp_template',
+					templateId
+			  )?.slug
+			: null;
+	}, [] );
+	const taxonomyMatches = templateSlug?.match(
+		/^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/
+	);
+	let taxonomy;
+	let term;
+	let isAuthor = false;
+	let authorSlug;
+	if ( taxonomyMatches ) {
+		// If is for a all taxonomies of a type
+		if ( taxonomyMatches[ 1 ] ) {
+			taxonomy = taxonomyMatches[ 2 ]
+				? taxonomyMatches[ 2 ]
+				: taxonomyMatches[ 1 ];
+		}
+		// If is for a all taxonomies of a type
+		else if ( taxonomyMatches[ 3 ] ) {
+			taxonomy = taxonomyMatches[ 6 ]
+				? taxonomyMatches[ 6 ]
+				: taxonomyMatches[ 4 ];
+			term = taxonomyMatches[ 7 ];
+		}
+		taxonomy = taxonomy === 'tag' ? 'post_tag' : taxonomy;
+
+		//getTaxonomy( 'category' );
+		//wp.data.select('core').getEntityRecords( 'taxonomy', 'category', {slug: 'newcat'} );
+	} else {
+		const authorMatches = templateSlug?.match( /^(author)$|^author-(.+)$/ );
+		if ( authorMatches ) {
+			isAuthor = true;
+			if ( authorMatches[ 2 ] ) {
+				authorSlug = authorMatches[ 2 ];
+			}
+		}
+	}
+	return useSelect(
+		( select ) => {
+			const { getEntityRecords, getTaxonomy, getAuthors } =
+				select( coreStore );
+			let archiveTypeLabel;
+			let archiveNameLabel;
+			if ( taxonomy ) {
+				archiveTypeLabel =
+					getTaxonomy( taxonomy )?.labels?.singular_name;
+			}
+			if ( term ) {
+				const records = getEntityRecords( 'taxonomy', taxonomy, {
+					slug: term,
+					per_page: 1,
+				} );
+				if ( records && records[ 0 ] ) {
+					archiveNameLabel = records[ 0 ].name;
+				}
+			}
+			if ( isAuthor ) {
+				archiveTypeLabel = 'Author';
+				if ( authorSlug ) {
+					const authorRecords = getAuthors( { slug: authorSlug } );
+					if ( authorRecords && authorRecords[ 0 ] ) {
+						archiveNameLabel = authorRecords[ 0 ].name;
+					}
+				}
+			}
+			return {
+				archiveTypeLabel,
+				archiveNameLabel,
+			};
+		},
+		[ authorSlug, isAuthor, taxonomy, term ]
+	);
+}

package/src/quote/block.json

@@ -36,6 +36,18 @@
 				"backgroundImage": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"dimensions": {
 			"minHeight": true,
 			"__experimentalDefaultControls": {
@@ -70,7 +82,9 @@
 			"allowEditing": false
 		},
 		"spacing": {
-			"blockGap": true
+			"blockGap": true,
+			"padding": true,
+			"margin": true
 		},
 		"interactivity": {
 			"clientNavigation": true

package/src/search/block.json

@@ -85,6 +85,9 @@
 				"width": true
 			}
 		},
+		"spacing": {
+			"margin": true
+		},
 		"html": false
 	},
 	"editorStyle": "wp-block-search-editor",

package/src/search/editor.scss

@@ -7,7 +7,7 @@
 }
 
 .wp-block-search {
-	.wp-block-search__button {
+	:where(.wp-block-search__button) {
 		height: auto;
 		border-radius: initial;
 		display: flex;

package/src/site-logo/edit.js

@@ -403,7 +403,10 @@ export default function LogoEdit( {
 	} = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const _canUserEdit = canUser( 'update', 'settings' );
+		const _canUserEdit = canUser( 'update', {
+			kind: 'root',
+			name: 'site',
+		} );
 		const siteSettings = _canUserEdit
 			? getEditedEntityRecord( 'root', 'site' )
 			: undefined;

package/src/site-tagline/block.json

@@ -16,7 +16,12 @@
 			"default": 0
 		}
 	},
-	"example": {},
+	"example": {
+		"viewportWidth": 350,
+		"attributes": {
+			"textAlign": "center"
+		}
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,

package/src/site-tagline/edit.js

@@ -29,12 +29,15 @@ export default function SiteTaglineEdit( {
 	const { canUserEdit, tagline } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const canEdit = canUser( 'update', 'settings' );
+		const canEdit = canUser( 'update', {
+			kind: 'root',
+			name: 'site',
+		} );
 		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
 		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
 
 		return {
-			canUserEdit: canUser( 'update', 'settings' ),
+			canUserEdit: canEdit,
 			tagline: canEdit
 				? settings?.description
 				: readOnlySettings?.description,

package/src/site-title/edit.js

@@ -32,7 +32,10 @@ export default function SiteTitleEdit( {
 	const { canUserEdit, title } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const canEdit = canUser( 'update', 'settings' );
+		const canEdit = canUser( 'update', {
+			kind: 'root',
+			name: 'site',
+		} );
 		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
 		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
 

package/src/site-title/index.js

@@ -17,7 +17,12 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
+	example: {
+		viewportWidth: 350,
+		attributes: {
+			textAlign: 'center',
+		},
+	},
 	edit,
 	transforms,
 	deprecated,

package/src/social-link/edit.js

@@ -6,11 +6,15 @@ 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 {
@@ -32,17 +36,24 @@ const SocialLinkURLPopover = ( {
 	setAttributes,
 	setPopover,
 	popoverAnchor,
+	clientId,
 } ) => {
+	const { removeBlock } = useDispatch( blockEditorStore );
 	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">
@@ -56,6 +67,18 @@ const SocialLinkURLPopover = ( {
 						label={ __( 'Enter social link' ) }
 						hideLabelFromVision
 						disableSuggestions
+						onKeyDown={ ( event ) => {
+							if (
+								!! url ||
+								event.defaultPrevented ||
+								! [ BACKSPACE, DELETE ].includes(
+									event.keyCode
+								)
+							) {
+								return;
+							}
+							removeBlock( clientId );
+						} }
 					/>
 				</div>
 				<Button
@@ -73,6 +96,7 @@ const SocialLinkEdit = ( {
 	context,
 	isSelected,
 	setAttributes,
+	clientId,
 } ) => {
 	const { url, service, label = '', rel } = attributes;
 	const {
@@ -117,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 ) =>
@@ -143,6 +167,7 @@ const SocialLinkEdit = ( {
 					className="wp-block-social-link-anchor"
 					ref={ setPopoverAnchor }
 					onClick={ () => setPopover( true ) }
+					aria-haspopup="dialog"
 				>
 					<IconComponent />
 					<span
@@ -159,6 +184,7 @@ const SocialLinkEdit = ( {
 						setAttributes={ setAttributes }
 						setPopover={ setPopover }
 						popoverAnchor={ popoverAnchor }
+						clientId={ clientId }
 					/>
 				) }
 			</li>

package/src/social-link/icons/soundcloud.js

@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const SoundCloudIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M8.9,16.1L9,14L8.9,9.5c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1L8.3,14l0.1,2.1 c0,0.1,0,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1C8.8,16.3,8.9,16.3,8.9,16.1z M11.4,15.9l0.1-1.8L11.4,9c0-0.1,0-0.2-0.1-0.2 c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.1,0-0.1,0.1-0.1,0.2l0,0.1l-0.1,5c0,0,0,0.7,0.1,2v0c0,0.1,0,0.1,0.1,0.1c0.1,0.1,0.1,0.1,0.2,0.1 c0.1,0,0.1,0,0.2-0.1c0.1,0,0.1-0.1,0.1-0.2L11.4,15.9z M2.4,12.9L2.5,14l-0.2,1.1c0,0.1,0,0.1-0.1,0.1c0,0-0.1,0-0.1-0.1L2.1,14 l0.1-1.1C2.2,12.9,2.3,12.9,2.4,12.9C2.3,12.9,2.4,12.9,2.4,12.9z M3.1,12.2L3.3,14l-0.2,1.8c0,0.1,0,0.1-0.1,0.1 c-0.1,0-0.1,0-0.1-0.1L2.8,14L3,12.2C3,12.2,3,12.2,3.1,12.2C3.1,12.2,3.1,12.2,3.1,12.2z M3.9,11.9L4.1,14l-0.2,2.1 c0,0.1,0,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L3.5,14l0.2-2.1c0-0.1,0-0.1,0.1-0.1C3.9,11.8,3.9,11.8,3.9,11.9z M4.7,11.9L4.9,14 l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L4.3,14l0.2-2.2c0-0.1,0-0.1,0.1-0.1C4.7,11.7,4.7,11.8,4.7,11.9z M5.6,12 l0.2,2l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1L5.1,14l0.2-2c0,0,0-0.1,0-0.1s0.1,0,0.1,0 C5.5,11.9,5.5,11.9,5.6,12L5.6,12z M6.4,10.7L6.6,14l-0.2,2.1c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.2-0.2L5.9,14 l0.2-3.3c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0C6.4,10.7,6.4,10.7,6.4,10.7z M7.2,10l0.2,4.1l-0.2,2.1c0,0,0,0.1,0,0.1 c0,0-0.1,0-0.1,0c-0.1,0-0.2-0.1-0.2-0.2l-0.1-2.1L6.8,10c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0S7.2,9.9,7.2,10z M8,9.6L8.2,14 L8,16.1c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2L7.5,14l0.1-4.4c0-0.1,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.1,0.1 C8,9.6,8,9.6,8,9.6z M11.4,16.1L11.4,16.1L11.4,16.1z M9.7,9.6L9.8,14l-0.1,2.1c0,0.1,0,0.1-0.1,0.2s-0.1,0.1-0.2,0.1 c-0.1,0-0.1,0-0.1-0.1s-0.1-0.1-0.1-0.2L9.2,14l0.1-4.4c0-0.1,0-0.1,0.1-0.2s0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S9.7,9.5,9.7,9.6 L9.7,9.6z M10.6,9.8l0.1,4.3l-0.1,2c0,0.1,0,0.1-0.1,0.2c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.1-0.2L10,14 l0.1-4.3c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S10.6,9.7,10.6,9.8z M12.4,14l-0.1,2c0,0.1,0,0.1-0.1,0.2 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2l-0.1-1l-0.1-1l0.1-5.5v0c0-0.1,0-0.2,0.1-0.2 c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.2L12.4,14z M22.1,13.9c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.7,0.7 h-6.8c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2V8.2c0-0.1,0.1-0.2,0.2-0.3c0.5-0.2,1-0.3,1.6-0.3c1.1,0,2.1,0.4,2.9,1.1 c0.8,0.8,1.3,1.7,1.4,2.8c0.3-0.1,0.6-0.2,1-0.2c0.7,0,1.3,0.2,1.7,0.7C21.8,12.6,22.1,13.2,22.1,13.9L22.1,13.9z" />
+		<Path d="M23.994 14.552a3.36 3.36 0 01-3.401 3.171h-8.176a.685.685 0 01-.679-.681V8.238a.749.749 0 01.452-.716S12.942 7 14.526 7a5.357 5.357 0 012.748.755 5.44 5.44 0 012.56 3.546c.282-.08.574-.12.868-.119a3.273 3.273 0 013.292 3.37zM10.718 8.795a.266.266 0 10-.528 0c-.224 2.96-.397 5.735 0 8.685a.265.265 0 00.528 0c.425-2.976.246-5.7 0-8.685zM9.066 9.82a.278.278 0 00-.553 0 33.183 33.183 0 000 7.663.278.278 0 00.55 0c.33-2.544.332-5.12.003-7.664zM7.406 9.56a.269.269 0 00-.535 0c-.253 2.7-.38 5.222 0 7.917a.266.266 0 10.531 0c.394-2.73.272-5.181.004-7.917zM5.754 10.331a.275.275 0 10-.55 0 28.035 28.035 0 000 7.155.272.272 0 00.54 0c.332-2.373.335-4.78.01-7.155zM4.087 12.12a.272.272 0 00-.544 0c-.393 1.843-.208 3.52.016 5.386a.26.26 0 00.512 0c.247-1.892.435-3.53.016-5.386zM2.433 11.838a.282.282 0 00-.56 0c-.349 1.882-.234 3.54.01 5.418.025.285.508.282.54 0 .269-1.907.394-3.517.01-5.418zM.762 12.76a.282.282 0 00-.56 0c-.32 1.264-.22 2.31.023 3.578a.262.262 0 00.521 0c.282-1.293.42-2.317.016-3.578z" />
 	</SVG>
 );

package/src/social-link/socials-with-bg.scss

@@ -49,7 +49,7 @@
 }
 
 .wp-social-link-facebook {
-	background-color: #1778f2;
+	background-color: #0866ff;
 	color: #fff;
 }
 

package/src/social-link/socials-without-bg.scss

@@ -35,7 +35,7 @@
 }
 
 .wp-social-link-facebook {
-	color: #1778f2;
+	color: #0866ff;
 }
 
 .wp-social-link-fivehundredpx {

package/src/social-links/block.json

@@ -81,6 +81,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"styles": [

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

@@ -50,9 +50,15 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 	} = attributes;
 
 	const [ availableUnits ] = useSettings( 'spacing.units' );
+
+	// The `pt` unit is used as the default value and is therefore
+	// always considered an available unit.
 	const units = useCustomUnits( {
-		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem' ],
+		availableUnits: availableUnits
+			? [ ...availableUnits, 'pt' ]
+			: [ '%', 'px', 'em', 'rem', 'pt' ],
 	} );
+
 	const taxonomies = useSelect(
 		( select ) => select( coreStore ).getTaxonomies( { per_page: -1 } ),
 		[]