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

package/src/file/index.js

@@ -3,6 +3,7 @@
  */
 import { _x, __ } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -13,6 +14,9 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -32,15 +36,15 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+if ( window.__experimentalContentOnlyInspectorFields ) {
+	settings[ fieldsKey ] = [
 		{
+			id: 'file',
 			label: __( 'File' ),
-			type: 'Media',
-			shownByDefault: true,
+			type: 'media',
 			mapping: {
 				id: 'id',
-				src: 'href',
+				url: 'href',
 			},
 			args: {
 				allowedTypes: [],
@@ -48,22 +52,19 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 			},
 		},
 		{
+			id: 'fileName',
 			label: __( 'Filename' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'fileName',
-			},
+			type: 'richtext',
 		},
 		{
+			id: 'downloadButtonText',
 			label: __( 'Button Text' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'downloadButtonText',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'file' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/freeform/block.json

@@ -19,7 +19,7 @@
 		"lock": false,
 		"reusable": false,
 		"renaming": false,
-		"blockVisibility": false
+		"visibility": false
 	},
 	"editorStyle": "wp-block-freeform-editor"
 }

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,
 		};
@@ -596,7 +599,6 @@ export default function GalleryEdit( props ) {
 				instructions: PLACEHOLDER_TEXT,
 			} }
 			onSelect={ updateImages }
-			accept="image/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			multiple
 			onError={ onUploadError }
