@wordpress/block-library 8.34.0 → 8.35.0

package/src/image/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -207,7 +207,7 @@ const v3 = {
 		const { url, alt, caption, align, href, width, height, id } =
 			attributes;
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			'is-resized': width || height,
 		} );
@@ -329,7 +329,7 @@ const v4 = {
 
 		const newRel = ! rel ? undefined : rel;
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -499,7 +499,7 @@ const v5 = {
 
 		const newRel = ! rel ? undefined : rel;
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -681,7 +681,7 @@ const v6 = {
 		const newRel = ! rel ? undefined : rel;
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -691,7 +691,7 @@ const v6 = {
 					Object.keys( borderProps.style ).length > 0 ),
 		} );
 
-		const imageClasses = classnames( borderProps.className, {
+		const imageClasses = clsx( borderProps.className, {
 			[ `wp-image-${ id }` ]: !! id,
 		} );
 
@@ -883,7 +883,7 @@ const v7 = {
 		const newRel = ! rel ? undefined : rel;
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -893,7 +893,7 @@ const v7 = {
 					Object.keys( borderProps.style ).length > 0 ),
 		} );
 
-		const imageClasses = classnames( borderProps.className, {
+		const imageClasses = clsx( borderProps.className, {
 			[ `wp-image-${ id }` ]: !! id,
 		} );
 
@@ -1102,7 +1102,7 @@ const v8 = {
 		const newRel = ! rel ? undefined : rel;
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -1112,7 +1112,7 @@ const v8 = {
 					Object.keys( borderProps.style ).length > 0 ),
 		} );
 
-		const imageClasses = classnames( borderProps.className, {
+		const imageClasses = clsx( borderProps.className, {
 			[ `wp-image-${ id }` ]: !! id,
 		} );
 

package/src/image/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -103,6 +103,7 @@ export function ImageEdit( {
 	onReplace,
 	context,
 	clientId,
+	__unstableParentLayout: parentLayout,
 } ) {
 	const {
 		url = '',
@@ -290,7 +291,7 @@ export function ImageEdit( {
 	const borderProps = useBorderProps( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-transient': temporaryURL,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
@@ -332,7 +333,7 @@ export function ImageEdit( {
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
-				className={ classnames( 'block-editor-media-placeholder', {
+				className={ clsx( 'block-editor-media-placeholder', {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
@@ -385,6 +386,7 @@ export function ImageEdit( {
 				context={ context }
 				clientId={ clientId }
 				blockEditingMode={ blockEditingMode }
+				parentLayoutType={ parentLayout?.type }
 			/>
 			<MediaPlaceholder
 				icon={ <BlockIcon icon={ icon } /> }

package/src/image/editor.scss

@@ -141,13 +141,19 @@ figure.wp-block-image:not(.wp-block) {
 	width: 100%;
 	overflow: hidden;
 
-	// This removes the border from the img within the image cropper so it
-	// can be applied to the cropper itself. This then allows the image to be
-	// cropped within the visual border providing more accurate editing and
-	// smoother UX.
-	.reactEasyCrop_Container .reactEasyCrop_Image {
-		border: none;
-		border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
+	.reactEasyCrop_Container {
+		// The linked Image block has `pointer-events: none` applied. Override it
+		// here to enable the crop action.
+		pointer-events: auto;
+
+		// This removes the border from the img within the image cropper so it
+		// can be applied to the cropper itself. This then allows the image to be
+		// cropped within the visual border providing more accurate editing and
+		// smoother UX.
+		.reactEasyCrop_Image {
+			border: none;
+			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
+		}
 	}
 }
 

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

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

@@ -98,11 +98,9 @@
 		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;

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/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/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' );

package/src/list/test/__snapshots__/edit.native.js.snap

@@ -2,7 +2,7 @@
 
 exports[`List block adds one item to the list 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First list item</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -10,9 +10,9 @@ exports[`List block adds one item to the list 1`] = `
 
 exports[`List block changes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 2</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -22,7 +22,7 @@ exports[`List block changes the indentation level 1`] = `
 
 exports[`List block changes to ordered list 1`] = `
 "<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -38,7 +38,7 @@ exports[`List block changes to ordered list 1`] = `
 
 exports[`List block changes to reverse ordered list 1`] = `
 "<!-- wp:list {"ordered":true,"reversed":true} -->
-<ol reversed><!-- wp:list-item -->
+<ol reversed class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -54,7 +54,7 @@ exports[`List block changes to reverse ordered list 1`] = `
 
 exports[`List block inserts block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -62,7 +62,7 @@ exports[`List block inserts block 1`] = `
 
 exports[`List block removes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -74,7 +74,7 @@ exports[`List block removes the indentation level 1`] = `
 
 exports[`List block sets a start value to an ordered list 1`] = `
 "<!-- wp:list {"ordered":true,"start":25} -->
-<ol start="25"><!-- wp:list-item -->
+<ol start="25" class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -90,19 +90,19 @@ exports[`List block sets a start value to an ordered list 1`] = `
 
 exports[`List block shows different indentation levels 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item nested 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item nested 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Extra item 1</li>
 <!-- /wp:list-item -->
 

package/src/list/test/__snapshots__/transforms.native.js.snap

@@ -4,7 +4,7 @@ exports[`List block transforms to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
 <div class="wp-block-column" style="flex-basis:100%"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
@@ -23,7 +23,7 @@ exports[`List block transforms to Columns block 1`] = `
 exports[`List block transforms to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
@@ -69,7 +69,7 @@ exports[`List block transforms to Paragraph block 1`] = `
 exports[`List block transforms to Quote block 1`] = `
 "<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->