@wordpress/block-library 7.1.1 → 7.3.1

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

@@ -4,7 +4,7 @@
 	"name": "core/group",
 	"title": "Group",
 	"category": "design",
-	"description": "Combine blocks into a group.",
+	"description": "Gather blocks in a layout container.",
 	"keywords": [ "container", "wrapper", "row", "section" ],
 	"textdomain": "default",
 	"attributes": {

package/src/group/edit.js

@@ -52,7 +52,10 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: `is-layout-${ type }`,
+	} );
+
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps

package/src/group/editor.scss

@@ -22,3 +22,34 @@
 		margin-bottom: $block-padding + $grid-unit-05;
 	}
 }
+
+// Affect the appender of the Row and Stack variants.
+.is-layout-flex.block-editor-block-list__block .block-list-appender:only-child {
+	gap: inherit;
+
+	&,
+	.block-editor-default-block-appender__content,
+	.block-editor-inserter {
+		display: inherit;
+		width: 100%;
+		flex-direction: inherit;
+		flex: 1;
+	}
+
+	&::after {
+		content: "";
+		display: flex;
+		border: $border-width dashed currentColor;
+		opacity: 0.4;
+		border-radius: $radius-block-ui;
+		flex: 1;
+		pointer-events: none;
+		min-height: $grid-unit-60;
+	}
+
+	// Let the parent be selectable in the placeholder area.
+	pointer-events: none;
+	.block-editor-inserter {
+		pointer-events: all;
+	}
+}

package/src/group/variations.js

@@ -2,26 +2,43 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { group, row, stack } from '@wordpress/icons';
 
 const variations = [
 	{
 		name: 'group',
 		title: __( 'Group' ),
-		description: __( 'Blocks shown in a column.' ),
+		description: __( 'Gather blocks in a layout container.' ),
 		attributes: { layout: { type: 'default' } },
 		scope: [ 'transform' ],
 		isActive: ( blockAttributes ) =>
 			! blockAttributes.layout ||
+			! blockAttributes.layout?.type ||
 			blockAttributes.layout?.type === 'default',
+		icon: group,
 	},
 	{
 		name: 'group-row',
 		title: __( 'Row' ),
-		description: __( 'Blocks shown in a row.' ),
-		attributes: { layout: { type: 'flex', allowOrientation: false } },
+		description: __( 'Arrange blocks horizontally.' ),
+		attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },
 		scope: [ 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
-			blockAttributes.layout?.type === 'flex',
+			blockAttributes.layout?.type === 'flex' &&
+			( ! blockAttributes.layout?.orientation ||
+				blockAttributes.layout?.orientation === 'horizontal' ),
+		icon: row,
+	},
+	{
+		name: 'group-stack',
+		title: __( 'Stack' ),
+		description: __( 'Arrange blocks vertically.' ),
+		attributes: { layout: { type: 'flex', orientation: 'vertical' } },
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.layout?.type === 'flex' &&
+			blockAttributes.layout?.orientation === 'vertical',
+		icon: stack,
 	},
 ];
 

package/src/heading/edit.js

@@ -45,7 +45,7 @@ function HeadingEdit( {
 		const settings = select( blockEditorStore ).getSettings();
 
 		return {
-			canGenerateAnchors: !! settings.__experimentalGenerateAnchors,
+			canGenerateAnchors: !! settings.generateAnchors,
 		};
 	}, [] );
 

package/src/heading/style.scss

@@ -4,9 +4,6 @@ h3,
 h4,
 h5,
 h6 {
-	// Break long strings of text without spaces so they don't overflow the block.
-	overflow-wrap: break-word;
-
 	&.has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;
 	}

package/src/html/edit.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useContext, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	PlainText,
@@ -20,6 +20,7 @@ import { useSelect } from '@wordpress/data';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
+	const isDisabled = useContext( Disabled.Context );
 
 	const styles = useSelect( ( select ) => {
 		// Default styles used to unset some of the styles
@@ -69,35 +70,26 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
-			<Disabled.Consumer>
-				{ ( isDisabled ) =>
-					isPreview || isDisabled ? (
-						<>
-							<SandBox
-								html={ attributes.content }
-								styles={ styles }
-							/>
-							{ /*	
-									An overlay is added when the block is not selected in order to register click events. 
-									Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it 
-									difficult to reselect the block. 
-								*/ }
-							{ ! isSelected && (
-								<div className="block-library-html__preview-overlay"></div>
-							) }
-						</>
-					) : (
-						<PlainText
-							value={ attributes.content }
-							onChange={ ( content ) =>
-								setAttributes( { content } )
-							}
-							placeholder={ __( 'Write HTML…' ) }
-							aria-label={ __( 'HTML' ) }
-						/>
-					)
-				}
-			</Disabled.Consumer>
+			{ isPreview || isDisabled ? (
+				<>
+					<SandBox html={ attributes.content } styles={ styles } />
+					{ /*
+							An overlay is added when the block is not selected in order to register click events.
+							Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
+							difficult to reselect the block.
+						*/ }
+					{ ! isSelected && (
+						<div className="block-library-html__preview-overlay"></div>
+					) }
+				</>
+			) : (
+				<PlainText
+					value={ attributes.content }
+					onChange={ ( content ) => setAttributes( { content } ) }
+					placeholder={ __( 'Write HTML…' ) }
+					aria-label={ __( 'HTML' ) }
+				/>
+			) }
 		</div>
 	);
 }