@@ -910,7 +912,6 @@ export default function GalleryEdit( props ) {
 						<BlockControls group="other">
 							<MediaReplaceFlow
 								allowedTypes={ ALLOWED_MEDIA_TYPES }
-								accept="image/*"
 								handleUpload={ false }
 								onSelect={ updateImages }
 								name={ __( 'Add' ) }

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

@@ -3,6 +3,7 @@
  */
 import { heading as icon } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,6 +15,9 @@ import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
 import variations from './variations';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -69,17 +73,17 @@ export const settings = {
 	variations,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+if ( window.__experimentalContentOnlyInspectorFields ) {
+	settings[ fieldsKey ] = [
 		{
+			id: 'content',
 			label: __( 'Content' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: 'content',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'content' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/html/editor.scss

@@ -14,22 +14,20 @@
 
 // Modal styles
 .block-library-html__modal {
-	// Make modal content scrollable
-	.components-modal__content {
-		display: flex;
-		flex-direction: column;
-		padding: 0;
-		min-height: 70vh;
-	}
+	height: 100%;
 
 	.components-modal__children-container {
 		height: 100%;
-		padding: $grid-unit-20;
 	}
 }
 
 .block-library-html__modal-tabs {
-	height: 100%;
+	overflow-y: auto;
+}
+
+.block-library-html__modal-content {
+	flex: 1;
+	min-height: 0;
 }
 
 .block-library-html__modal-tab {
@@ -73,10 +71,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: $grid-unit-60;
-}
-
-.block-library-html__modal-actions {
-	margin-top: $grid-unit-20;
-	padding: 0 $grid-unit-40 $grid-unit-40;
+	padding: $grid-unit-20;
+	flex: 1;
+	min-height: 0;
 }

package/src/html/modal.js

@@ -8,9 +8,10 @@ import {
 	Modal,
 	Button,
 	Flex,
+	Notice,
 	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
+	__experimentalGrid as Grid,
 } from '@wordpress/components';
 import { PlainText, store as blockEditorStore } from '@wordpress/block-editor';
 import { fullscreen, square } from '@wordpress/icons';
@@ -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 );
@@ -117,13 +121,23 @@ export default function HTMLEditModal( {
 				__experimentalHideHeader
 			>
 				<Tabs orientation="horizontal" defaultTabId="html">
-					<VStack spacing={ 4 } style={ { height: '100%' } }>
-						<HStack justify="space-between">
+					<Grid
+						columns={ 1 }
+						templateRows="auto 1fr auto"
+						gap={ 4 }
+						style={ { height: '100%' } }
+					>
+						<HStack
+							justify="space-between"
+							className="block-library-html__modal-header"
+						>
 							<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>
@@ -140,14 +154,24 @@ 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"
 							spacing={ 4 }
 							className="block-library-html__modal-tabs"
-							style={ { flexGrow: 1 } }
 						>
-							<div style={ { flexGrow: 1 } }>
+							<div className="block-library-html__modal-content">
 								<Tabs.TabPanel
 									tabId="html"
 									focusable={ false }
@@ -161,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 }
@@ -192,10 +218,7 @@ export default function HTMLEditModal( {
 									</Tabs.TabPanel>
 								) }
 							</div>
-							<div
-								className="block-library-html__preview"
-								style={ { width: '50%' } }
-							>
+							<div className="block-library-html__preview">
 								<Preview
 									content={ serializeContent( {
 										html: editedHtml,
@@ -209,6 +232,7 @@ export default function HTMLEditModal( {
 							alignment="center"
 							justify="flex-end"
 							spacing={ 4 }
+							className="block-library-html__modal-footer"
 						>
 							<Button
 								__next40pxDefaultSize
@@ -225,7 +249,7 @@ export default function HTMLEditModal( {
 								{ __( 'Update' ) }
 							</Button>
 						</HStack>
-					</VStack>
+					</Grid>
 				</Tabs>
 			</Modal>
 

package/src/image/edit.js

@@ -464,7 +464,6 @@ export function ImageEdit( {
 					onSelectURL={ onSelectURL }
 					onError={ onUploadError }
 					placeholder={ placeholder }
-					accept="image/*"
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					handleUpload={ ( files ) => files.length === 1 }
 					value={ { id, src } }

package/src/image/image.js

@@ -718,7 +718,6 @@ export default function Image( {
 					mediaId={ id }
 					mediaURL={ url }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*"
 					onSelect={ onSelectImage }
 					onSelectURL={ onSelectURL }
 					onError={ onUploadError }

package/src/image/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -13,6 +14,9 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -62,15 +66,15 @@ export const settings = {
 	deprecated,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+if ( window.__experimentalContentOnlyInspectorFields ) {
+	settings[ fieldsKey ] = [
 		{
+			id: 'image',
 			label: __( 'Image' ),
-			type: 'Media',
-			shownByDefault: true,
+			type: 'media',
 			mapping: {
 				id: 'id',
-				src: 'url',
+				url: 'url',
 				caption: 'caption',
 				alt: 'alt',
 			},
@@ -80,33 +84,30 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 			},
 		},
 		{
+			id: 'link',
 			label: __( 'Link' ),
-			type: 'Link',
-			shownByDefault: false,
+			type: 'link',
 			mapping: {
-				href: 'href',
+				url: 'href',
 				rel: 'rel',
-				target: 'linkTarget',
+				linkTarget: 'linkTarget',
 				destination: 'linkDestination',
 			},
 		},
 		{
+			id: 'caption',
 			label: __( 'Caption' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'caption',
-			},
+			type: 'richtext',
 		},
 		{
+			id: 'alt',
 			label: __( 'Alt text' ),
-			type: 'PlainText',
-			shownByDefault: false,
-			mapping: {
-				value: 'alt',
-			},
+			type: 'text',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'image' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/image/index.php

@@ -196,6 +196,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$img_styles        = $processor->get_attribute( 'style' );
 	$img_width         = 'none';
 	$img_height        = 'none';
+	$img_srcset        = false;
 	$aria_label        = __( 'Enlarge' );
 	$dialog_aria_label = __( 'Enlarged 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

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { listItem as icon } from '@wordpress/icons';
 import { privateApis } from '@wordpress/block-editor';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -15,6 +16,8 @@ import save from './save';
 import transforms from './transforms';
 import { unlock } from '../lock-unlock';
 
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
+
 const { name } = metadata;
 
 export { metadata, name };
@@ -33,17 +36,17 @@ export const settings = {
 	[ unlock( privateApis ).requiresWrapperOnCopy ]: true,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+if ( window.__experimentalContentOnlyInspectorFields ) {
+	settings[ fieldsKey ] = [
 		{
+			id: 'content',
 			label: __( 'Content' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: 'content',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'content' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/math/block.json

@@ -8,7 +8,34 @@
 	"keywords": [ "equation", "formula", "latex", "mathematics" ],
 	"textdomain": "default",
 	"supports": {
-		"html": false
+		"html": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"attributes": {
 		"latex": {

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,
@@ -14,6 +14,7 @@ import {
 } from '@wordpress/components';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -72,7 +73,8 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 					placement="bottom-start"
 					offset={ 8 }
 					anchor={ blockRef }
-					focusOnMount="firstContentElement"
+					focusOnMount={ false }
+					__unstableSlotName="__unstable-block-tools-after"
 				>
 					<div style={ { padding: '4px', minWidth: '300px' } }>
 						<VStack spacing={ 1 }>
@@ -96,6 +98,15 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 										setError( null );
 									} catch ( err ) {
 										setError( err.message );
+										speak(
+											sprintf(
+												/* translators: %s: error message returned when parsing LaTeX. */
+												__(
+													'Error parsing mathematical expression: %s'
+												),
+												err.message
+											)
+										);
 									}
 									setAttributes( {
 										mathML: newMathML,
@@ -110,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}" />
 								</>