@wordpress/block-library 8.34.0 → 9.0.0

package/src/image/image.js

@@ -82,7 +82,8 @@ const ImageWrapper = ( { href, children } ) => {
 				// When the Image block is linked,
 				// it's wrapped with a disabled <a /> tag.
 				// Restore cursor style so it doesn't appear 'clickable'
-				// Safari needs the display property.
+				// and remove pointer events. Safari needs the display property.
+				pointerEvents: 'none',
 				cursor: 'default',
 				display: 'inline',
 			} }
@@ -105,6 +106,7 @@ export default function Image( {
 	context,
 	clientId,
 	blockEditingMode,
+	parentLayoutType,
 } ) {
 	const {
 		url = '',
@@ -180,7 +182,8 @@ export default function Image( {
 		allowResize &&
 		hasNonContentControls &&
 		! isWideAligned &&
-		isLargeViewport;
+		isLargeViewport &&
+		parentLayoutType !== 'grid';
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -459,8 +462,11 @@ export default function Image( {
 			return {
 				lockUrlControls:
 					!! urlBinding &&
-					( ! urlBindingSource ||
-						urlBindingSource?.lockAttributesEditing ),
+					! urlBindingSource?.canUserEditValue( {
+						select,
+						context,
+						args: urlBinding?.args,
+					} ),
 				lockHrefControls:
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
@@ -471,8 +477,11 @@ export default function Image( {
 					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
-					( ! altBindingSource ||
-						altBindingSource?.lockAttributesEditing ),
+					! altBindingSource?.canUserEditValue( {
+						select,
+						context,
+						args: altBinding?.args,
+					} ),
 				lockAltControlsMessage: altBindingSource?.label
 					? sprintf(
 							/* translators: %s: Label of the bindings source. */
@@ -482,8 +491,11 @@ export default function Image( {
 					: __( 'Connected to dynamic data' ),
 				lockTitleControls:
 					!! titleBinding &&
-					( ! titleBindingSource ||
-						titleBindingSource?.lockAttributesEditing ),
+					! titleBindingSource?.canUserEditValue( {
+						select,
+						context,
+						args: titleBinding?.args,
+					} ),
 				lockTitleControlsMessage: titleBindingSource?.label
 					? sprintf(
 							/* translators: %s: Label of the bindings source. */
@@ -496,13 +508,21 @@ export default function Image( {
 		[ clientId, isSingleSelected, metadata?.bindings ]
 	);
 
+	const showUrlInput =
+		isSingleSelected &&
+		! isEditingImage &&
+		! lockHrefControls &&
+		! lockUrlControls;
+
+	const showCoverControls = isSingleSelected && canInsertCover;
+
+	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
+
 	const controls = (
 		<>
-			<BlockControls group="block">
-				{ isSingleSelected &&
-					! isEditingImage &&
-					! lockHrefControls &&
-					! lockUrlControls && (
+			{ showBlockControls && (
+				<BlockControls group="block">
+					{ showUrlInput && (
 						<ImageURLInputUI
 							url={ href || '' }
 							onChangeUrl={ onSetHref }
@@ -518,21 +538,22 @@ export default function Image( {
 							resetLightbox={ resetLightbox }
 						/>
 					) }
-				{ allowCrop && (
-					<ToolbarButton
-						onClick={ () => setIsEditingImage( true ) }
-						icon={ crop }
-						label={ __( 'Crop' ) }
-					/>
-				) }
-				{ isSingleSelected && canInsertCover && (
-					<ToolbarButton
-						icon={ overlayText }
-						label={ __( 'Add text over image' ) }
-						onClick={ switchToCover }
-					/>
-				) }
-			</BlockControls>
+					{ allowCrop && (
+						<ToolbarButton
+							onClick={ () => setIsEditingImage( true ) }
+							icon={ crop }
+							label={ __( 'Crop' ) }
+						/>
+					) }
+					{ showCoverControls && (
+						<ToolbarButton
+							icon={ overlayText }
+							label={ __( 'Add text over image' ) }
+							onClick={ switchToCover }
+						/>
+					) }
+				</BlockControls>
+			) }
 			{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
 				<BlockControls group="other">
 					<MediaReplaceFlow
@@ -594,7 +615,14 @@ export default function Image( {
 										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
-											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
 												{ __(
 													'Describe the purpose of the image.'
 												) }
@@ -681,7 +709,14 @@ export default function Image( {
 										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
-											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
 												{ __(
 													'Describe the purpose of the image.'
 												) }

package/src/image/index.php

@@ -188,12 +188,12 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// Image.
 	$p->next_tag( 'img' );
 	$p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
-	$p->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
-	$p->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
+	$p->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
+	$p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
-	$p->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
+	$p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
 
 	$body_content = $p->get_updated_html();
 
@@ -209,7 +209,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
 			data-wp-init="callbacks.initTriggerButton"
-			data-wp-on--click="actions.showLightbox"
+			data-wp-on-async--click="actions.showLightbox"
 			data-wp-style--right="context.imageButtonRight"
 			data-wp-style--top="context.imageButtonTop"
 		>
@@ -258,12 +258,12 @@ function block_core_image_print_lightbox_overlay() {
 			data-wp-class--show-closing-animation="state.showClosingAnimation"
 			data-wp-watch="callbacks.setOverlayFocus"
 			data-wp-on--keydown="actions.handleKeydown"
-			data-wp-on--touchstart="actions.handleTouchStart"
+			data-wp-on-async--touchstart="actions.handleTouchStart"
 			data-wp-on--touchmove="actions.handleTouchMove"
-			data-wp-on--touchend="actions.handleTouchEnd"
-			data-wp-on--click="actions.hideLightbox"
-			data-wp-on-window--resize="callbacks.setOverlayStyles"
-			data-wp-on-window--scroll="actions.handleScroll"
+			data-wp-on-async--touchend="actions.handleTouchEnd"
+			data-wp-on-async--click="actions.hideLightbox"
+			data-wp-on-async-window--resize="callbacks.setOverlayStyles"
+			data-wp-on-async-window--scroll="actions.handleScroll"
 			tabindex="-1"
 			>
 				<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">

package/src/image/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export default function save( { attributes } ) {
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
-	const classes = classnames( {
+	const classes = clsx( {
 		// All other align classes are handled by block supports.
 		// `{ align: 'none' }` is unique to transforms for the image block.
 		alignnone: 'none' === align,
@@ -49,7 +49,7 @@ export default function save( { attributes } ) {
 				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
-	const imageClasses = classnames( borderProps.className, {
+	const imageClasses = clsx( borderProps.className, {
 		[ `wp-image-${ id }` ]: !! id,
 	} );
 

package/src/image/style.scss

@@ -82,27 +82,19 @@
 		@include caption-style();
 	}
 
-	// Variations
-	&.is-style-rounded img,
-	.is-style-rounded img {
-		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
-		// to rectangular images. A pill-shape is better than otherwise.
-		border-radius: 9999px;
-	}
-
 	// The following variation is deprecated.
 	// The CSS is kept here for the time being, to support blocks using the old variation.
+	// The selector is not scoped with `:root :where()` like global styles are to keep its
+	// specificity the same as it was when it was deprecated.
 	&.is-style-circle-mask img {
 		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
 		// to rectangular images. A pill-shape is better than otherwise.
 		border-radius: 9999px;
 
 		// If a browser supports it, we will switch to using a circular SVG mask.
-		// The stylelint override is necessary to use the SVG inline here.
 		@supports (mask-image: none) or (-webkit-mask-image: none) {
-			/* stylelint-disable */
+			/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 			mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
-			/* stylelint-enable */
 			mask-mode: alpha;
 			mask-repeat: no-repeat;
 			mask-size: contain;
@@ -110,42 +102,13 @@
 			border-radius: 0;
 		}
 	}
+}
 
-	// The following is required to overcome WP Core applying styles that clear
-	// img borders with a higher specificity than those added by the border
-	// block support to provide a default border-style of solid when a border
-	// color or width has been set.
-	:where(.has-border-color) {
-		border-style: solid;
-	}
-	:where([style*="border-top-color"]) {
-		border-top-style: solid;
-	}
-	:where([style*="border-right-color"]) {
-		border-right-style: solid;
-	}
-	:where([style*="border-bottom-color"]) {
-		border-bottom-style: solid;
-	}
-	:where([style*="border-left-color"]) {
-		border-left-style: solid;
-	}
-
-	:where([style*="border-width"]) {
-		border-style: solid;
-	}
-	:where([style*="border-top-width"]) {
-		border-top-style: solid;
-	}
-	:where([style*="border-right-width"]) {
-		border-right-style: solid;
-	}
-	:where([style*="border-bottom-width"]) {
-		border-bottom-style: solid;
-	}
-	:where([style*="border-left-width"]) {
-		border-left-style: solid;
-	}
+// Variations
+:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
+	// We use an absolute pixel to prevent the oval shape that a value of 50% would give
+	// to rectangular images. A pill-shape is better than otherwise.
+	border-radius: 9999px;
 }
 
 .wp-block-image figure {

package/src/image/theme.scss

@@ -1,7 +1,7 @@
-.wp-block-image figcaption {
+:root :where(.wp-block-image figcaption) {
 	@include caption-style-theme();
 }
 
-:where(.wp-block-image) {
+.wp-block-image {
 	margin: 0 0 1em 0;
 }

package/src/index.js

@@ -314,21 +314,21 @@ export const registerCoreBlocks = (
  * __experimentalRegisterExperimentalCoreBlocks( settings );
  * ```
  */
-export const __experimentalRegisterExperimentalCoreBlocks = process.env
-	.IS_GUTENBERG_PLUGIN
-	? ( { enableFSEBlocks } = {} ) => {
-			const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ];
-			getAllBlocks()
-				.filter( ( { metadata } ) =>
-					isBlockMetadataExperimental( metadata )
-				)
-				.filter(
-					( { metadata: { __experimental } } ) =>
-						__experimental === true ||
-						enabledExperiments.includes( __experimental )
-				)
-				.forEach( ( { init } ) => init() );
-	  }
-	: undefined;
+export const __experimentalRegisterExperimentalCoreBlocks =
+	globalThis.IS_GUTENBERG_PLUGIN
+		? ( { enableFSEBlocks } = {} ) => {
+				const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ];
+				getAllBlocks()
+					.filter( ( { metadata } ) =>
+						isBlockMetadataExperimental( metadata )
+					)
+					.filter(
+						( { metadata: { __experimental } } ) =>
+							__experimental === true ||
+							enabledExperiments.includes( __experimental )
+					)
+					.forEach( ( { init } ) => init() );
+		  }
+		: undefined;
 
 export { privateApis } from './private-apis';

package/src/latest-posts/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import {
 	ToggleControl,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, getSettings } from '@wordpress/date';
 import {
 	InspectorControls,
@@ -383,7 +383,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			'wp-block-latest-posts__list': true,
 			'is-grid': postLayout === 'grid',
 			'has-dates': displayPostDate,
@@ -416,13 +416,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const layoutControls = [
 		{
 			icon: list,
-			title: __( 'List view' ),
+			title: _x( 'List view', 'Latest posts block display setting' ),
 			onClick: () => setAttributes( { postLayout: 'list' } ),
 			isActive: postLayout === 'list',
 		},
 		{
 			icon: grid,
-			title: __( 'Grid view' ),
+			title: _x( 'Grid view', 'Latest posts block display setting' ),
 			onClick: () => setAttributes( { postLayout: 'grid' } ),
 			isActive: postLayout === 'grid',
 		},
@@ -454,7 +454,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 					const { url: imageSourceUrl, alt: featuredImageAlt } =
 						getFeaturedImageDetails( post, featuredImageSizeSlug );
-					const imageClasses = classnames( {
+					const imageClasses = clsx( {
 						'wp-block-latest-posts__featured-image': true,
 						[ `align${ featuredImageAlign }` ]:
 							!! featuredImageAlign,

package/src/latest-posts/edit.native.js

@@ -207,7 +207,7 @@ class LatestPostsEdit extends Component {
 								label={ __( 'Add link to featured image' ) }
 								checked={ addLinkToFeaturedImage }
 								onChange={ this.onSetAddLinkToFeaturedImage }
-								separatorType={ 'topFullWidth' }
+								separatorType="topFullWidth"
 							/>
 						</>
 					) }

package/src/latest-posts/editor.scss

@@ -1,9 +1,4 @@
 .wp-block-latest-posts {
-	padding-left: 2.5em;
-	&.is-grid {
-		padding-left: 0;
-	}
-
 	// Apply overflow for post items, so any floated featured images won't crop the focus style.
 	> li {
 		overflow: hidden;
@@ -14,10 +9,6 @@
 	display: inline;
 }
 
-.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
-	margin-bottom: 20px;
-}
-
 .editor-latest-posts-image-alignment-control {
 	.components-base-control__label {
 		display: block;
@@ -27,3 +18,13 @@
 		border-radius: $radius-block-ui;
 	}
 }
+
+:root :where(.wp-block-latest-posts) {
+	padding-left: 2.5em;
+}
+:root {
+	:where(.wp-block-latest-posts.is-grid),
+	:where(.wp-block-latest-posts__list) {
+		padding-left: 0;
+	}
+}

package/src/latest-posts/index.php

@@ -152,6 +152,7 @@ function render_block_core_latest_posts( $attributes ) {
 			 * […] is the default excerpt ending from wp_trim_excerpt() in Core.
 			 */
 			if ( str_ends_with( $trimmed_excerpt, ' […]' ) ) {
+				/** This filter is documented in wp-includes/formatting.php */
 				$excerpt_length = (int) apply_filters( 'excerpt_length', $block_core_latest_posts_excerpt_length );
 				if ( $excerpt_length <= $block_core_latest_posts_excerpt_length ) {
 					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );

package/src/latest-posts/style.scss

@@ -12,17 +12,16 @@
 	}
 	&.wp-block-latest-posts__list {
 		list-style: none;
-		padding-left: 0;
 
 		li {
 			clear: both;
+			overflow-wrap: break-word;
 		}
 	}
 
 	&.is-grid {
 		display: flex;
 		flex-wrap: wrap;
-		padding: 0;
 
 		li {
 			margin: 0 1.25em 1.25em 0;
@@ -33,9 +32,9 @@
 	@include break-small {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } li {
-				width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));
+				width: calc((100% / #{$i}) - 1.25em + (1.25em / #{$i}));
 
-				&:nth-child( #{ $i }n ) {
+				&:nth-child(#{ $i }n) {
 					margin-right: 0;
 				}
 			}
@@ -43,6 +42,15 @@
 	}
 }
 
+:root {
+	:where(.wp-block-latest-posts.is-grid) {
+		padding: 0;
+	}
+	:where(.wp-block-latest-posts.wp-block-latest-posts__list) {
+		padding-left: 0;
+	}
+}
+
 .wp-block-latest-posts__post-date,
 .wp-block-latest-posts__post-author {
 	display: block;

package/src/list/block.json

@@ -39,7 +39,6 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
-		"className": false,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -70,7 +69,6 @@
 			}
 		},
 		"__unstablePasteTextInline": true,
-		"__experimentalSelector": "ol,ul",
 		"__experimentalOnMerge": true,
 		"__experimentalSlashInserter": true,
 		"interactivity": {

package/src/list/deprecated.js

@@ -219,6 +219,93 @@ const v2 = {
 	migrate: migrateTypeToInlineStyle,
 };
 
+// Version without block support 'className: true'.
+const v3 = {
+	attributes: {
+		ordered: {
+			type: 'boolean',
+			default: false,
+			__experimentalRole: 'content',
+		},
+		values: {
+			type: 'string',
+			source: 'html',
+			selector: 'ol,ul',
+			multiline: 'li',
+			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+			default: '',
+			__experimentalRole: 'content',
+		},
+		type: {
+			type: 'string',
+		},
+		start: {
+			type: 'number',
+		},
+		reversed: {
+			type: 'boolean',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		className: false,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSelector: 'ol,ul',
+		__experimentalOnMerge: 'true',
+		__experimentalSlashInserter: true,
+	},
+	save( { attributes } ) {
+		const { ordered, type, reversed, start } = attributes;
+		const TagName = ordered ? 'ol' : 'ul';
+		return (
+			<TagName
+				{ ...useBlockProps.save( {
+					reversed,
+					start,
+					style: {
+						listStyleType:
+							ordered && type !== 'decimal' ? type : undefined,
+					},
+				} ) }
+			>
+				<InnerBlocks.Content />
+			</TagName>
+		);
+	},
+};
+
 /**
  * New deprecations need to be placed first
  * for them to have higher priority.
@@ -227,4 +314,4 @@ const v2 = {
  *
  * See block-deprecation.md
  */
-export default [ v2, v1, v0 ];
+export default [ v3, v2, v1, v0 ];

package/src/list/index.php

@@ -0,0 +1,54 @@
+<?php
+/**
+ * Adds the wp-block-list class to the rendered list block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Adds the wp-block-list class to the rendered list block.
+ * Ensures that pre-existing list blocks use the class name on the front.
+ * For example, <ol> is transformed to <ol class="wp-block-list">.
+ *
+ * @since 6.6.0
+ *
+ * @see https://github.com/WordPress/gutenberg/issues/12420
+ *
+ * @param array  $attributes Attributes of the block being rendered.
+ * @param string $content Content of the block being rendered.
+ *
+ * @return string The content of the block being rendered.
+ */
+function block_core_list_render( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$processor = new WP_HTML_Tag_Processor( $content );
+
+	$list_tags = array( 'OL', 'UL' );
+	while ( $processor->next_tag() ) {
+		if ( in_array( $processor->get_tag(), $list_tags, true ) ) {
+			$processor->add_class( 'wp-block-list' );
+			break;
+		}
+	}
+
+	return $processor->get_updated_html();
+}
+
+/**
+ * Registers the `core/list` block on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_list() {
+	register_block_type_from_metadata(
+		__DIR__ . '/list',
+		array(
+			'render_callback' => 'block_core_list_render',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_list' );