@wordpress/block-library 9.36.0 → 9.36.1-next.6deb34194.0

package/src/classic.scss

@@ -20,3 +20,41 @@
 	background: #32373c;
 	color: $white;
 }
+
+// These rules are needed to enforce the default styling of
+// the Accordion Heading block in the classic theme.
+.wp-block-accordion-heading {
+	// Heading elements may have default margins applied, so those
+	// styles need to be reset.
+	margin: 0;
+}
+
+.wp-block-accordion-heading__toggle {
+	// Button elements can have colors applied with high CSS specificity,
+	// and since this specificity is impossible to predict, we use
+	// `!important` to reset the color.
+	background-color: inherit !important;
+	color: inherit !important;
+
+	&:not(:focus-visible) {
+		outline: none;
+	}
+
+	&:hover,
+	&:focus {
+		// Sometimes styles are applied when the button element is
+		// hovered over or focused. This isn't expected for accordion
+		// toggle buttons, so reset those styles here.
+		text-decoration: none;
+		background-color: inherit !important;
+		box-shadow: none;
+		color: inherit;
+		border: none;
+		padding: var(--wp--preset--spacing--20, 1em) 0;
+	}
+
+	&:focus-visible {
+		outline-offset: 0;
+		outline: auto;
+	}
+}

package/src/code/index.js

@@ -43,7 +43,7 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'content',

package/src/comments-pagination-numbers/block.json

@@ -33,6 +33,13 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
 		}
 	}
 }

package/src/common.scss

@@ -128,12 +128,14 @@ html :where([style*="border-top-color"]) {
 	border-top-style: solid;
 }
 html :where([style*="border-right-color"]) {
+	/*rtl:ignore*/
 	border-right-style: solid;
 }
 html :where([style*="border-bottom-color"]) {
 	border-bottom-style: solid;
 }
 html :where([style*="border-left-color"]) {
+	/*rtl:ignore*/
 	border-left-style: solid;
 }
 
@@ -144,12 +146,14 @@ html :where([style*="border-top-width"]) {
 	border-top-style: solid;
 }
 html :where([style*="border-right-width"]) {
+	/*rtl:ignore*/
 	border-right-style: solid;
 }
 html :where([style*="border-bottom-width"]) {
 	border-bottom-style: solid;
 }
 html :where([style*="border-left-width"]) {
+	/*rtl:ignore*/
 	border-left-style: solid;
 }
 

package/src/cover/index.js

@@ -56,7 +56,7 @@ export const settings = {
 	variations,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'background',
@@ -78,7 +78,7 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 		},
 	];
 	settings[ formKey ] = {
-		fields: [ 'content' ],
+		fields: [ 'background' ],
 	};
 }
 

package/src/details/index.js

