@wordpress/block-library 7.1.1 → 7.2.0

package/src/gallery/style.scss

@@ -1,25 +1,18 @@
 // Import styles for rendering the static content of deprecated gallery versions.
 @import "./deprecated.scss";
 
+// The following is a temporary override until flex layout supports
+// an align items setting of normal.
+figure.wp-block-gallery.has-nested-images {
+	align-items: normal;
+}
 // Styles for current version of gallery block.
 .wp-block-gallery.has-nested-images {
-	display: flex;
-	flex-wrap: wrap;
 	// Need bogus :not(#individual-image) to override long :not()
 	// specificity chain on default image block on front end.
 	figure.wp-block-image:not(#individual-image) {
-		// Add space between thumbnails, and unset right most thumbnails later.
-		margin: 0 var(--gallery-block--gutter-size, #{$grid-unit-20}) var(--gallery-block--gutter-size, #{$grid-unit-20}) 0;
-
-		&:last-of-type:not(#individual-image) {
-			margin-right: 0;
-		}
-
-		width: calc(50% - (var(--gallery-block--gutter-size, #{$grid-unit-20}) / 2));
-
-		&:nth-of-type(even) {
-			margin-right: 0;
-		}
+		width: calc(50% - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) / 2));
+		margin: 0;
 	}
 
 	figure.wp-block-image {
@@ -27,8 +20,6 @@
 		flex-grow: 1;
 		justify-content: center;
 		position: relative;
-		margin-top: auto;
-		margin-bottom: auto;
 		flex-direction: column;
 		max-width: 100%;
 
@@ -96,17 +87,9 @@
 
 	// Non cropped images.
 	&:not(.is-cropped) {
-
 		figure.wp-block-image:not(#individual-image) {
 			margin-top: 0;
 			margin-bottom: auto;
-			img {
-				margin-bottom: var(--gallery-block--gutter-size, #{$grid-unit-20});
-			}
-
-			figcaption {
-				bottom: var(--gallery-block--gutter-size, #{$grid-unit-20});
-			}
 		}
 	}
 
@@ -128,7 +111,6 @@
 	}
 
 	&.columns-1 figure.wp-block-image:not(#individual-image) {
-		margin-right: 0;
 		width: 100%;
 	}
 
@@ -136,35 +118,20 @@
 	@include break-small {
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } figure.wp-block-image:not(#individual-image) {
-				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
-				width: calc(#{math.div(100%, $i)} - (var(--gallery-block--gutter-size, #{$grid-unit-20}) * #{math.div($i - 1, $i)}));
-
-			}
+				width: calc(#{math.div(100%, $i)} - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) * #{math.div($i - 1, $i)}));
 
-			// Prevent collapsing margin while sibling is being dragged.
-			&.columns-#{$i} figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
-				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
-			}
-		}
-		// Unset the right margin on every rightmost gallery item to ensure center balance.
-		@for $column-count from 1 through 8 {
-			&.columns-#{$column-count} figure.wp-block-image:not(#individual-image):nth-of-type(#{ $column-count }n) {
-				margin-right: 0;
 			}
 		}
 		// If number of columns not explicitly set default to 3 columns if 3 or more images.
 		&.columns-default {
 			figure.wp-block-image:not(#individual-image) {
-				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
-				width: calc(33.33% - (var(--gallery-block--gutter-size, 16px) * #{math.div(2, 3)}));
-			}
-			figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) {
-				margin-right: 0;
+
+				width: calc(33.33% - (var(--wp--style--unstable-gallery-gap, 16px) * #{math.div(2, 3)}));
 			}
 			// If only 2 child images use 2 columns.
 			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
 			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
-				width: calc(50% - (var(--gallery-block--gutter-size, 16px) * 0.5));
+				width: calc(50% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.5));
 			}
 			// For a single image set to 100%.
 			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {

package/src/group/block.json

@@ -61,7 +61,9 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": true
+		"__experimentalLayout": {
+			"allowOrientation": false
+		}
 	},
 	"editorStyle": "wp-block-group-editor",
 	"style": "wp-block-group"

package/src/group/variations.js

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

package/src/image/image.js

@@ -95,7 +95,10 @@ export default function Image( {
 			);
 			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
 			return {
-				image: id && isSelected ? getMedia( id ) : null,
+				image:
+					id && isSelected
+						? getMedia( id, { context: 'view' } )
+						: null,
 				multiImageSelection:
 					multiSelectedClientIds.length &&
 					multiSelectedClientIds.every(

package/src/image/style.scss

@@ -2,6 +2,8 @@
 	margin: 0 0 1em 0;
 
 	img {
+		height: auto;
+		max-width: 100%;
 		vertical-align: bottom;
 	}
 
@@ -56,6 +58,7 @@
 		margin-bottom: 0.5em;
 	}
 
+	// This is needed for classic themes where the align class is not on the container.
 	.aligncenter {
 		margin-left: auto;
 		margin-right: auto;

package/src/index.js

@@ -13,6 +13,7 @@ import {
  * Internal dependencies
  */
 import * as archives from './archives';
+import * as avatar from './avatar';
 import * as audio from './audio';
 import * as button from './button';
 import * as buttons from './buttons';
@@ -46,6 +47,7 @@ import * as image from './image';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
+import * as listItem from './list-item';
 import * as logInOut from './loginout';
 import * as mediaText from './media-text';
 import * as missing from './missing';
@@ -77,6 +79,7 @@ import * as postTitle from './post-title';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
 import * as query from './query';
+import * as queryNoResults from './query-no-results';
 import * as queryPagination from './query-pagination';
 import * as queryPaginationNext from './query-pagination-next';
 import * as queryPaginationNumbers from './query-pagination-numbers';
@@ -135,6 +138,7 @@ export const __experimentalGetCoreBlocks = () => [
 	heading,
 	gallery,
 	list,
+	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -248,9 +252,10 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 	? ( { enableFSEBlocks } = {} ) => {
 			[
 				// Experimental blocks.
+				avatar,
 				homeLink,
 				postAuthorName,
-
+				queryNoResults,
 				// Full Site Editing blocks.
 				...( enableFSEBlocks
 					? [

package/src/list/index.js

@@ -11,12 +11,13 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import settingsV2 from './v2';
 
 const { name } = metadata;
 
 export { metadata, name };
 
-export const settings = {
+const settingsV1 = {
 	icon,
 	example: {
 		attributes: {
@@ -41,3 +42,7 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const settings = window?.__experimentalEnableListBlockV2
+	? settingsV2
+	: settingsV1;

package/src/list/v2/edit.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import { ToolbarButton } from '@wordpress/components';
+import { isRTL, __ } from '@wordpress/i18n';
+import {
+	formatListBullets,
+	formatListBulletsRTL,
+	formatListNumbered,
+	formatListNumberedRTL,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import OrderedListSettings from '../ordered-list-settings';
+
+const TEMPLATE = [ [ 'core/list-item' ] ];
+
+function Edit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list-item' ],
+		template: TEMPLATE,
+	} );
+	const { ordered, reversed, start } = attributes;
+	const TagName = ordered ? 'ol' : 'ul';
+
+	const controls = (
+		<BlockControls group="block">
+			<ToolbarButton
+				icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
+				title={ __( 'Unordered' ) }
+				describedBy={ __( 'Convert to unordered list' ) }
+				isActive={ ordered === false }
+				onClick={ () => {
+					setAttributes( { ordered: false } );
+				} }
+			/>
+			<ToolbarButton
+				icon={ isRTL() ? formatListNumberedRTL : formatListNumbered }
+				title={ __( 'Ordered' ) }
+				describedBy={ __( 'Convert to ordered list' ) }
+				isActive={ ordered === true }
+				onClick={ () => {
+					setAttributes( { ordered: true } );
+				} }
+			/>
+		</BlockControls>
+	);
+
+	return (
+		<>
+			<TagName
+				reversed={ reversed }
+				start={ start }
+				{ ...innerBlocksProps }
+			/>
+			{ controls }
+			{ ordered && (
+				<OrderedListSettings
+					setAttributes={ setAttributes }
+					ordered={ ordered }
+					reversed={ reversed }
+					start={ start }
+				/>
+			) }
+		</>
+	);
+}
+
+export default Edit;

package/src/list/v2/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { list as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import transforms from './transforms';
+
+const settings = {
+	icon,
+	edit,
+	save,
+	transforms,
+};
+
+export default settings;

package/src/list/v2/save.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { ordered, reversed, start } = attributes;
+	const TagName = ordered ? 'ol' : 'ul';
+	return (
+		<TagName
+			reversed={ reversed }
+			start={ start }
+			{ ...useBlockProps.save() }
+		>
+			<InnerBlocks.Content />
+		</TagName>
+	);
+}

package/src/list/v2/transforms.js

@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import {
+	__UNSTABLE_LINE_SEPARATOR,
+	create,
+	split,
+	toHTMLString,
+} from '@wordpress/rich-text';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ 'core/paragraph', 'core/heading' ],
+			transform: ( blockAttributes ) => {
+				let childBlocks = [];
+				if ( blockAttributes.length > 1 ) {
+					childBlocks = blockAttributes.map( ( { content } ) => {
+						return createBlock( 'core/list-item', { content } );
+					} );
+				} else if ( blockAttributes.length === 1 ) {
+					const value = create( {
+						html: blockAttributes[ 0 ].content,
+					} );
+					childBlocks = split( value, '\n' ).map( ( result ) => {
+						return createBlock( 'core/list-item', {
+							content: toHTMLString( { value: result } ),
+						} );
+					} );
+				}
+				return createBlock(
+					'core/list',
+					{
+						anchor: blockAttributes.anchor,
+					},
+					childBlocks
+				);
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/quote', 'core/pullquote' ],
+			transform: ( { value, anchor } ) => {
+				return createBlock(
+					'core/list',
+					{
+						anchor,
+					},
+					split(
+						create( { html: value, multilineTag: 'p' } ),
+						__UNSTABLE_LINE_SEPARATOR
+					).map( ( result ) => {
+						return createBlock( 'core/list-item', {
+							content: toHTMLString( { value: result } ),
+						} );
+					} )
+				);
+			},
+		},
+		...[ '*', '-' ].map( ( prefix ) => ( {
+			type: 'prefix',
+			prefix,
+			transform( content ) {
+				return createBlock( 'core/list', {}, [
+					createBlock( 'core/list-item', { content } ),
+				] );
+			},
+		} ) ),
+		...[ '1.', '1)' ].map( ( prefix ) => ( {
+			type: 'prefix',
+			prefix,
+			transform( content ) {
+				return createBlock(
+					'core/list',
+					{
+						ordered: true,
+					},
+					[ createBlock( 'core/list-item', { content } ) ]
+				);
+			},
+		} ) ),
+	],
+	to: [
+		...[ 'core/paragraph', 'core/heading' ].map( ( block ) => ( {
+			type: 'block',
+			blocks: [ block ],
+			transform: ( _attributes, childBlocks ) => {
+				return childBlocks
+					.filter( ( { name } ) => name === 'core/list-item' )
+					.map( ( { attributes } ) =>
+						createBlock( block, {
+							content: attributes.content,
+						} )
+					);
+			},
+		} ) ),
+		...[ 'core/quote', 'core/pullquote' ].map( ( block ) => ( {
+			type: 'block',
+			blocks: [ block ],
+			transform: ( attributes, innerBlocks ) => {
+				return switchToBlockType(
+					switchToBlockType(
+						createBlock( 'core/list', attributes, innerBlocks ),
+						'core/paragraph'
+					),
+					block
+				);
+			},
+		} ) ),
+	],
+};
+
+export default transforms;

package/src/list-item/block.json

@@ -0,0 +1,26 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/list-item",
+	"title": "List item",
+	"category": "text",
+	"parent": [ "core/list" ],
+	"description": "Create a list item.",
+	"textdomain": "default",
+	"attributes": {
+		"placeholder": {
+			"type": "string"
+		},
+		"content": {
+			"type": "string",
+			"source": "html",
+    		"selector": "li",
+			"default": "",
+			"__experimentalRole": "content"
+		}
+	},
+	"supports": {
+		"className": false,
+		"__experimentalSelector": "li"
+	}
+}

package/src/list-item/edit.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+
+export default function ListItemEdit( {
+	name,
+	attributes,
+	setAttributes,
+	mergeBlocks,
+	onReplace,
+} ) {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list' ],
+	} );
+
+	return (
+		<li { ...innerBlocksProps }>
+			<RichText
+				identifier="content"
+				tagName="div"
+				onChange={ ( nextContent ) =>
+					setAttributes( { content: nextContent } )
+				}
+				value={ attributes.content }
+				aria-label={ __( 'List text' ) }
+				placeholder={ attributes.placeholder || __( 'List' ) }
+				onSplit={ ( value ) =>
+					createBlock( name, {
+						...attributes,
+						content: value,
+					} )
+				}
+				onMerge={ mergeBlocks }
+				onReplace={ onReplace }
+			/>
+			{ innerBlocksProps.children }
+		</li>
+	);
+}

package/src/list-item/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { list as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+	merge( attributes, attributesToMerge ) {
+		return {
+			...attributes,
+			content: attributes.content + attributesToMerge.content,
+		};
+	},
+};

package/src/list-item/save.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	return (
+		<li { ...useBlockProps.save() }>
+			<RichText.Content value={ attributes.content } />
+			<InnerBlocks.Content />
+		</li>
+	);
+}

package/src/media-text/edit.js

@@ -161,7 +161,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	const image = useSelect(
 		( select ) =>
 			mediaId && isSelected
-				? select( coreStore ).getMedia( mediaId )
+				? select( coreStore ).getMedia( mediaId, { context: 'view' } )
 				: null,
 		[ isSelected, mediaId ]
 	);

package/src/navigation/index.php

@@ -361,10 +361,14 @@ function block_core_navigation_get_fallback_blocks() {
  */
 function render_block_core_navigation( $attributes, $content, $block ) {
 
+	static $seen_menu_names = array();
+
 	// Flag used to indicate whether the rendered output is considered to be
 	// a fallback (i.e. the block has no menu associated with it).
 	$is_fallback = false;
 
+	$nav_menu_name = '';
+
 	/**
 	 * Deprecated:
 	 * The rgbTextColor and rgbBackgroundColor attributes
@@ -428,6 +432,14 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			return '';
 		}
 
+		$nav_menu_name = $navigation_post->post_title;
+
+		if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) {
+			++$seen_menu_names[ $nav_menu_name ];
+		} else {
+			$seen_menu_names[ $nav_menu_name ] = 1;
+		}
+
 		$parsed_blocks = parse_blocks( $navigation_post->post_content );
 
 		// 'parse_blocks' includes a null block with '\n\n' as the content when
@@ -508,10 +520,18 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
 
+	// If the menu name has been used previously then append an ID
+	// to the name to ensure uniqueness across a given post.
+	if ( isset( $seen_menu_names[ $nav_menu_name ] ) && $seen_menu_names[ $nav_menu_name ] > 1 ) {
+		$count         = $seen_menu_names[ $nav_menu_name ];
+		$nav_menu_name = $nav_menu_name . ' ' . ( $count );
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => implode( ' ', $classes ),
-			'style' => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'],
+			'class'      => implode( ' ', $classes ),
+			'style'      => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'],
+			'aria-label' => $nav_menu_name,
 		)
 	);