package/src/image/edit.native.js

@@ -186,7 +186,6 @@ export class ImageEdit extends Component {
 		this.state = {
 			isCaptionSelected: false,
 			uploadStatus: UPLOAD_STATE_IDLE,
-			isAnimatedGif: false,
 		};
 
 		this.replacedFeaturedImage = false;
@@ -364,10 +363,6 @@ export class ImageEdit extends Component {
 
 		setAttributes( { url: payload.mediaUrl, id: payload.mediaServerId } );
 		this.setState( { uploadStatus: UPLOAD_STATE_SUCCEEDED } );
-
-		this.setState( {
-			isAnimatedGif: payload.mediaUrl.toLowerCase().includes( '.gif' ),
-		} );
 	}
 
 	finishMediaUploadWithFailure( payload ) {
@@ -464,10 +459,6 @@ export class ImageEdit extends Component {
 			...mediaAttributes,
 			...additionalAttributes,
 		} );
-
-		this.setState( {
-			isAnimatedGif: media.url.toLowerCase().includes( '.gif' ),
-		} );
 	}
 
 	onFocusCaption() {
@@ -615,6 +606,10 @@ export class ImageEdit extends Component {
 		);
 	}
 
+	isGif( url ) {
+		return url.toLowerCase().includes( '.gif' );
+	}
+
 	render() {
 		const { isCaptionSelected } = this.state;
 		const {
@@ -748,11 +743,12 @@ export class ImageEdit extends Component {
 			context?.fixedHeight && styles.fixedHeight,
 		];
 
-		const badgeLabelShown = isFeaturedImage || this.state.isAnimatedGif;
+		const isGif = this.isGif( url );
+		const badgeLabelShown = isFeaturedImage || isGif;
 		let badgeLabelText = '';
 		if ( isFeaturedImage ) {
 			badgeLabelText = __( 'Featured' );
-		} else if ( this.state.isAnimatedGif ) {
+		} else if ( isGif ) {
 			badgeLabelText = __( 'GIF' );
 		}
 

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.
@@ -187,6 +191,7 @@ export const __experimentalGetCoreBlocks = () => [
 	siteTagline,
 	query,
 	templatePart,
+	avatar,
 	postTitle,
 	postExcerpt,
 	postFeaturedImage,
@@ -200,7 +205,21 @@ export const __experimentalGetCoreBlocks = () => [
 	queryPaginationNext,
 	queryPaginationNumbers,
 	queryPaginationPrevious,
+	queryNoResults,
+	readMore,
+	commentAuthorName,
+	commentContent,
+	commentDate,
+	commentEditLink,
+	commentReplyLink,
+	commentTemplate,
+	commentsQueryLoop,
+	commentsPagination,
+	commentsPaginationNext,
+	commentsPaginationNumbers,
+	commentsPaginationPrevious,
 	postComments,
+	homeLink,
 	logInOut,
 	termDescription,
 	queryTitle,
@@ -248,30 +267,16 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 	? ( { enableFSEBlocks } = {} ) => {
 			[
 				// Experimental blocks.
-				homeLink,
 				postAuthorName,
-
 				// Full Site Editing blocks.
 				...( enableFSEBlocks
 					? [
 							commentAuthorAvatar,
-							commentAuthorName,
-							commentContent,
-							commentDate,
-							commentEditLink,
-							commentReplyLink,
-							commentTemplate,
-							commentsQueryLoop,
-							commentsPagination,
-							commentsPaginationNext,
-							commentsPaginationNumbers,
-							commentsPaginationPrevious,
 							navigationArea,
 							postComment,
 							postCommentsCount,
 							postCommentsForm,
 							postCommentsLink,
-							readMore,
 					  ]
 					: [] ),
 			].forEach( registerBlock );

package/src/list/deprecated.js

@@ -8,7 +8,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
  */
 import migrateFontFamily from '../utils/migrate-font-family';
 
-const v1 = {
+const v0 = {
 	attributes: {
 		ordered: {
 			type: 'boolean',
@@ -76,4 +76,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v0 ];

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/style.scss

@@ -1,7 +1,6 @@
 ol,
 ul {
-	// Break long strings of text without spaces so they don't overflow the block.
-	overflow-wrap: break-word;
+	box-sizing: border-box;
 
 	&.has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;