@wordpress/block-library 9.36.1-next.8b30e05b0.0 → 9.37.0

package/src/button/deprecated.js

@@ -16,6 +16,7 @@ import {
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	__experimentalGetElementClassName,
+	getTypographyClassesAndStyles,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 
@@ -23,6 +24,7 @@ import { compose } from '@wordpress/compose';
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import migrateTextAlign from '../utils/migrate-text-align';
 
 const migrateBorderRadius = ( attributes ) => {
 	const { borderRadius, ...newAttributes } = attributes;
@@ -134,6 +136,217 @@ const blockAttributes = {
 	},
 };
 
+const v13 = {
+	attributes: {
+		tagName: {
+			type: 'string',
+			enum: [ 'a', 'button' ],
+			default: 'a',
+		},
+		type: {
+			type: 'string',
+			default: 'button',
+		},
+		textAlign: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+			role: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a,button',
+			attribute: 'title',
+			role: 'content',
+		},
+		text: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'a,button',
+			role: 'content',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'target',
+			role: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'rel',
+			role: 'content',
+		},
+		placeholder: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		alignWide: false,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			__experimentalSkipSerialization: [
+				'fontSize',
+				'lineHeight',
+				'fontFamily',
+				'fontWeight',
+				'fontStyle',
+				'textTransform',
+				'textDecoration',
+				'letterSpacing',
+			],
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalWritingMode: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		shadow: {
+			__experimentalSkipSerialization: true,
+		},
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	selectors: {
+		root: '.wp-block-button .wp-block-button__link',
+		typography: {
+			writingMode: '.wp-block-button',
+		},
+	},
+	save( { attributes, className } ) {
+		const {
+			tagName,
+			type,
+			textAlign,
+			fontSize,
+			linkTarget,
+			rel,
+			style,
+			text,
+			title,
+			url,
+			width,
+		} = attributes;
+
+		const TagName = tagName || 'a';
+		const isButtonTag = 'button' === TagName;
+		const buttonType = type || 'button';
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const shadowProps = getShadowClassesAndStyles( attributes );
+		const typographyProps = getTypographyClassesAndStyles( attributes );
+		const buttonClasses = clsx(
+			'wp-block-button__link',
+			colorProps.className,
+			borderProps.className,
+			typographyProps.className,
+			{
+				[ `has-text-align-${ textAlign }` ]: textAlign,
+				// For backwards compatibility add style that isn't provided via
+				// block support.
+				'no-border-radius': style?.border?.radius === 0,
+				[ `has-custom-font-size` ]:
+					fontSize || style?.typography?.fontSize,
+			},
+			__experimentalGetElementClassName( 'button' )
+		);
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+			...shadowProps.style,
+			...typographyProps.style,
+			writingMode: undefined,
+		};
+
+		// The use of a `title` attribute here is soft-deprecated, but still applied
+		// if it had already been assigned, for the sake of backward-compatibility.
+		// A title will no longer be assigned for new or updated button block links.
+
+		const wrapperClasses = clsx( className, {
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName={ TagName }
+					type={ isButtonTag ? buttonType : null }
+					className={ buttonClasses }
+					href={ isButtonTag ? null : url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ isButtonTag ? null : linkTarget }
+					rel={ isButtonTag ? null : rel }
+				/>
+			</div>
+		);
+	},
+	isEligible( attributes ) {
+		return !! attributes.textAlign;
+	},
+	migrate: migrateTextAlign,
+};
+
 const v12 = {
 	attributes: {
 		tagName: {
@@ -587,6 +800,7 @@ const v10 = {
 };
 
 const deprecated = [
+	v13,
 	v12,
 	v11,
 	v10,

package/src/button/edit.js

@@ -11,6 +11,7 @@ import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { unlock } from '../lock-unlock';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 /**
  * WordPress dependencies
@@ -34,7 +35,6 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import {
-	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	RichText,
@@ -186,7 +186,6 @@ function ButtonEdit( props ) {
 	} = props;
 	const {
 		tagName,
-		textAlign,
 		linkTarget,
 		placeholder,
 		rel,
@@ -196,6 +195,7 @@ function ButtonEdit( props ) {
 		width,
 		metadata,
 	} = attributes;
+	useDeprecatedTextAlign( props );
 
 	const TagName = tagName || 'a';
 
@@ -361,7 +361,6 @@ function ButtonEdit( props ) {
 						borderProps.className,
 						typographyProps.className,
 						{
-							[ `has-text-align-${ textAlign }` ]: textAlign,
 							// For backwards compatibility add style that isn't
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
@@ -385,14 +384,6 @@ function ButtonEdit( props ) {
 			</div>
 			{ hasBlockControls && (
 				<BlockControls group="block">
-					{ hasNonContentControls && (
-						<AlignmentControl
-							value={ textAlign }
-							onChange={ ( nextAlign ) => {
-								setAttributes( { textAlign: nextAlign } );
-							} }
-						/>
-					) }
 					{ isLinkTag && ! lockUrlControls && (
 						<ToolbarButton
 							name="link"

package/src/button/index.js

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

package/src/button/save.js

@@ -21,7 +21,6 @@ export default function save( { attributes, className } ) {
 	const {
 		tagName,
 		type,
-		textAlign,
 		fontSize,
 		linkTarget,
 		rel,
@@ -46,7 +45,6 @@ export default function save( { attributes, className } ) {
 		borderProps.className,
 		typographyProps.className,
 		{
-			[ `has-text-align-${ textAlign }` ]: textAlign,
 			// For backwards compatibility add style that isn't provided via
 			// block support.
 			'no-border-radius': style?.border?.radius === 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/freeform/block.json

@@ -13,7 +13,6 @@
 		}
 	},
 	"supports": {
-		"html": false,
 		"className": false,
 		"customClassName": false,
 		"lock": false,

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',