@wordpress/block-library 6.0.2 → 6.0.3

package/src/embed/variations.js

@@ -25,6 +25,7 @@ import {
 	embedAnimotoIcon,
 	embedDailymotionIcon,
 	embedPinterestIcon,
+	embedWolframIcon,
 } from './icons';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
@@ -341,6 +342,14 @@ const variations = [
 		],
 		attributes: { providerNameSlug: 'pinterest' },
 	},
+	{
+		name: 'wolfram-cloud',
+		title: 'Wolfram Cloud',
+		icon: embedWolframIcon,
+		description: __( 'Embed Wolfram Cloud notebook content.' ),
+		patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ],
+		attributes: { providerNameSlug: 'wolfram-cloud', responsive: true },
+	},
 ];
 
 /**

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

@@ -13,6 +13,10 @@ import { MediaUploadProgress } from '@wordpress/block-editor';
  */
 import { FileEdit } from '../edit.native.js';
 
+// react-native-aztec shouldn't be mocked because these tests are based on
+// snapshot testing where we want to keep the original component.
+jest.unmock( '@wordpress/react-native-aztec' );
+
 const getTestComponentWithContent = ( attributes = {} ) => {
 	return renderer.create(
 		<FileEdit

package/src/freeform/edit.js

@@ -6,7 +6,12 @@ import { debounce } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { BlockControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	BlockControls,
+	useBlockProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { ToolbarGroup } from '@wordpress/components';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -41,6 +46,7 @@ export default function ClassicEdit( {
 	setAttributes,
 	onReplace,
 } ) {
+	const { getMultiSelectedBlockClientIds } = useSelect( blockEditorStore );
 	const didMount = useRef( false );
 
 	useEffect( () => {
@@ -83,9 +89,13 @@ export default function ClassicEdit( {
 				);
 				const scrollPosition = scrollContainer.scrollTop;
 
-				setAttributes( {
-					content: editor.getContent(),
-				} );
+				// Only update attributes if we aren't multi-selecting blocks.
+				// Updating during multi-selection can overwrite attributes of other blocks.
+				if ( ! getMultiSelectedBlockClientIds()?.length ) {
+					setAttributes( {
+						content: editor.getContent(),
+					} );
+				}
 
 				editor.once( 'focus', () => {
 					if ( bookmark ) {

package/src/gallery/block.json

@@ -79,6 +79,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"fixedHeight": {
+			"type": "boolean",
+			"default": true
+		},
 		"linkTarget": {
 			"type": "string"
 		},
@@ -96,7 +100,8 @@
 	},
 	"providesContext": {
 		"allowResize": "allowResize",
-		"imageCrop": "imageCrop"
+		"imageCrop": "imageCrop",
+		"fixedHeight": "fixedHeight"
 	},
 	"supports": {
 		"anchor": true,

package/src/gallery/edit.js

@@ -53,6 +53,11 @@ import useShortCodeTransform from './use-short-code-transform';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
 
+/**
+ * Internal dependencies
+ */
+import useMobileWarning from './use-mobile-warning';
+
 const MAX_COLUMNS = 8;
 const linkOptions = [
 	{ value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) },
@@ -92,7 +97,7 @@ function GalleryEdit( props ) {
 		shortCodeTransforms,
 		sizeSlug,
 	} = attributes;
-
+	useMobileWarning();
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceInnerBlocks,

package/src/gallery/editor.scss

@@ -77,7 +77,6 @@ figure.wp-block-gallery {
 	}
 }
 
-
 /**
  * Gallery inspector controls settings.
  */

package/src/gallery/gallery.js

@@ -6,10 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
-} from '@wordpress/block-editor';
+import { RichText, useInnerBlocksProps } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';

package/src/gallery/gallery.native.js

@@ -14,10 +14,7 @@ import styles from './gallery-styles.scss';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	BlockCaption,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
-} from '@wordpress/block-editor';
+import { BlockCaption, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import { mediaUploadSync } from '@wordpress/react-native-bridge';
 import { WIDE_ALIGNMENTS } from '@wordpress/components';

package/src/gallery/index.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Server-side rendering of the `core/image` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Handles backwards compatibility for Gallery Blocks,
+ * whose images feature a `data-id` attribute.
+ *
+ * Now that the Gallery Block contains inner Image Blocks,
+ * we add a custom `data-id` attribute before rendering the gallery
+ * so that the Image Block can pick it up in its render_callback.
+ *
+ * @param  array $parsed_block A single parsed block object.
+ *
+ * @return array               The migrated block object.
+ */
+function render_block_core_gallery_data( $parsed_block ) {
+	if ( 'core/gallery' === $parsed_block['blockName'] ) {
+		foreach ( $parsed_block['innerBlocks'] as $key => $inner_block ) {
+			if ( 'core/image' === $inner_block['blockName'] ) {
+				if ( ! isset( $parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] ) && isset( $inner_block['attrs']['id'] ) ) {
+					$parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] = esc_attr( $inner_block['attrs']['id'] );
+				}
+			}
+		}
+	}
+
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'render_block_core_gallery_data' );
+
+/**
+ * Registers the `core/gallery` block on server.
+ * This render callback needs to be here
+ * so that the gallery styles are loaded in block-based themes.
+ */
+function gutenberg_register_block_core_gallery() {
+	register_block_type_from_metadata(
+		__DIR__ . '/gallery',
+		array(
+			'render_callback' => function ( $attributes, $content ) {
+				return $content;
+			},
+		)
+	);
+}
+
+add_action( 'init', 'gutenberg_register_block_core_gallery', 20 );

package/src/gallery/save.js

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -25,10 +29,12 @@ export default function saveWithInnerBlocks( { attributes } ) {
 		[ `columns-default` ]: columns === undefined,
 		'is-cropped': imageCrop,
 	} );
+	const blockProps = useBlockProps.save( { className } );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
 	return (
-		<figure { ...useBlockProps.save( { className } ) }>
-			<InnerBlocks.Content />
+		<figure { ...innerBlocksProps }>
+			{ innerBlocksProps.children }
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"

package/src/gallery/shared.js

@@ -3,11 +3,6 @@
  */
 import { get, pick } from 'lodash';
 
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 export function defaultColumnsNumber( imageCount ) {
 	return imageCount ? Math.min( 3, imageCount ) : 3;
 }
@@ -24,7 +19,5 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	if ( fullUrl ) {
 		imageProps.fullUrl = fullUrl;
 	}
-	imageProps.alt =
-		imageProps.alt !== '' ? imageProps.alt : __( 'Image gallery image' );
 	return imageProps;
 };

package/src/gallery/use-mobile-warning.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function useMobileWarning() {
+	const { createWarningNotice } = useDispatch( noticesStore );
+	const { toggleFeature } = useDispatch( interfaceStore );
+	const isMobileWarningActive = useSelect( ( select ) => {
+		const { isFeatureActive } = select( interfaceStore );
+		return isFeatureActive( 'core/edit-post', 'mobileGalleryWarning' );
+	}, [] );
+
+	if ( ! isMobileWarningActive ) {
+		return;
+	}
+
+	createWarningNotice(
+		__(
+			'Editing this Gallery in the WordPress mobile app requires version 18.2 or higher.'
+		),
+		{ type: 'snackbar', explicitDismiss: true }
+	);
+	toggleFeature( 'core/edit-post', 'mobileGalleryWarning' );
+}

package/src/group/block.json

@@ -12,6 +12,7 @@
 			"default": "div"
 		},
 		"templateLock": {
+			"type": "string",
 			"enum": [ "all", "insert", false ]
 		}
 	},

package/src/group/edit.js

@@ -6,7 +6,7 @@ import {
 	InnerBlocks,
 	useBlockProps,
 	InspectorControls,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';

package/src/group/save.js

@@ -1,13 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
-	const { tagName: Tag } = attributes;
-	return (
-		<Tag { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
-		</Tag>
-	);
+export default function save( { attributes: { tagName: Tag } } ) {
+	return <Tag { ...useInnerBlocksProps.save( useBlockProps.save() ) } />;
 }

package/src/group/variations.js

@@ -8,7 +8,7 @@ const variations = [
 		name: 'group-row',
 		title: __( 'Row' ),
 		description: __( 'Blocks shown in a row.' ),
-		attributes: { layout: { type: 'flex' } },
+		attributes: { layout: { type: 'flex', allowOrientation: false } },
 		scope: [ 'inserter' ],
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'flex',

package/src/heading/autogenerate-anchors.js

@@ -3,6 +3,13 @@
  */
 import { deburr, trim } from 'lodash';
 
+/**
+ * Object map tracking anchors.
+ *
+ * @type {Record<string, string | null>}
+ */
+const anchors = {};
+
 /**
  * Returns the text without markup.
  *
@@ -36,13 +43,12 @@ const getSlug = ( content ) => {
 /**
  * Generate the anchor for a heading.
  *
- * @param {string}   clientId          The block ID.
- * @param {string}   content           The block content.
- * @param {string[]} allHeadingAnchors An array containing all headings anchors.
+ * @param {string} clientId The block ID.
+ * @param {string} content  The block content.
  *
  * @return {string|null} Return the heading anchor.
  */
-export const generateAnchor = ( clientId, content, allHeadingAnchors ) => {
+export const generateAnchor = ( clientId, content ) => {
 	const slug = getSlug( content );
 	// If slug is empty, then return null.
 	// Returning null instead of an empty string allows us to check again when the content changes.
@@ -50,16 +56,26 @@ export const generateAnchor = ( clientId, content, allHeadingAnchors ) => {
 		return null;
 	}
 
-	delete allHeadingAnchors[ clientId ];
+	delete anchors[ clientId ];
 
 	let anchor = slug;
 	let i = 0;
 
 	// If the anchor already exists in another heading, append -i.
-	while ( Object.values( allHeadingAnchors ).includes( anchor ) ) {
+	while ( Object.values( anchors ).includes( anchor ) ) {
 		i += 1;
 		anchor = slug + '-' + i;
 	}
 
 	return anchor;
 };
+
+/**
+ * Set the anchor for a heading.
+ *
+ * @param {string}      clientId The block ID.
+ * @param {string|null} anchor   The block anchor.
+ */
+export const setAnchor = ( clientId, anchor ) => {
+	anchors[ clientId ] = anchor;
+};

package/src/heading/block.json

@@ -38,7 +38,15 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontWeight": true
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontAppearance": true,
+				"textTransform": true
+			}
 		},
 		"__experimentalSelector": "h1,h2,h3,h4,h5,h6",
 		"__unstablePasteTextInline": true,

package/src/heading/edit.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
 	AlignmentControl,
 	BlockControls,
@@ -22,9 +22,7 @@ import {
  * Internal dependencies
  */
 import HeadingLevelDropdown from './heading-level-dropdown';
-import { generateAnchor } from './autogenerate-anchors';
-
-const allHeadingAnchors = {};
+import { generateAnchor, setAnchor } from './autogenerate-anchors';
 
 function HeadingEdit( {
 	attributes,
@@ -54,14 +52,13 @@ function HeadingEdit( {
 			// This side-effect should not create an undo level.
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( {
-				anchor: generateAnchor( clientId, content, allHeadingAnchors ),
+				anchor: generateAnchor( clientId, content ),
 			} );
 		}
+		setAnchor( clientId, anchor );
 
-		allHeadingAnchors[ clientId ] = anchor;
-		return () => {
-			delete allHeadingAnchors[ clientId ];
-		};
+		// Remove anchor map when block unmounts.
+		return () => setAnchor( clientId, null );
 	}, [ content, anchor ] );
 
 	const onContentChange = ( value ) => {
@@ -69,13 +66,9 @@ function HeadingEdit( {
 		if (
 			! anchor ||
 			! value ||
-			generateAnchor( clientId, content, allHeadingAnchors ) === anchor
+			generateAnchor( clientId, content ) === anchor
 		) {
-			newAttrs.anchor = generateAnchor(
-				clientId,
-				value,
-				allHeadingAnchors
-			);
+			newAttrs.anchor = generateAnchor( clientId, value );
 		}
 		setAttributes( newAttrs );
 	};
@@ -111,7 +104,9 @@ function HeadingEdit( {
 							content: value,
 						} );
 					} else {
-						block = createBlock( 'core/paragraph' );
+						block = createBlock(
+							getDefaultBlockName() ?? 'core/heading'
+						);
 					}
 
 					if ( isOriginal ) {

package/src/home-link/index.php

@@ -127,7 +127,9 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 
 	$wrapper_attributes = block_core_home_link_build_li_wrapper_attributes( $block->context );
 
-	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content wp-block-navigation-item__content"';
+	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+
+	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content wp-block-navigation-item__content" rel="home"' . $aria_current;
 
 	// Start appending HTML attributes to anchor tag.
 	$html .= ' href="' . esc_url( home_url() ) . '"';

package/src/image/block.json

@@ -3,7 +3,7 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop" ],
+	"usesContext": [ "allowResize", "imageCrop", "fixedHeight" ],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",