@wordpress/block-library 6.0.1 → 6.0.5

package/src/embed/transforms.native.js

@@ -1,9 +1,11 @@
 /**
  * Internal dependencies
  */
+import webTransforms from './transforms.js';
 import transformationCategories from '../transformationCategories';
 
 const transforms = {
+	...webTransforms,
 	supportedMobileTransforms: transformationCategories.media,
 };
 

package/src/embed/variations.js

@@ -24,6 +24,8 @@ import {
 	embedAmazonIcon,
 	embedAnimotoIcon,
 	embedDailymotionIcon,
+	embedPinterestIcon,
+	embedWolframIcon,
 } from './icons';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
@@ -329,6 +331,25 @@ const variations = [
 		],
 		attributes: { providerNameSlug: 'amazon-kindle' },
 	},
+	{
+		name: 'pinterest',
+		title: 'Pinterest',
+		icon: embedPinterestIcon,
+		keywords: [ __( 'social' ), __( 'bookmark' ) ],
+		description: __( 'Embed Pinterest pins, boards, and profiles.' ),
+		patterns: [
+			/^https?:\/\/([a-z]{2}|www)\.pinterest\.com(\.(au|mx))?\/.*/i,
+		],
+		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/__snapshots__/edit.native.js.snap

@@ -112,9 +112,12 @@ exports[`File block renders file error state without crashing 1`] = `
           rejectResponderTermination={true}
           scrollEnabled={false}
           style={
-            Object {
-              "fontFamily": "serif",
-            }
+            Array [
+              Object {
+                "fontFamily": "serif",
+              },
+              undefined,
+            ]
           }
           underlineColorAndroid="transparent"
           value="Error"

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' ) },
@@ -134,6 +139,8 @@ function GalleryEdit( props ) {
 
 	const newImages = useGetNewImages( images, imageData );
 
+	useMobileWarning( newImages );
+
 	useEffect( () => {
 		newImages?.forEach( ( newImage ) => {
 			updateBlockAttributes( newImage.clientId, {

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-get-media.js

@@ -29,23 +29,18 @@ export default function useGetMedia( innerBlockImages ) {
 			if ( imageIds.length === 0 ) {
 				return currentImageMedia;
 			}
-			const getMedia = select( coreStore ).getMedia;
-			const newImageMedia = imageIds.map( ( img ) => {
-				return getMedia( img );
-			} );
 
-			if ( newImageMedia.some( ( img ) => ! img ) ) {
-				return currentImageMedia;
-			}
-
-			return newImageMedia;
+			return select( coreStore ).getMediaItems( {
+				include: imageIds.join( ',' ),
+				per_page: -1,
+			} );
 		},
 		[ innerBlockImages ]
 	);
 
 	if (
-		imageMedia?.length !== currentImageMedia.length ||
-		imageMedia.some(
+		imageMedia?.length !== currentImageMedia?.length ||
+		imageMedia?.some(
 			( newImage ) =>
 				! currentImageMedia.find(
 					( currentImage ) => currentImage.id === newImage.id

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( newImages ) {
+	const { createWarningNotice } = useDispatch( noticesStore );
+	const { toggleFeature } = useDispatch( interfaceStore );
+	const isMobileWarningActive = useSelect( ( select ) => {
+		const { isFeatureActive } = select( interfaceStore );
+		return isFeatureActive( 'core/edit-post', 'mobileGalleryWarning' );
+	}, [] );
+
+	if ( ! isMobileWarningActive || ! newImages ) {
+		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", "boolean" ],
 			"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

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { deburr, trim } from 'lodash';
+
+/**
+ * Object map tracking anchors.
+ *
+ * @type {Record<string, string | null>}
+ */
+const anchors = {};
+
+/**
+ * Returns the text without markup.
+ *
+ * @param {string} text The text.
+ *
+ * @return {string} The text without markup.
+ */
+const getTextWithoutMarkup = ( text ) => {
+	const dummyElement = document.createElement( 'div' );
+	dummyElement.innerHTML = text;
+	return dummyElement.innerText;
+};
+
+/**
+ * Get the slug from the content.
+ *
+ * @param {string} content The block content.
+ *
+ * @return {string} Returns the slug.
+ */
+const getSlug = ( content ) => {
+	// Get the slug.
+	return trim(
+		deburr( getTextWithoutMarkup( content ) )
+			.replace( /[^\p{L}\p{N}]+/gu, '-' )
+			.toLowerCase(),
+		'-'
+	);
+};
+
+/**
+ * Generate the anchor for a heading.
+ *
+ * @param {string} clientId The block ID.
+ * @param {string} content  The block content.
+ *
+ * @return {string|null} Return the heading anchor.
+ */
+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.
+	if ( '' === slug ) {
+		return null;
+	}
+
+	delete anchors[ clientId ];
+
+	let anchor = slug;
+	let i = 0;
+
+	// If the anchor already exists in another heading, append -i.
+	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

@@ -32,13 +32,25 @@
 		"color": {
 			"link": true
 		},
+		"spacing": {
+			"margin": true
+		},
 		"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
+		"__unstablePasteTextInline": true,
+		"__experimentalSlashInserter": true
 	},
 	"editorStyle": "wp-block-heading-editor",
 	"style": "wp-block-heading"

package/src/heading/edit.js

@@ -7,18 +7,22 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
 	AlignmentControl,
 	BlockControls,
 	RichText,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import HeadingLevelDropdown from './heading-level-dropdown';
+import { generateAnchor, setAnchor } from './autogenerate-anchors';
 
 function HeadingEdit( {
 	attributes,
@@ -28,7 +32,7 @@ function HeadingEdit( {
 	style,
 	clientId,
 } ) {
-	const { textAlign, content, level, placeholder } = attributes;
+	const { textAlign, content, level, placeholder, anchor } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
 		className: classnames( {
@@ -37,6 +41,38 @@ function HeadingEdit( {
 		style,
 	} );
 
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
+
+	// Initially set anchor for headings that have content but no anchor set.
+	// This is used when transforming a block to heading, or for legacy anchors.
+	useEffect( () => {
+		if ( ! anchor && content ) {
+			// This side-effect should not create an undo level.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				anchor: generateAnchor( clientId, content ),
+			} );
+		}
+		setAnchor( clientId, anchor );
+
+		// Remove anchor map when block unmounts.
+		return () => setAnchor( clientId, null );
+	}, [ content, anchor ] );
+
+	const onContentChange = ( value ) => {
+		const newAttrs = { content: value };
+		if (
+			! anchor ||
+			! value ||
+			generateAnchor( clientId, content ) === anchor
+		) {
+			newAttrs.anchor = generateAnchor( clientId, value );
+		}
+		setAttributes( newAttrs );
+	};
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -57,7 +93,7 @@ function HeadingEdit( {
 				identifier="content"
 				tagName={ tagName }
 				value={ content }
-				onChange={ ( value ) => setAttributes( { content: value } ) }
+				onChange={ onContentChange }
 				onMerge={ mergeBlocks }
 				onSplit={ ( value, isOriginal ) => {
 					let block;
@@ -68,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",