@@ -65,7 +65,7 @@ export const settings = {
 	transforms,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'summary',

package/src/file/index.js

@@ -36,7 +36,7 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'file',

package/src/gallery/edit.js

@@ -290,7 +290,10 @@ export default function GalleryEdit( props ) {
 			...newLinkTarget,
 			className: newClassName,
 			sizeSlug,
-			caption: imageAttributes.caption || image.caption?.raw,
+			caption:
+				imageAttributes.caption.length > 0
+					? imageAttributes.caption
+					: image.caption?.raw,
 			alt: imageAttributes.alt || image.alt_text,
 			aspectRatio: aspectRatio === 'auto' ? undefined : aspectRatio,
 		};

package/src/gallery/transforms.js

@@ -155,7 +155,7 @@ const transforms = {
 		{
 			type: 'shortcode',
 			tag: 'gallery',
-			transform( { named: { ids, columns = 3, link, orderby } } ) {
+			transform( { named: { ids, columns = 3, link, orderby, size } } ) {
 				const imageIds = parseShortcodeIds( ids ).map( ( id ) =>
 					parseInt( id, 10 )
 				);
@@ -173,9 +173,13 @@ const transforms = {
 						columns: parseInt( columns, 10 ),
 						linkTo,
 						randomOrder: orderby === 'rand',
+						...( size && { sizeSlug: size } ),
 					},
 					imageIds.map( ( imageId ) =>
-						createBlock( 'core/image', { id: imageId } )
+						createBlock( 'core/image', {
+							id: imageId,
+							...( size && { sizeSlug: size } ),
+						} )
 					)
 				);
 

package/src/heading/index.js

@@ -73,7 +73,7 @@ export const settings = {
 	variations,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'content',

package/src/html/modal.js

@@ -8,6 +8,7 @@ import {
 	Modal,
 	Button,
 	Flex,
+	Notice,
 	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
 	__experimentalGrid as Grid,
@@ -48,8 +49,9 @@ export default function HTMLEditModal( {
 		};
 	}, [] );
 
-	// Show JS tab if user has permission OR if block contains JavaScript
-	const shouldShowJsTab = canUserUseUnfilteredHTML || js.trim() !== '';
+	// Determine if we should show a warning about CSS/JS content being stripped
+	const hasRestrictedContent =
+		! canUserUseUnfilteredHTML && ( css.trim() || js.trim() );
 
 	if ( ! isOpen ) {
 		return null;
@@ -68,11 +70,13 @@ export default function HTMLEditModal( {
 		setIsDirty( true );
 	};
 	const handleUpdate = () => {
+		// For users without unfiltered_html capability, strip CSS and JS content
+		// to prevent kses from leaving broken content
 		setAttributes( {
 			content: serializeContent( {
 				html: editedHtml,
-				css: editedCss,
-				js: editedJs,
+				css: canUserUseUnfilteredHTML ? editedCss : '',
+				js: canUserUseUnfilteredHTML ? editedJs : '',
 			} ),
 		} );
 		setIsDirty( false );
@@ -130,8 +134,10 @@ export default function HTMLEditModal( {
 							<div>
 								<Tabs.TabList>
 									<Tabs.Tab tabId="html">HTML</Tabs.Tab>
-									<Tabs.Tab tabId="css">CSS</Tabs.Tab>
-									{ shouldShowJsTab && (
+									{ canUserUseUnfilteredHTML && (
+										<Tabs.Tab tabId="css">CSS</Tabs.Tab>
+									) }
+									{ canUserUseUnfilteredHTML && (
 										<Tabs.Tab tabId="js">
 											{ __( 'JavaScript' ) }
 										</Tabs.Tab>
@@ -148,6 +154,17 @@ export default function HTMLEditModal( {
 								/>
 							</div>
 						</HStack>
+						{ hasRestrictedContent && (
+							<Notice
+								status="warning"
+								isDismissible={ false }
+								className="block-library-html__modal-notice"
+							>
+								{ __(
+									'This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML.'
+								) }
+							</Notice>
+						) }
 						<HStack
 							alignment="stretch"
 							justify="flex-start"
@@ -168,20 +185,22 @@ export default function HTMLEditModal( {
 										className="block-library-html__modal-editor"
 									/>
 								</Tabs.TabPanel>
-								<Tabs.TabPanel
-									tabId="css"
-									focusable={ false }
-									className="block-library-html__modal-tab"
-								>
-									<PlainText
-										value={ editedCss }
-										onChange={ handleCssChange }
-										placeholder={ __( 'Write CSS…' ) }
-										aria-label={ __( 'CSS' ) }
-										className="block-library-html__modal-editor"
-									/>
-								</Tabs.TabPanel>
-								{ shouldShowJsTab && (
+								{ canUserUseUnfilteredHTML && (
+									<Tabs.TabPanel
+										tabId="css"
+										focusable={ false }
+										className="block-library-html__modal-tab"
+									>
+										<PlainText
+											value={ editedCss }
+											onChange={ handleCssChange }
+											placeholder={ __( 'Write CSS…' ) }
+											aria-label={ __( 'CSS' ) }
+											className="block-library-html__modal-editor"
+										/>
+									</Tabs.TabPanel>
+								) }
+								{ canUserUseUnfilteredHTML && (
 									<Tabs.TabPanel
 										tabId="js"
 										focusable={ false }

package/src/image/index.js

@@ -66,7 +66,7 @@ export const settings = {
 	deprecated,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'image',

package/src/index.js

@@ -334,11 +334,17 @@ export const registerCoreBlocks = (
 			const bootstrappedBlockType = unlock(
 				select( blocksStore )
 			).getBootstrappedBlockType( blockName );
-			const bootstrappedApiVersion = bootstrappedBlockType.apiVersion;
 
 			registerBlockType( blockName, {
-				title: blockName,
-				...( bootstrappedApiVersion < 3 && { apiVersion: 3 } ),
+				// Use all metadata from PHP registration,
+				// but fall back title to block name if not provided,
+				// ensure minimum apiVersion 3 for block wrapper support,
+				// and override with a ServerSideRender-based edit function.
+				...bootstrappedBlockType,
+				title: bootstrappedBlockType?.title || blockName,
+				...( ( bootstrappedBlockType?.apiVersion ?? 0 ) < 3 && {
+					apiVersion: 3,
+				} ),
 				edit: function Edit( { attributes } ) {
 					const blockProps = useBlockProps();
 					const { content, status, error } = useServerSideRender( {

package/src/list-item/index.js

@@ -36,7 +36,7 @@ export const settings = {
 	[ unlock( privateApis ).requiresWrapperOnCopy ]: true,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'content',

package/src/math/edit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	store as blockEditorStore,
@@ -98,7 +98,15 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 										setError( null );
 									} catch ( err ) {
 										setError( err.message );
-										speak( err.message );
+										speak(
+											sprintf(
+												/* translators: %s: error message returned when parsing LaTeX. */
+												__(
+													'Error parsing mathematical expression: %s'
+												),
+												err.message
+											)
+										);
 									}
 									setAttributes( {
 										mathML: newMathML,
@@ -113,7 +121,11 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 										intent="error"
 										className="wp-block-math__error"
 									>
-										{ error }
+										{ sprintf(
+											/* translators: %s: error message returned when parsing LaTeX. */
+											__( 'Error: %s' ),
+											error
+										) }
 									</Badge>
 									<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
 								</>

package/src/media-text/index.js

@@ -54,7 +54,7 @@ export const settings = {
 	deprecated,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'media',

package/src/more/index.js

@@ -40,7 +40,7 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'customText',

package/src/navigation-link/index.js

@@ -93,7 +93,7 @@ export const settings = {
 	transforms,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'label',

package/src/navigation-submenu/index.js

@@ -52,7 +52,7 @@ export const settings = {
 	transforms,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'label',

package/src/page-list/index.php

@@ -192,8 +192,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			$css_class .= ' menu-item-home';
 		}
 
-		$title = wp_kses_post( $page['title'] );
-		$title = $title ? $title : __( '(no title)' );
+		$title = $page['title'] ? $page['title'] : __( '(no title)' );
 
 		$aria_label = sprintf(
 			/* translators: Accessibility text. %s: Parent page title. */
@@ -204,10 +203,10 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		$markup .= '<li class="wp-block-pages-list__item' . esc_attr( $css_class ) . '"' . $style_attribute . '>';
 
 		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
-			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . esc_html( $title ) .
+			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . wp_kses_post( $title ) .
 			'</button><span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
 		} else {
-			$markup .= '<a class="wp-block-pages-list__item__link' . esc_attr( $navigation_child_content_class ) . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
+			$markup .= '<a class="wp-block-pages-list__item__link' . esc_attr( $navigation_child_content_class ) . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses_post( $title ) . '</a>';
 		}
 
 		if ( isset( $page['children'] ) ) {

package/src/page-list-item/edit.js

@@ -8,7 +8,8 @@ import clsx from 'clsx';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
+import { RawHTML } from '@wordpress/element';
+import { safeHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -68,7 +69,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 						className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
 						aria-expanded="false"
 					>
-						{ decodeEntities( label ) }
+						<RawHTML>{ safeHTML( label ) }</RawHTML>
 					</button>
 					<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
 						<ItemSubmenuIcon />
@@ -81,7 +82,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 					} ) }
 					href={ link }
 				>
-					{ decodeEntities( title ) }
+					<RawHTML>{ safeHTML( title ) }</RawHTML>
 				</a>
 			) }
 			{ hasChildren && (

package/src/paragraph/index.js

@@ -62,7 +62,7 @@ export const settings = {
 	variations,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'content',

package/src/post-title/edit.js

@@ -86,7 +86,7 @@ export default function PostTitleEdit( {
 		titleElement = userCanEdit ? (
 			<PlainText
 				tagName={ TagName }
-				placeholder={ __( 'No title' ) }
+				placeholder={ __( '(no title)' ) }
 				value={ rawTitle }
 				onChange={ setTitle }
 				__experimentalVersion={ 2 }
@@ -96,7 +96,9 @@ export default function PostTitleEdit( {
 		) : (
 			<TagName
 				{ ...blockProps }
-				dangerouslySetInnerHTML={ { __html: fullTitle?.rendered } }
+				dangerouslySetInnerHTML={ {
+					__html: fullTitle?.rendered || __( '(no title)' ),
+				} }
 			/>
 		);
 	}
@@ -109,7 +111,9 @@ export default function PostTitleEdit( {
 					href={ link }
 					target={ linkTarget }
 					rel={ rel }
-					placeholder={ ! rawTitle.length ? __( 'No title' ) : null }
+					placeholder={
+						! rawTitle.length ? __( '(no title)' ) : null
+					}
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
@@ -124,7 +128,7 @@ export default function PostTitleEdit( {
 					rel={ rel }
 					onClick={ ( event ) => event.preventDefault() }
 					dangerouslySetInnerHTML={ {
-						__html: fullTitle?.rendered,
+						__html: fullTitle?.rendered || __( '(no title)' ),
 					} }
 				/>
 			</TagName>

package/src/post-title/index.php

@@ -27,7 +27,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 	 */
 	$title = get_the_title();
 
-	if ( ! $title ) {
+	if ( ! strip_tags( $title ) ) {
 		return '';
 	}
 

package/src/preformatted/index.js

@@ -43,7 +43,7 @@ export const settings = {
 	},
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'content',

package/src/pullquote/index.js

@@ -40,7 +40,7 @@ export const settings = {
 	deprecated,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'value',

package/src/search/index.js

@@ -30,7 +30,7 @@ export const settings = {
 	edit,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'label',

package/src/social-link/index.js

@@ -26,7 +26,7 @@ export const settings = {
 	variations,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'link',

package/src/template-part/edit/utils/get-template-part-icon.js

@@ -5,16 +5,35 @@ import {
 	header as headerIcon,
 	footer as footerIcon,
 	sidebar as sidebarIcon,
+	tableColumnAfter as overlayIcon,
 	symbolFilled as symbolFilledIcon,
 } from '@wordpress/icons';
 
-export const getTemplatePartIcon = ( iconName ) => {
-	if ( 'header' === iconName ) {
+/**
+ * Helper function to retrieve the corresponding icon by area name or icon name.
+ *
+ * @param {string} areaOrIconName The area name (e.g., 'header', 'overlay') or icon name (e.g., 'menu').
+ *
+ * @return {Object} The corresponding icon.
+ */
+export const getTemplatePartIcon = ( areaOrIconName ) => {
+	// Handle area names first
+	if ( 'header' === areaOrIconName ) {
 		return headerIcon;
-	} else if ( 'footer' === iconName ) {
+	} else if ( 'footer' === areaOrIconName ) {
 		return footerIcon;
-	} else if ( 'sidebar' === iconName ) {
+	} else if ( 'sidebar' === areaOrIconName ) {
 		return sidebarIcon;
+	} else if ( 'overlay' === areaOrIconName ) {
+		// TODO: Replace with a proper overlay icon when available.
+		// Using tableColumnAfter as a placeholder.
+		return overlayIcon;
+	}
+	// Handle icon names for backwards compatibility
+	if ( 'menu' === areaOrIconName ) {
+		// TODO: Replace with a proper overlay icon when available.
+		// Using tableColumnAfter as a placeholder.
+		return overlayIcon;
 	}
 	return symbolFilledIcon;
 };

package/src/verse/index.js

@@ -45,7 +45,7 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'content',

package/src/verse/style.scss

@@ -1,6 +1,10 @@
 pre.wp-block-verse {
 	overflow: auto;
 	white-space: pre-wrap;
+
+	// Prevent text overflow off-screen when the previous block has float.
+	min-width: 1em;
+	word-break: break-word;
 }
 
 :where(pre.wp-block-verse) {

package/src/video/index.js

@@ -37,7 +37,7 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'video',