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

package/src/gallery/edit.js

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

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;
 
@@ -70,16 +74,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	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

@@ -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';
@@ -117,8 +117,16 @@ 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>
@@ -145,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 }
@@ -192,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,
@@ -209,6 +213,7 @@ export default function HTMLEditModal( {
 							alignment="center"
 							justify="flex-end"
 							spacing={ 4 }
+							className="block-library-html__modal-footer"
 						>
 							<Button
 								__next40pxDefaultSize
@@ -225,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;
 
@@ -63,14 +67,14 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	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/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 };
@@ -34,16 +37,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	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

@@ -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;
 
@@ -51,15 +55,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'media',
 			label: __( 'Media' ),
-			type: 'Media',
-			shownByDefault: true,
+			type: 'media',
 			mapping: {
 				id: 'mediaId',
 				type: 'mediaType',
-				src: 'mediaUrl',
+				url: 'mediaUrl',
+				link: 'mediaLink',
 			},
 			args: {
 				allowedTypes: [ 'image', 'video' ],
@@ -67,16 +72,19 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 			},
 		},
 		{
+			id: 'link',
 			label: __( 'Link' ),
-			type: 'Link',
-			shownByDefault: false,
+			type: 'link',
 			mapping: {
-				href: 'href',
+				url: 'href',
 				rel: 'rel',
-				target: 'linkTarget',
+				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

@@ -3,6 +3,7 @@
  */
 import { more as icon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -12,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;
 
@@ -37,16 +41,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'customText',
 			label: __( 'Content' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: 'customText',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'customText' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );