@wordpress/block-library 8.18.0 → 8.19.0

package/src/file/test/__snapshots__/edit.native.js.snap

@@ -64,7 +64,7 @@ exports[`File block renders file error state without crashing 1`] = `
           ]
         }
       >
-        <View
+        <RCTAztecView
           accessibilityState={
             {
               "busy": undefined,
@@ -74,73 +74,59 @@ exports[`File block renders file error state without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityValue={
+          accessible={true}
+          activeFormats={[]}
+          blockType={
             {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+              "tag": "p",
             }
           }
-          accessible={false}
-          collapsable={false}
+          deleteEnter={true}
+          disableEditingMenu={false}
           focusable={true}
+          fontFamily="serif"
+          fontSize={16}
+          isMultiline={false}
+          maxImagesWidth={200}
+          onBackspace={[Function]}
           onBlur={[Function]}
+          onChange={[Function]}
           onClick={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
           onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
+          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-        >
-          <RCTAztecView
-            activeFormats={[]}
-            blockType={
-              {
-                "tag": "p",
-              }
-            }
-            deleteEnter={true}
-            disableEditingMenu={false}
-            fontFamily="serif"
-            fontSize={16}
-            isMultiline={false}
-            maxImagesWidth={200}
-            onBackspace={[Function]}
-            onBlur={[Function]}
-            onChange={[Function]}
-            onContentSizeChange={[Function]}
-            onEnter={[Function]}
-            onFocus={[Function]}
-            onHTMLContentWithCursor={[Function]}
-            onKeyDown={[Function]}
-            onPaste={[Function]}
-            onSelectionChange={[Function]}
-            placeholder="File name"
-            placeholderTextColor="gray"
-            selectionColor="black"
-            style={
-              {
-                "backgroundColor": undefined,
-                "maxWidth": undefined,
-                "minHeight": 0,
-              }
+          placeholder="File name"
+          placeholderTextColor="gray"
+          selectionColor="black"
+          style={
+            {
+              "backgroundColor": undefined,
+              "maxWidth": undefined,
+              "minHeight": 0,
             }
-            text={
-              {
-                "eventCount": undefined,
-                "linkTextColor": undefined,
-                "selection": null,
-                "tag": "p",
-                "text": "<p>File name</p>",
-              }
+          }
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "<p>File name</p>",
             }
-            textAlign="left"
-            triggerKeyCodes={[]}
-          />
-        </View>
+          }
+          textAlign="left"
+          triggerKeyCodes={[]}
+        />
       </View>
       <View>
         <Svg
@@ -193,7 +179,7 @@ exports[`File block renders file error state without crashing 1`] = `
           ]
         }
       >
-        <View
+        <RCTAztecView
           accessibilityState={
             {
               "busy": undefined,
@@ -203,76 +189,62 @@ exports[`File block renders file error state without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityValue={
+          accessible={true}
+          activeFormats={[]}
+          blockType={
             {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+              "tag": "p",
             }
           }
-          accessible={false}
-          collapsable={false}
+          color="white"
+          deleteEnter={true}
+          disableEditingMenu={false}
           focusable={true}
+          fontFamily="serif"
+          fontSize={16}
+          isMultiline={false}
+          maxImagesWidth={200}
+          minWidth={40}
+          onBackspace={[Function]}
           onBlur={[Function]}
+          onChange={[Function]}
           onClick={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
           onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
+          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-        >
-          <RCTAztecView
-            activeFormats={[]}
-            blockType={
-              {
-                "tag": "p",
-              }
-            }
-            color="white"
-            deleteEnter={true}
-            disableEditingMenu={false}
-            fontFamily="serif"
-            fontSize={16}
-            isMultiline={false}
-            maxImagesWidth={200}
-            minWidth={40}
-            onBackspace={[Function]}
-            onBlur={[Function]}
-            onChange={[Function]}
-            onContentSizeChange={[Function]}
-            onEnter={[Function]}
-            onFocus={[Function]}
-            onHTMLContentWithCursor={[Function]}
-            onKeyDown={[Function]}
-            onPaste={[Function]}
-            onSelectionChange={[Function]}
-            placeholder=""
-            placeholderTextColor="white"
-            selectionColor="white"
-            style={
-              {
-                "backgroundColor": undefined,
-                "color": "white",
-                "maxWidth": 80,
-                "minHeight": 0,
-              }
+          placeholder=""
+          placeholderTextColor="white"
+          selectionColor="white"
+          style={
+            {
+              "backgroundColor": undefined,
+              "color": "white",
+              "maxWidth": 80,
+              "minHeight": 0,
             }
-            text={
-              {
-                "eventCount": undefined,
-                "linkTextColor": undefined,
-                "selection": null,
-                "tag": "p",
-                "text": "<p>Download</p>",
-              }
+          }
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "<p>Download</p>",
             }
-            textAlign="center"
-            triggerKeyCodes={[]}
-          />
-        </View>
+          }
+          textAlign="center"
+          triggerKeyCodes={[]}
+        />
       </View>
     </View>
   </View>
@@ -343,7 +315,7 @@ exports[`File block renders file without crashing 1`] = `
           ]
         }
       >
-        <View
+        <RCTAztecView
           accessibilityState={
             {
               "busy": undefined,
@@ -353,73 +325,59 @@ exports[`File block renders file without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityValue={
+          accessible={true}
+          activeFormats={[]}
+          blockType={
             {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+              "tag": "p",
             }
           }
-          accessible={false}
-          collapsable={false}
+          deleteEnter={true}
+          disableEditingMenu={false}
           focusable={true}
+          fontFamily="serif"
+          fontSize={16}
+          isMultiline={false}
+          maxImagesWidth={200}
+          onBackspace={[Function]}
           onBlur={[Function]}
+          onChange={[Function]}
           onClick={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
           onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
+          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-        >
-          <RCTAztecView
-            activeFormats={[]}
-            blockType={
-              {
-                "tag": "p",
-              }
-            }
-            deleteEnter={true}
-            disableEditingMenu={false}
-            fontFamily="serif"
-            fontSize={16}
-            isMultiline={false}
-            maxImagesWidth={200}
-            onBackspace={[Function]}
-            onBlur={[Function]}
-            onChange={[Function]}
-            onContentSizeChange={[Function]}
-            onEnter={[Function]}
-            onFocus={[Function]}
-            onHTMLContentWithCursor={[Function]}
-            onKeyDown={[Function]}
-            onPaste={[Function]}
-            onSelectionChange={[Function]}
-            placeholder="File name"
-            placeholderTextColor="gray"
-            selectionColor="black"
-            style={
-              {
-                "backgroundColor": undefined,
-                "maxWidth": undefined,
-                "minHeight": 0,
-              }
+          placeholder="File name"
+          placeholderTextColor="gray"
+          selectionColor="black"
+          style={
+            {
+              "backgroundColor": undefined,
+              "maxWidth": undefined,
+              "minHeight": 0,
             }
-            text={
-              {
-                "eventCount": undefined,
-                "linkTextColor": undefined,
-                "selection": null,
-                "tag": "p",
-                "text": "<p>File name</p>",
-              }
+          }
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "<p>File name</p>",
             }
-            textAlign="left"
-            triggerKeyCodes={[]}
-          />
-        </View>
+          }
+          textAlign="left"
+          triggerKeyCodes={[]}
+        />
       </View>
     </View>
     <View
@@ -446,7 +404,7 @@ exports[`File block renders file without crashing 1`] = `
           ]
         }
       >
-        <View
+        <RCTAztecView
           accessibilityState={
             {
               "busy": undefined,
@@ -456,76 +414,62 @@ exports[`File block renders file without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityValue={
+          accessible={true}
+          activeFormats={[]}
+          blockType={
             {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+              "tag": "p",
             }
           }
-          accessible={false}
-          collapsable={false}
+          color="white"
+          deleteEnter={true}
+          disableEditingMenu={false}
           focusable={true}
+          fontFamily="serif"
+          fontSize={16}
+          isMultiline={false}
+          maxImagesWidth={200}
+          minWidth={40}
+          onBackspace={[Function]}
           onBlur={[Function]}
+          onChange={[Function]}
           onClick={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
           onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
+          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-        >
-          <RCTAztecView
-            activeFormats={[]}
-            blockType={
-              {
-                "tag": "p",
-              }
-            }
-            color="white"
-            deleteEnter={true}
-            disableEditingMenu={false}
-            fontFamily="serif"
-            fontSize={16}
-            isMultiline={false}
-            maxImagesWidth={200}
-            minWidth={40}
-            onBackspace={[Function]}
-            onBlur={[Function]}
-            onChange={[Function]}
-            onContentSizeChange={[Function]}
-            onEnter={[Function]}
-            onFocus={[Function]}
-            onHTMLContentWithCursor={[Function]}
-            onKeyDown={[Function]}
-            onPaste={[Function]}
-            onSelectionChange={[Function]}
-            placeholder=""
-            placeholderTextColor="white"
-            selectionColor="white"
-            style={
-              {
-                "backgroundColor": undefined,
-                "color": "white",
-                "maxWidth": 80,
-                "minHeight": 0,
-              }
+          placeholder=""
+          placeholderTextColor="white"
+          selectionColor="white"
+          style={
+            {
+              "backgroundColor": undefined,
+              "color": "white",
+              "maxWidth": 80,
+              "minHeight": 0,
             }
-            text={
-              {
-                "eventCount": undefined,
-                "linkTextColor": undefined,
-                "selection": null,
-                "tag": "p",
-                "text": "<p>Download</p>",
-              }
+          }
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "<p>Download</p>",
             }
-            textAlign="center"
-            triggerKeyCodes={[]}
-          />
-        </View>
+          }
+          textAlign="center"
+          triggerKeyCodes={[]}
+        />
       </View>
     </View>
   </View>

package/src/file/utils/index.js

@@ -54,18 +54,3 @@ const createActiveXObject = ( type ) => {
 	}
 	return ax;
 };
-
-/**
- * Hides all .wp-block-file__embed elements on the document. This function is only intended
- * to be run on the front-end, it may have weird side effects running in the block editor.
- */
-export const hidePdfEmbedsOnUnsupportedBrowsers = () => {
-	if ( ! browserSupportsPdfs() ) {
-		const embeds = document.getElementsByClassName(
-			'wp-block-file__embed'
-		);
-		Array.from( embeds ).forEach( ( embed ) => {
-			embed.style.display = 'none';
-		} );
-	}
-};

package/src/file/view.js

@@ -1,9 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { hidePdfEmbedsOnUnsupportedBrowsers } from './utils';
+import { browserSupportsPdfs } from './utils';
 
-document.addEventListener(
-	'DOMContentLoaded',
-	hidePdfEmbedsOnUnsupportedBrowsers
-);
+store( {
+	selectors: {
+		core: {
+			file: {
+				hasPdfPreview: browserSupportsPdfs() ? 'inherit' : 'none',
+			},
+		},
+	},
+} );

package/src/footnotes/edit.js

@@ -23,7 +23,9 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 				<Placeholder
 					icon={ <BlockIcon icon={ icon } /> }
 					label={ __( 'Footnotes' ) }
-					// To do: add instructions. We can't add new string in RC.
+					instructions={ __(
+						'Footnotes are not supported here. Add this block to post or page content.'
+					) }
 				/>
 			</div>
 		);
@@ -46,7 +48,19 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 	return (
 		<ol { ...blockProps }>
 			{ footnotes.map( ( { id, content } ) => (
-				<li key={ id }>
+				/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+				<li
+					key={ id }
+					onMouseDown={ ( event ) => {
+						// When clicking on the list item (not on descendants),
+						// focus the rich text element since it's only 1px wide when
+						// empty.
+						if ( event.target === event.currentTarget ) {
+							event.target.firstElementChild.focus();
+							event.preventDefault();
+						}
+					} }
+				>
 					<RichText
 						id={ id }
 						tagName="span"

package/src/gallery/edit.js

@@ -75,7 +75,7 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const allowedBlocks = [ 'core/image' ];
 
 const PLACEHOLDER_TEXT = Platform.isNative
-	? __( 'ADD MEDIA' )
+	? __( 'Add media' )
 	: __( 'Drag images, upload new ones or select files from your library.' );
 
 const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative

package/src/gallery/index.php

@@ -44,7 +44,7 @@ add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility'
  * @return string The content of the block being rendered.
  */
 function block_core_gallery_render( $attributes, $content ) {
-	$gap = _wp_array_get( $attributes, array( 'style', 'spacing', 'blockGap' ) );
+	$gap = $attributes['style']['spacing']['blockGap'] ?? null;
 	// Skip if gap value contains unsupported characters.
 	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
 	// because we only want to match against the value, not the CSS attribute.

package/src/group/block.json

@@ -24,13 +24,18 @@
 		"__experimentalOnEnter": true,
 		"__experimentalOnMerge": true,
 		"__experimentalSettings": true,
+		"__experimentalMetadata": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
 		"ariaLabel": true,
 		"html": false,
+		"background": {
+			"backgroundImage": true
+		},
 		"color": {
 			"gradients": true,
 			"heading": true,
+			"button": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/group/edit.js

@@ -162,7 +162,6 @@ function GroupEdit( {
 				<View>
 					{ innerBlocksProps.children }
 					<GroupPlaceHolder
-						clientId={ clientId }
 						name={ name }
 						onSelect={ selectVariation }
 					/>

package/src/heading/block.json

@@ -55,12 +55,14 @@
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true,
 				"fontAppearance": true,
 				"textTransform": true
 			}
 		},
+		"__unstablePasteTextInline": true,
 		"__experimentalSlashInserter": true
 	},
 	"editorStyle": "wp-block-heading-editor",

package/src/heading/edit.js

@@ -132,7 +132,6 @@ function HeadingEdit( {
 				} }
 				onReplace={ onReplace }
 				onRemove={ () => onReplace( [] ) }
-				aria-label={ __( 'Heading text' ) }
 				placeholder={ placeholder || __( 'Heading' ) }
 				textAlign={ textAlign }
 				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side

package/src/heading/style.scss

@@ -7,4 +7,8 @@ h6 {
 	&.has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;
 	}
+	&.has-text-align-right[style*="writing-mode"]:where([style*="vertical-rl"]),
+	&.has-text-align-left[style*="writing-mode"]:where([style*="vertical-lr"]) {
+		rotate: 180deg;
+	}
 }

package/src/heading/transforms.js

@@ -73,12 +73,7 @@ const transforms = {
 		...[ 1, 2, 3, 4, 5, 6 ].map( ( level ) => ( {
 			type: 'enter',
 			regExp: new RegExp( `^/(h|H)${ level }$` ),
-			transform( content ) {
-				return createBlock( 'core/heading', {
-					level,
-					content,
-				} );
-			},
+			transform: () => createBlock( 'core/heading', { level } ),
 		} ) ),
 	],
 	to: [