@wordpress/block-library 9.35.1-next.16d95556a.0 → 9.36.0

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,4 +73,17 @@ export const settings = {
 	variations,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'content',
+			label: __( '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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
 	Modal,
@@ -10,7 +10,7 @@ import {
 	Flex,
 	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';
@@ -40,32 +40,17 @@ export default function HTMLEditModal( {
 	const [ isFullscreen, setIsFullscreen ] = useState( false );
 
 	// Check if user has permission to save scripts and get editor styles
-	const { canUserUseUnfilteredHTML, editorStyles } = useSelect(
-		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
-			return {
-				canUserUseUnfilteredHTML:
-					settings.__experimentalCanUserUseUnfilteredHTML,
-				editorStyles: settings.styles,
-			};
-		},
-		[]
-	);
+	const { canUserUseUnfilteredHTML } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			canUserUseUnfilteredHTML:
+				settings.__experimentalCanUserUseUnfilteredHTML,
+		};
+	}, [] );
 
 	// Show JS tab if user has permission OR if block contains JavaScript
 	const shouldShowJsTab = canUserUseUnfilteredHTML || js.trim() !== '';
 
-	// Combine all editor styles to inject into modal
-	const styleContent = useMemo( () => {
-		if ( ! editorStyles ) {
-			return '';
-		}
-		return editorStyles
-			.filter( ( style ) => style.css )
-			.map( ( style ) => style.css )
-			.join( '\n' );
-	}, [ editorStyles ] );
-
 	if ( ! isOpen ) {
 		return null;
 	}
@@ -131,14 +116,17 @@ export default function HTMLEditModal( {
 				isFullScreen={ isFullscreen }
 				__experimentalHideHeader
 			>
-				{ styleContent && (
-					<style
-						dangerouslySetInnerHTML={ { __html: styleContent } }
-					/>
-				) }
 				<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>
@@ -165,9 +153,8 @@ export default function HTMLEditModal( {
 							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 }
@@ -212,10 +199,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,
@@ -229,6 +213,7 @@ export default function HTMLEditModal( {
 							alignment="center"
 							justify="flex-end"
 							spacing={ 4 }
+							className="block-library-html__modal-footer"
 						>
 							<Button
 								__next40pxDefaultSize
@@ -245,7 +230,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,4 +66,48 @@ export const settings = {
 	deprecated,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'image',
+			label: __( 'Image' ),
+			type: 'media',
+			mapping: {
+				id: 'id',
+				url: 'url',
+				caption: 'caption',
+				alt: 'alt',
+			},
+			args: {
+				allowedTypes: [ 'image' ],
+				multiple: false,
+			},
+		},
+		{
+			id: 'link',
+			label: __( 'Link' ),
+			type: 'link',
+			mapping: {
+				url: 'href',
+				rel: 'rel',
+				linkTarget: 'linkTarget',
+				destination: 'linkDestination',
+			},
+		},
+		{
+			id: 'caption',
+			label: __( 'Caption' ),
+			type: 'richtext',
+		},
+		{
+			id: 'alt',
+			label: __( 'Alt text' ),
+			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/list-item/index.js

@@ -1,8 +1,10 @@
 /**
  * WordPress dependencies
  */
+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
@@ -14,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 };
@@ -32,4 +36,17 @@ export const settings = {
 	[ unlock( privateApis ).requiresWrapperOnCopy ]: true,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'content',
+			label: __( '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

@@ -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,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 										setError( null );
 									} catch ( err ) {
 										setError( err.message );
+										speak( err.message );
 									}
 									setAttributes( {
 										mathML: newMathML,

package/src/media-text/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { mediaAndText 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;
 
@@ -50,4 +54,37 @@ export const settings = {
 	deprecated,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'media',
+			label: __( 'Media' ),
+			type: 'media',
+			mapping: {
+				id: 'mediaId',
+				type: 'mediaType',
+				url: 'mediaUrl',
+				link: 'mediaLink',
+			},
+			args: {
+				allowedTypes: [ 'image', 'video' ],
+				multiple: false,
+			},
+		},
+		{
+			id: 'link',
+			label: __( 'Link' ),
+			type: 'link',
+			mapping: {
+				url: 'href',
+				rel: 'rel',
+				linkTarget: 'linkTarget',
+			},
+		},
+	];
+	settings[ formKey ] = {
+		fields: [ 'media' ],
+	};
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/media-text/media-container.js

@@ -61,7 +61,6 @@ function ToolbarEditButton( {
 				mediaId={ mediaId }
 				mediaURL={ mediaUrl }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				accept="image/*,video/*"
 				onSelect={ onSelectMedia }
 				onToggleFeaturedImage={ toggleUseFeaturedImage }
 				useFeaturedImage={ useFeaturedImage }
@@ -91,7 +90,6 @@ function PlaceholderContainer( {
 			} }
 			className={ className }
 			onSelect={ onSelectMedia }
-			accept="image/*,video/*"
 			onToggleFeaturedImage={ toggleUseFeaturedImage }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			onError={ onUploadError }

package/src/missing/block.json

@@ -26,7 +26,7 @@
 		"lock": false,
 		"reusable": false,
 		"renaming": false,
-		"blockVisibility": false,
+		"visibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/missing/edit.js

@@ -66,12 +66,12 @@ export default function MissingEdit( { attributes, clientId } ) {
 	) {
 		if ( hasHTMLBlock ) {
 			messageHTML = __(
-				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely. Alternatively, you can refresh the page to use the Classic block.'
+				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely. Alternatively, if you have unsaved changes, you can save them and refresh to use the Classic block.'
 			);
 			actions.push( convertToHtmlButton );
 		} else {
 			messageHTML = __(
-				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, or remove it entirely. Alternatively, you can refresh the page to use the Classic block.'
+				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, or remove it entirely. Alternatively, if you have unsaved changes, you can save them and refresh to use the Classic block.'
 			);
 		}
 	} else if ( hasContent && hasHTMLBlock ) {

package/src/more/index.js

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { more as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -11,6 +13,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;
 
@@ -35,4 +40,17 @@ export const settings = {
 	save,
 };
 
+if ( window.__experimentalContentOnlyPatternInsertion ) {
+	settings[ fieldsKey ] = [
+		{
+			id: 'customText',
+			label: __( 'Content' ),
+			type: 'richtext',
+		},
+	];
+	settings[ formKey ] = {
+		fields: [ 'customText' ],
+	};
+}
+
 export const init = () => initBlock( { name, metadata, settings } );

package/src/navigation/block.json

@@ -105,6 +105,7 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"ariaLabel": true,
+		"contentRole": true,
 		"html": false,
 		"inserter": true,
 		"typography": {
@@ -138,8 +139,7 @@
 			}
 		},
 		"interactivity": true,
-		"renaming": false,
-		"contentRole": true
+		"renaming": false
 	},
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"

package/src/navigation-link/block.json

@@ -34,7 +34,8 @@
 			"default": false
 		},
 		"url": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"title": {
 			"type": "string"