@wordpress/block-library 8.13.0 → 8.14.0

package/src/block/edit.native.js

@@ -132,12 +132,8 @@ export default function ReusableBlockEdit( {
 	}
 
 	const onConvertToRegularBlocks = useCallback( () => {
-		const successNotice =
-			innerBlockCount > 1
-				? /* translators: %s: name of the reusable block */
-				  __( '%s converted to regular blocks' )
-				: /* translators: %s: name of the reusable block */
-				  __( '%s converted to regular block' );
+		/* translators: %s: name of the synced block */
+		const successNotice = __( '%s detached' );
 		createSuccessNotice( sprintf( successNotice, title ) );
 
 		clearSelectedBlock();
@@ -152,14 +148,14 @@ export default function ReusableBlockEdit( {
 				? sprintf(
 						/* translators: %s: name of the host app (e.g. WordPress) */
 						__(
-							'Editing reusable blocks is not yet supported on %s for Android'
+							'Editing synced patterns is not yet supported on %s for Android'
 						),
 						hostAppNamespace
 				  )
 				: sprintf(
 						/* translators: %s: name of the host app (e.g. WordPress) */
 						__(
-							'Editing reusable blocks is not yet supported on %s for iOS'
+							'Editing synced patterns is not yet supported on %s for iOS'
 						),
 						hostAppNamespace
 				  );
@@ -182,17 +178,17 @@ export default function ReusableBlockEdit( {
 					<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
 						{ innerBlockCount > 1
 							? __(
-									'Alternatively, you can detach and edit these blocks separately by tapping “Convert to regular blocks”.'
+									'Alternatively, you can detach and edit these blocks separately by tapping “Detach patterns”.'
 							  )
 							: __(
-									'Alternatively, you can detach and edit this block separately by tapping “Convert to regular block”.'
+									'Alternatively, you can detach and edit this block separately by tapping “Detach pattern”.'
 							  ) }
 					</Text>
 					<TextControl
 						label={
 							innerBlockCount > 1
-								? __( 'Convert to regular blocks' )
-								: __( 'Convert to regular block' )
+								? __( 'Detach patterns' )
+								: __( 'Detach pattern' )
 						}
 						separatorType="topFullWidth"
 						onPress={ onConvertToRegularBlocks }

package/src/block/test/edit.native.js

@@ -56,8 +56,8 @@ afterAll( () => {
 	} );
 } );
 
-describe( 'Reusable block', () => {
-	it( 'inserts a reusable block', async () => {
+describe( 'Synced patterns', () => {
+	it( 'inserts a synced pattern', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const reusableBlockMock1 = getMockedReusableBlock( 1 );
 		const reusableBlockMock2 = getMockedReusableBlock( 2 );
@@ -86,7 +86,7 @@ describe( 'Reusable block', () => {
 		fireEvent.press( await screen.findByLabelText( 'Add block' ) );
 
 		// Navigate to reusable tab.
-		const reusableSegment = await screen.findByText( 'Reusable' );
+		const reusableSegment = await screen.findByText( 'Synced patterns' );
 		// onLayout event is required by Segment component.
 		fireEvent( reusableSegment, 'layout', {
 			nativeEvent: {
@@ -98,7 +98,7 @@ describe( 'Reusable block', () => {
 		fireEvent.press( reusableSegment );
 
 		const reusableBlockList = screen.getByTestId(
-			'InserterUI-ReusableBlocks'
+			'InserterUI-SyncedPatterns'
 		);
 		// onScroll event used to force the FlatList to render all items.
 		fireEvent.scroll( reusableBlockList, {

package/src/buttons/edit.js

@@ -36,7 +36,7 @@ const DEFAULT_BLOCK = {
 };
 
 function ButtonsEdit( { attributes, className } ) {
-	const { fontSize, style } = attributes;
+	const { fontSize, layout, style } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
@@ -59,8 +59,8 @@ function ButtonsEdit( { attributes, className } ) {
 				{ className: preferredStyle && `is-style-${ preferredStyle }` },
 			],
 		],
-
 		templateInsertUpdatesSelection: true,
+		orientation: layout?.orientation ?? 'horizontal',
 	} );
 
 	return <div { ...innerBlocksProps } />;

package/src/categories/block.json

@@ -33,7 +33,11 @@
 		"html": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/code/block.json

@@ -31,7 +31,11 @@
 		},
 		"spacing": {
 			"margin": [ "top", "bottom" ],
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"__experimentalBorder": {
 			"radius": true,

package/src/column/block.json

@@ -28,6 +28,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/comments/block.json

@@ -21,6 +21,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/cover/block.json

@@ -108,6 +108,7 @@
 		},
 		"color": {
 			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
+			"heading": true,
 			"text": true,
 			"background": false,
 			"__experimentalSkipSerialization": [ "gradients" ]

package/src/cover/edit/inspector-controls.js

@@ -303,6 +303,7 @@ export default function CoverInspectorControls( {
 							max={ 100 }
 							step={ 10 }
 							required
+							__next40pxDefaultSize
 						/>
 					</ToolsPanelItem>
 				</InspectorControls>

package/src/details/block.json

@@ -34,7 +34,11 @@
 		"html": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/embed/util.js

@@ -1,18 +1,13 @@
-/**
- * Internal dependencies
- */
-import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
-
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
 import classnames from 'classnames/dedupe';
 import memoize from 'memize';
 
 /**
  * WordPress dependencies
  */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { renderToString } from '@wordpress/element';
 import {
 	createBlock,
@@ -24,8 +19,11 @@ import {
  * Internal dependencies
  */
 import metadata from './block.json';
+import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
+import { unlock } from '../lock-unlock';
 
 const { name: DEFAULT_EMBED_BLOCK } = metadata;
+const { kebabCase } = unlock( blockEditorPrivateApis );
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 

package/src/file/block.json

@@ -65,7 +65,8 @@
 				"background": true,
 				"link": true
 			}
-		}
+		},
+		"interactivity": true
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",

package/src/file/index.php

@@ -5,23 +5,6 @@
  * @package WordPress
  */
 
-if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-	/**
-	 * Replaces view script for the File block with version using Interactivity API.
-	 *
-	 * @param array $metadata Block metadata as read in via block.json.
-	 *
-	 * @return array Filtered block type metadata.
-	 */
-	function gutenberg_block_core_file_update_interactive_view_script( $metadata ) {
-		if ( 'core/file' === $metadata['name'] ) {
-			$metadata['viewScript'] = array( 'file:./interactivity.min.js' );
-		}
-		return $metadata;
-	}
-	add_filter( 'block_type_metadata', 'gutenberg_block_core_file_update_interactive_view_script', 10, 1 );
-}
-
 /**
  * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-file-view` script.
  *

package/src/file/view.js

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

package/src/footnotes/index.php

@@ -59,15 +59,17 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
  * Registers the `core/footnotes` block on the server.
  */
 function register_block_core_footnotes() {
-	register_post_meta(
-		'post',
-		'footnotes',
-		array(
-			'show_in_rest' => true,
-			'single'       => true,
-			'type'         => 'string',
-		)
-	);
+	foreach ( array( 'post', 'page' ) as $post_type ) {
+		register_post_meta(
+			$post_type,
+			'footnotes',
+			array(
+				'show_in_rest' => true,
+				'single'       => true,
+				'type'         => 'string',
+			)
+		);
+	}
 	register_block_type_from_metadata(
 		__DIR__ . '/footnotes',
 		array(

package/src/footnotes/style.scss

@@ -3,7 +3,7 @@
 	counter-reset: footnotes;
 }
 
-.fn {
+[data-fn].fn {
 	vertical-align: super;
 	font-size: smaller;
 	counter-increment: footnotes;
@@ -11,7 +11,7 @@
 	text-indent: -9999999px;
 }
 
-.fn::after {
+[data-fn].fn::after {
 	content: "[" counter(footnotes) "]";
 	text-indent: 0;
 	float: left;

package/src/gallery/block.json

@@ -115,7 +115,9 @@
 			"blockGap": [ "horizontal", "vertical" ],
 			"__experimentalSkipSerialization": [ "blockGap" ],
 			"__experimentalDefaultControls": {
-				"blockGap": true
+				"blockGap": true,
+				"margin": false,
+				"padding": false
 			}
 		},
 		"color": {

package/src/group/block.json

@@ -29,6 +29,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/heading/block.json

@@ -40,7 +40,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/heading/test/index.native.js

@@ -112,4 +112,22 @@ describe( 'Heading block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'change level dropdown displays active selection', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Heading' );
+		const headingBlock = await getBlock( screen, 'Heading' );
+
+		// Act
+		fireEvent.press( headingBlock );
+		fireEvent.press( screen.getByLabelText( 'Change level' ) );
+
+		// Assert
+		expect(
+			within( screen.getByLabelText( 'Heading 2' ) ).getByTestId(
+				'bottom-sheet-cell-selected-icon'
+			)
+		).toBeVisible();
+	} );
 } );

package/src/image/block.json

@@ -69,6 +69,12 @@
 		"height": {
 			"type": "number"
 		},
+		"aspectRatio": {
+			"type": "string"
+		},
+		"scale": {
+			"type": "string"
+		},
 		"sizeSlug": {
 			"type": "string"
 		},