@wordpress/block-library 9.21.0 → 9.23.0

package/src/separator/edit.js

@@ -6,12 +6,13 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { HorizontalRule, SelectControl } from '@wordpress/components';
+import { HorizontalRule } from '@wordpress/components';
 import {
 	useBlockProps,
 	getColorClassName,
 	__experimentalUseColorProps as useColorProps,
 	InspectorControls,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -19,9 +20,15 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
-import { htmlElementMessages } from '../utils/messages';
+import { unlock } from '../lock-unlock';
 
-export default function SeparatorEdit( { attributes, setAttributes } ) {
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+
+export default function SeparatorEdit( {
+	attributes,
+	setAttributes,
+	clientId,
+} ) {
 	const { backgroundColor, opacity, style, tagName } = attributes;
 	const colorProps = useColorProps( attributes );
 	const currentColor = colorProps?.style?.backgroundColor;
@@ -52,19 +59,16 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<InspectorControls group="advanced">
-				<SelectControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'HTML element' ) }
+				<HTMLElementControl
+					tagName={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					clientId={ clientId }
 					options={ [
 						{ label: __( 'Default (<hr>)' ), value: 'hr' },
 						{ label: '<div>', value: 'div' },
 					] }
-					value={ tagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ tagName ] }
 				/>
 			</InspectorControls>
 			<Wrapper

package/src/social-links/edit.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import {
 	BlockControls,
 	useInnerBlocksProps,
@@ -57,16 +57,21 @@ export function SocialLinksEdit( props ) {
 
 	const {
 		iconBackgroundColorValue,
-		customIconBackgroundColor,
 		iconColorValue,
 		openInNewTab,
 		showLabels,
 		size,
 	} = attributes;
 
-	const hasSelectedChild = useSelect(
-		( select ) =>
-			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
+	const { hasSocialIcons, hasSelectedChild } = useSelect(
+		( select ) => {
+			const { getBlockCount, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return {
+				hasSocialIcons: getBlockCount( clientId ) > 0,
+				hasSelectedChild: hasSelectedInnerBlock( clientId ),
+			};
+		},
 		[ clientId ]
 	);
 
@@ -78,33 +83,25 @@ export function SocialLinksEdit( props ) {
 
 	// Remove icon background color when logos only style is selected or
 	// restore it when any other style is selected.
-	const backgroundBackupRef = useRef( {} );
 	useEffect( () => {
 		if ( logosOnly ) {
-			backgroundBackupRef.current = {
-				iconBackgroundColor,
-				iconBackgroundColorValue,
-				customIconBackgroundColor,
-			};
-			setAttributes( {
-				iconBackgroundColor: undefined,
-				customIconBackgroundColor: undefined,
-				iconBackgroundColorValue: undefined,
+			let restore;
+			setAttributes( ( prev ) => {
+				restore = {
+					iconBackgroundColor: prev.iconBackgroundColor,
+					iconBackgroundColorValue: prev.iconBackgroundColorValue,
+					customIconBackgroundColor: prev.customIconBackgroundColor,
+				};
+				return {
+					iconBackgroundColor: undefined,
+					iconBackgroundColorValue: undefined,
+					customIconBackgroundColor: undefined,
+				};
 			} );
-		} else {
-			setAttributes( { ...backgroundBackupRef.current } );
-		}
-	}, [ logosOnly ] );
 
-	const SocialPlaceholder = (
-		<li className="wp-block-social-links__social-placeholder">
-			<div className="wp-block-social-links__social-placeholder-icons">
-				<div className="wp-social-link wp-social-link-twitter"></div>
-				<div className="wp-social-link wp-social-link-facebook"></div>
-				<div className="wp-social-link wp-social-link-instagram"></div>
-			</div>
-		</li>
-	);
+			return () => setAttributes( { ...restore } );
+		}
+	}, [ logosOnly, setAttributes ] );
 
 	// Fallback color values are used maintain selections in case switching
 	// themes and named colors in palette do not match.
@@ -117,11 +114,13 @@ export function SocialLinksEdit( props ) {
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		placeholder: ! isSelected && SocialPlaceholder,
 		templateLock: false,
 		orientation: attributes.layout?.orientation ?? 'horizontal',
 		__experimentalAppenderTagName: 'li',
-		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
+		renderAppender:
+			! hasSocialIcons || hasAnySelected
+				? InnerBlocks.ButtonBlockAppender
+				: undefined,
 	} );
 
 	const POPOVER_PROPS = {

package/src/social-links/editor.scss

@@ -12,67 +12,9 @@
 
 // Specificity for the following styles are fixed at 0-1-0 to match and be
 // overridable by global styles.
-:root :where(.wp-block-social-links),
-:root :where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) {
+:root :where(.wp-block-social-links) {
 	padding: 0;
 }
-:root :where(.wp-block-social-links__social-placeholder .wp-social-link) {
-	padding: 0.25em;
-}
-:root :where(.wp-block-social-links.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link) {
-	padding-left: calc((2/3) * 1em);
-	padding-right: calc((2/3) * 1em);
-}
-
-// Placeholder/setup state.
-.wp-block-social-links__social-placeholder {
-	display: flex;
-	opacity: 0.8;
-	list-style: none;
-
-	// Use the first link to set the height.
-	> .wp-social-link {
-		// Use !important to keep the selector simple.
-		padding-left: 0 !important;
-		margin-left: 0 !important;
-		padding-right: 0 !important;
-		margin-right: 0 !important;
-		width: 0 !important;
-		visibility: hidden;
-	}
-
-	// Wrap the remaining placeholders in a container so the plus can overlap.
-	> .wp-block-social-links__social-placeholder-icons {
-		display: flex;
-	}
-
-	.wp-social-link::before {
-		content: "";
-		display: block;
-		width: 1em;
-		height: 1em;
-		border-radius: $radius-round;
-
-		.is-style-logos-only & {
-			background: currentColor;
-		}
-	}
-}
-
-// Selected placeholder state.
-.wp-block-social-links .wp-block-social-links__social-prompt {
-	min-height: $button-size-small;
-	list-style: none;
-
-	// Show as block UI.
-	font-family: $default-font;
-	font-size: $default-font-size;
-	line-height: $button-size-small;
-	margin-top: auto;
-	margin-bottom: auto;
-	cursor: default;
-	padding-right: $grid-unit-10;
-}
 
 // Center flex items. This has an equivalent in style.scss.
 .wp-block[data-align="center"] > .wp-block-social-links,

package/src/table/index.js

@@ -48,7 +48,7 @@ export const settings = {
 							tag: 'td',
 						},
 						{
-							content: 'Jaco Pastorius',
+							content: __( 'Jaco Pastorius' ),
 							tag: 'td',
 						},
 						{
@@ -64,7 +64,7 @@ export const settings = {
 							tag: 'td',
 						},
 						{
-							content: 'Betty Carter',
+							content: __( 'Betty Carter' ),
 							tag: 'td',
 						},
 						{
@@ -80,7 +80,7 @@ export const settings = {
 							tag: 'td',
 						},
 						{
-							content: 'Bebo Valdés',
+							content: __( 'Bebo Valdés' ),
 							tag: 'td',
 						},
 						{

package/src/table/transforms.js

@@ -15,12 +15,12 @@ const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 			th: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'scope', 'colspan', 'rowspan' ],
+				attributes: [ 'scope', 'colspan', 'rowspan', 'style' ],
 			},
 			td: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'colspan', 'rowspan' ],
+				attributes: [ 'colspan', 'rowspan', 'style' ],
 			},
 		},
 	},
@@ -79,11 +79,23 @@ const transforms = {
 									col.getAttribute( 'colspan' )
 								);
 
+								const { textAlign } = col.style || {};
+
+								let align;
+								if (
+									textAlign === 'left' ||
+									textAlign === 'center' ||
+									textAlign === 'right'
+								) {
+									align = textAlign;
+								}
+
 								colAcc.push( {
 									tag: col.nodeName.toLowerCase(),
 									content: col.innerHTML,
 									rowspan,
 									colspan,
+									align,
 								} );
 
 								return colAcc;

package/src/table-of-contents/edit.js

@@ -176,7 +176,7 @@ export default function TableOfContentsEdit( {
 							} )
 						}
 						help={
-							maxLevel
+							! maxLevel
 								? __(
 										'Including all heading levels in the table of contents.'
 								  )

package/src/table-of-contents/hooks.js

@@ -148,8 +148,11 @@ function observeCallback( select, dispatch, clientId ) {
 
 	const headings = getLatestHeadings( select, clientId );
 	if ( ! fastDeepEqual( headings, attributes.headings ) ) {
-		__unstableMarkNextChangeAsNotPersistent();
-		updateBlockAttributes( clientId, { headings } );
+		// Executing the update in a microtask ensures that the non-persistent marker doesn't affect an attribute triggering the change.
+		window.queueMicrotask( () => {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( clientId, { headings } );
+		} );
 	}
 }
 

package/src/tag-cloud/style.scss

@@ -7,11 +7,6 @@
 		justify-content: center;
 	}
 
-	&.alignfull {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
 	a {
 		display: inline-block;
 		margin-right: 5px;

package/src/template-part/edit/advanced-controls.js

@@ -5,12 +5,15 @@ import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { SelectControl, TextControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { TemplatePartImportControls } from './import-controls';
-import { htmlElementMessages } from '../../utils/messages';
+import { unlock } from '../../lock-unlock';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
 export function TemplatePartAdvancedControls( {
 	tagName,
@@ -19,6 +22,7 @@ export function TemplatePartAdvancedControls( {
 	templatePartId,
 	defaultWrapper,
 	hasInnerBlocks,
+	clientId,
 } ) {
 	const [ area, setArea ] = useEntityProp(
 		'postType',
@@ -73,10 +77,10 @@ export function TemplatePartAdvancedControls( {
 					/>
 				</>
 			) }
-			<SelectControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				label={ __( 'HTML element' ) }
+			<HTMLElementControl
+				tagName={ tagName || '' }
+				onChange={ ( value ) => setAttributes( { tagName: value } ) }
+				clientId={ clientId }
 				options={ [
 					{
 						label: sprintf(
@@ -94,9 +98,6 @@ export function TemplatePartAdvancedControls( {
 					{ label: '<footer>', value: 'footer' },
 					{ label: '<div>', value: 'div' },
 				] }
-				value={ tagName || '' }
-				onChange={ ( value ) => setAttributes( { tagName: value } ) }
-				help={ htmlElementMessages[ tagName ] }
 			/>
 			{ ! hasInnerBlocks && (
 				<TemplatePartImportControls

package/src/template-part/edit/index.js

@@ -260,6 +260,7 @@ export default function TemplatePartEdit( {
 							templatePartId={ templatePartId }
 							defaultWrapper={ areaObject.tagName }
 							hasInnerBlocks={ hasInnerBlocks }
+							clientId={ clientId }
 						/>
 					</InspectorControls>
 				) }

package/build/utils/messages.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.htmlElementMessages = void 0;
-var _i18n = require("@wordpress/i18n");
-/**
- * WordPress dependencies
- */
-
-const htmlElementMessages = exports.htmlElementMessages = {
-  article: (0, _i18n.__)('The <article> element should represent a self-contained, syndicatable portion of the document.'),
-  aside: (0, _i18n.__)("The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."),
-  div: (0, _i18n.__)('The <div> element should only be used if the block is a design element with no semantic meaning.'),
-  footer: (0, _i18n.__)('The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'),
-  header: (0, _i18n.__)('The <header> element should represent introductory content, typically a group of introductory or navigational aids.'),
-  main: (0, _i18n.__)('The <main> element should be used for the primary content of your document only.'),
-  nav: (0, _i18n.__)('The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'),
-  section: (0, _i18n.__)("The <section> element should represent a standalone portion of the document that can't be better represented by another element.")
-};
-//# sourceMappingURL=messages.js.map

package/build/utils/messages.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_i18n","require","htmlElementMessages","exports","article","__","aside","div","footer","header","main","nav","section"],"sources":["@wordpress/block-library/src/utils/messages.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const htmlElementMessages = {\n\tarticle: __(\n\t\t'The <article> element should represent a self-contained, syndicatable portion of the document.'\n\t),\n\taside: __(\n\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t),\n\tdiv: __(\n\t\t'The <div> element should only be used if the block is a design element with no semantic meaning.'\n\t),\n\tfooter: __(\n\t\t'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'\n\t),\n\theader: __(\n\t\t'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'\n\t),\n\tmain: __(\n\t\t'The <main> element should be used for the primary content of your document only.'\n\t),\n\tnav: __(\n\t\t'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'\n\t),\n\tsection: __(\n\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t),\n};\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG;EAClCE,OAAO,EAAE,IAAAC,QAAE,EACV,gGACD,CAAC;EACDC,KAAK,EAAE,IAAAD,QAAE,EACR,uIACD,CAAC;EACDE,GAAG,EAAE,IAAAF,QAAE,EACN,kGACD,CAAC;EACDG,MAAM,EAAE,IAAAH,QAAE,EACT,8HACD,CAAC;EACDI,MAAM,EAAE,IAAAJ,QAAE,EACT,qHACD,CAAC;EACDK,IAAI,EAAE,IAAAL,QAAE,EACP,kFACD,CAAC;EACDM,GAAG,EAAE,IAAAN,QAAE,EACN,mIACD,CAAC;EACDO,OAAO,EAAE,IAAAP,QAAE,EACV,kIACD;AACD,CAAC","ignoreList":[]}

package/build-module/utils/messages.js

@@ -1,15 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-export const htmlElementMessages = {
-  article: __('The <article> element should represent a self-contained, syndicatable portion of the document.'),
-  aside: __("The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."),
-  div: __('The <div> element should only be used if the block is a design element with no semantic meaning.'),
-  footer: __('The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'),
-  header: __('The <header> element should represent introductory content, typically a group of introductory or navigational aids.'),
-  main: __('The <main> element should be used for the primary content of your document only.'),
-  nav: __('The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'),
-  section: __("The <section> element should represent a standalone portion of the document that can't be better represented by another element.")
-};
-//# sourceMappingURL=messages.js.map

package/build-module/utils/messages.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__","htmlElementMessages","article","aside","div","footer","header","main","nav","section"],"sources":["@wordpress/block-library/src/utils/messages.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const htmlElementMessages = {\n\tarticle: __(\n\t\t'The <article> element should represent a self-contained, syndicatable portion of the document.'\n\t),\n\taside: __(\n\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t),\n\tdiv: __(\n\t\t'The <div> element should only be used if the block is a design element with no semantic meaning.'\n\t),\n\tfooter: __(\n\t\t'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'\n\t),\n\theader: __(\n\t\t'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'\n\t),\n\tmain: __(\n\t\t'The <main> element should be used for the primary content of your document only.'\n\t),\n\tnav: __(\n\t\t'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'\n\t),\n\tsection: __(\n\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t),\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AAEpC,OAAO,MAAMC,mBAAmB,GAAG;EAClCC,OAAO,EAAEF,EAAE,CACV,gGACD,CAAC;EACDG,KAAK,EAAEH,EAAE,CACR,uIACD,CAAC;EACDI,GAAG,EAAEJ,EAAE,CACN,kGACD,CAAC;EACDK,MAAM,EAAEL,EAAE,CACT,8HACD,CAAC;EACDM,MAAM,EAAEN,EAAE,CACT,qHACD,CAAC;EACDO,IAAI,EAAEP,EAAE,CACP,kFACD,CAAC;EACDQ,GAAG,EAAER,EAAE,CACN,mIACD,CAAC;EACDS,OAAO,EAAET,EAAE,CACV,kIACD;AACD,CAAC","ignoreList":[]}

package/src/utils/messages.js

@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const htmlElementMessages = {
-	article: __(
-		'The <article> element should represent a self-contained, syndicatable portion of the document.'
-	),
-	aside: __(
-		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-	),
-	div: __(
-		'The <div> element should only be used if the block is a design element with no semantic meaning.'
-	),
-	footer: __(
-		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
-	),
-	header: __(
-		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
-	),
-	main: __(
-		'The <main> element should be used for the primary content of your document only.'
-	),
-	nav: __(
-		'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'
-	),
-	section: __(
-		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-	),
-};