@wordpress/block-library 9.7.1-next.5368f64a9.0 → 9.8.0

package/src/categories/index.php

@@ -21,11 +21,14 @@ function render_block_core_categories( $attributes, $content, $block ) {
 	static $block_id = 0;
 	++$block_id;
 
+	$taxonomy = get_taxonomy( $attributes['taxonomy'] );
+
 	$args = array(
 		'echo'         => false,
 		'hierarchical' => ! empty( $attributes['showHierarchy'] ),
 		'orderby'      => 'name',
 		'show_count'   => ! empty( $attributes['showPostCounts'] ),
+		'taxonomy'     => $attributes['taxonomy'],
 		'title_li'     => '',
 		'hide_empty'   => empty( $attributes['showEmpty'] ),
 	);
@@ -36,13 +39,20 @@ function render_block_core_categories( $attributes, $content, $block ) {
 	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
-		$args['show_option_none'] = __( 'Select Category' );
-		$show_label               = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
-		$default_label            = __( 'Categories' );
-		$label_text               = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-		$wrapper_markup           = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
-		$items_markup             = wp_dropdown_categories( $args );
-		$type                     = 'dropdown';
+		$args['name']             = $taxonomy->query_var;
+		$args['value_field']      = 'slug';
+		$args['show_option_none'] = sprintf(
+			/* translators: %s: taxonomy's singular name */
+			__( 'Select %s' ),
+			$taxonomy->labels->singular_name
+		);
+
+		$show_label     = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+		$default_label  = $taxonomy->label;
+		$label_text     = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+		$wrapper_markup = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
+		$items_markup   = wp_dropdown_categories( $args );
+		$type           = 'dropdown';
 
 		if ( ! is_admin() ) {
 			// Inject the dropdown script immediately after the select dropdown.
@@ -54,6 +64,8 @@ function render_block_core_categories( $attributes, $content, $block ) {
 			);
 		}
 	} else {
+		$args['show_option_none'] = $taxonomy->labels->no_terms;
+
 		$wrapper_markup = '<ul %1$s>%2$s</ul>';
 		$items_markup   = wp_list_categories( $args );
 		$type           = 'list';
@@ -92,8 +104,8 @@ function build_dropdown_script_block_core_categories( $dropdown_id ) {
 	( function() {
 		var dropdown = document.getElementById( '<?php echo esc_js( $dropdown_id ); ?>' );
 		function onCatChange() {
-			if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
-				location.href = "<?php echo esc_url( home_url() ); ?>/?cat=" + dropdown.options[ dropdown.selectedIndex ].value;
+			if ( dropdown.options[ dropdown.selectedIndex ].value !== -1 ) {
+				location.href = "<?php echo esc_url( home_url() ); ?>/?" + dropdown.name + '=' + dropdown.options[ dropdown.selectedIndex ].value;
 			}
 		}
 		dropdown.onchange = onCatChange;

package/src/categories/variations.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { category as icon } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'terms',
+		title: __( 'Terms List' ),
+		icon,
+		attributes: {
+			// We need to set an attribute here that will be set when inserting the block.
+			// We cannot leave this empty, as that would be interpreted as the default value,
+			// which is `category` -- for which we're defining a distinct variation below,
+			// for backwards compatibility reasons.
+			// The logical fallback is thus the only other built-in and public taxonomy: Tags.
+			taxonomy: 'post_tag',
+		},
+		isActive: ( blockAttributes ) =>
+			// This variation is used for any taxonomy other than `category`.
+			blockAttributes.taxonomy !== 'category',
+	},
+	{
+		name: 'categories',
+		title: __( 'Categories List' ),
+		description: __( 'Display a list of all categories.' ),
+		icon,
+		attributes: {
+			taxonomy: 'category',
+		},
+		isActive: [ 'taxonomy' ],
+		// The following is needed to prevent "Terms List" from showing up twice in the inserter
+		// (once for the block, once for the variation). Fortunately, it does not collide with
+		// `categories` being the default value of the `taxonomy` attribute.
+		isDefault: true,
+	},
+];
+
+export default variations;

package/src/comments-pagination-next/index.php

@@ -37,7 +37,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 		$label .= $pagination_arrow;
 	}
 
-	$next_comments_link = get_next_comments_link( $label, $max_page );
+	$next_comments_link = get_next_comments_link( $label, $max_page, $comment_vars['paged'] ?? null );
 
 	remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
 

package/src/comments-pagination-previous/index.php

@@ -29,7 +29,8 @@ function render_block_core_comments_pagination_previous( $attributes, $content,
 	};
 	add_filter( 'previous_comments_link_attributes', $filter_link_attributes );
 
-	$previous_comments_link = get_previous_comments_link( $label );
+	$comment_vars           = build_comment_query_vars_from_block( $block );
+	$previous_comments_link = get_previous_comments_link( $label, $comment_vars['paged'] ?? null );
 
 	remove_filter( 'previous_comments_link_attributes', $filter_link_attributes );
 

package/src/embed/embed-preview.js

@@ -14,7 +14,7 @@ import clsx from 'clsx';
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { getAuthority } from '@wordpress/url';
 
 /**
@@ -23,129 +23,113 @@ import { getAuthority } from '@wordpress/url';
 import WpEmbedPreview from './wp-embed-preview';
 import { Caption } from '../utils/caption';
 
-class EmbedPreview extends Component {
-	constructor() {
-		super( ...arguments );
-		this.hideOverlay = this.hideOverlay.bind( this );
-		this.state = {
-			interactive: false,
-		};
-	}
-
-	static getDerivedStateFromProps( nextProps, state ) {
-		if ( ! nextProps.isSelected && state.interactive ) {
-			// We only want to change this when the block is not selected, because changing it when
-			// the block becomes selected makes the overlap disappear too early. Hiding the overlay
-			// happens on mouseup when the overlay is clicked.
-			return { interactive: false };
-		}
+export default function EmbedPreview( {
+	preview,
+	previewable,
+	url,
+	type,
+	isSelected,
+	className,
+	icon,
+	label,
+	insertBlocksAfter,
+	attributes,
+	setAttributes,
+} ) {
+	const [ interactive, setInteractive ] = useState( false );
 
-		return null;
+	if ( ! isSelected && interactive ) {
+		// We only want to change this when the block is not selected, because changing it when
+		// the block becomes selected makes the overlap disappear too early. Hiding the overlay
+		// happens on mouseup when the overlay is clicked.
+		setInteractive( false );
 	}
 
-	hideOverlay() {
+	const hideOverlay = () => {
 		// This is called onMouseUp on the overlay. We can't respond to the `isSelected` prop
 		// changing, because that happens on mouse down, and the overlay immediately disappears,
 		// and the mouse event can end up in the preview content. We can't use onClick on
 		// the overlay to hide it either, because then the editor misses the mouseup event, and
 		// thinks we're multi-selecting blocks.
-		this.setState( { interactive: true } );
-	}
+		setInteractive( true );
+	};
 
-	render() {
-		const {
-			preview,
-			previewable,
-			url,
-			type,
-			className,
-			icon,
-			label,
-			insertBlocksAfter,
-			attributes,
-			setAttributes,
-			isSelected,
-		} = this.props;
-		const { scripts } = preview;
-		const { interactive } = this.state;
+	const { scripts } = preview;
 
-		const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
-		const embedSourceUrl = getAuthority( url );
-		const iframeTitle = sprintf(
-			// translators: %s: host providing embed content e.g: www.youtube.com
-			__( 'Embedded content from %s' ),
-			embedSourceUrl
-		);
-		const sandboxClassnames = clsx(
-			type,
-			className,
-			'wp-block-embed__wrapper'
-		);
+	const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
+	const embedSourceUrl = getAuthority( url );
+	const iframeTitle = sprintf(
+		// translators: %s: host providing embed content e.g: www.youtube.com
+		__( 'Embedded content from %s' ),
+		embedSourceUrl
+	);
+	const sandboxClassnames = clsx(
+		type,
+		className,
+		'wp-block-embed__wrapper'
+	);
 
-		// Disabled because the overlay div doesn't actually have a role or functionality
-		// as far as the user is concerned. We're just catching the first click so that
-		// the block can be selected without interacting with the embed preview that the overlay covers.
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
-		const embedWrapper =
-			'wp-embed' === type ? (
-				<WpEmbedPreview html={ html } />
-			) : (
-				<div className="wp-block-embed__wrapper">
-					<SandBox
-						html={ html }
-						scripts={ scripts }
-						title={ iframeTitle }
-						type={ sandboxClassnames }
-						onFocus={ this.hideOverlay }
+	// Disabled because the overlay div doesn't actually have a role or functionality
+	// as far as the user is concerned. We're just catching the first click so that
+	// the block can be selected without interacting with the embed preview that the overlay covers.
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	const embedWrapper =
+		'wp-embed' === type ? (
+			<WpEmbedPreview html={ html } />
+		) : (
+			<div className="wp-block-embed__wrapper">
+				<SandBox
+					html={ html }
+					scripts={ scripts }
+					title={ iframeTitle }
+					type={ sandboxClassnames }
+					onFocus={ hideOverlay }
+				/>
+				{ ! interactive && (
+					<div
+						className="block-library-embed__interactive-overlay"
+						onMouseUp={ hideOverlay }
 					/>
-					{ ! interactive && (
-						<div
-							className="block-library-embed__interactive-overlay"
-							onMouseUp={ this.hideOverlay }
-						/>
-					) }
-				</div>
-			);
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
-
-		return (
-			<figure
-				className={ clsx( className, 'wp-block-embed', {
-					'is-type-video': 'video' === type,
-				} ) }
-			>
-				{ previewable ? (
-					embedWrapper
-				) : (
-					<Placeholder
-						icon={ <BlockIcon icon={ icon } showColors /> }
-						label={ label }
-					>
-						<p className="components-placeholder__error">
-							<a href={ url }>{ url }</a>
-						</p>
-						<p className="components-placeholder__error">
-							{ sprintf(
-								/* translators: %s: host providing embed content e.g: www.youtube.com */
-								__(
-									"Embedded content from %s can't be previewed in the editor."
-								),
-								embedSourceUrl
-							) }
-						</p>
-					</Placeholder>
 				) }
-				<Caption
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					isSelected={ isSelected }
-					insertBlocksAfter={ insertBlocksAfter }
-					label={ __( 'Embed caption text' ) }
-					showToolbarButton={ isSelected }
-				/>
-			</figure>
+			</div>
 		);
-	}
-}
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
 
-export default EmbedPreview;
+	return (
+		<figure
+			className={ clsx( className, 'wp-block-embed', {
+				'is-type-video': 'video' === type,
+			} ) }
+		>
+			{ previewable ? (
+				embedWrapper
+			) : (
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } showColors /> }
+					label={ label }
+				>
+					<p className="components-placeholder__error">
+						<a href={ url }>{ url }</a>
+					</p>
+					<p className="components-placeholder__error">
+						{ sprintf(
+							/* translators: %s: host providing embed content e.g: www.youtube.com */
+							__(
+								"Embedded content from %s can't be previewed in the editor."
+							),
+							embedSourceUrl
+						) }
+					</p>
+				</Placeholder>
+			) }
+			<Caption
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
+				insertBlocksAfter={ insertBlocksAfter }
+				label={ __( 'Embed caption text' ) }
+				showToolbarButton={ isSelected }
+			/>
+		</figure>
+	);
+}

package/src/form-input/deprecated.js

@@ -9,6 +9,7 @@ import removeAccents from 'remove-accents';
  */
 import {
 	RichText,
+	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
@@ -26,6 +27,118 @@ const getNameFromLabelV1 = ( content ) => {
 	);
 };
 
+const v2 = {
+	attributes: {
+		type: {
+			type: 'string',
+			default: 'text',
+		},
+		name: {
+			type: 'string',
+		},
+		label: {
+			type: 'string',
+			default: 'Label',
+			selector: '.wp-block-form-input__label-content',
+			source: 'html',
+			__experimentalRole: 'content',
+		},
+		inlineLabel: {
+			type: 'boolean',
+			default: false,
+		},
+		required: {
+			type: 'boolean',
+			default: false,
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'required',
+		},
+		placeholder: {
+			type: 'string',
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'placeholder',
+			__experimentalRole: 'content',
+		},
+		value: {
+			type: 'string',
+			default: '',
+			selector: 'input',
+			source: 'attribute',
+			attribute: 'value',
+		},
+		visibilityPermissions: {
+			type: 'string',
+			default: 'all',
+		},
+	},
+	supports: {
+		anchor: true,
+		reusable: false,
+		spacing: {
+			margin: [ 'top', 'bottom' ],
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { type, name, label, inlineLabel, required, placeholder, value } =
+			attributes;
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+
+		const inputStyle = {
+			...borderProps.style,
+			...colorProps.style,
+		};
+
+		const inputClasses = clsx(
+			'wp-block-form-input__input',
+			colorProps.className,
+			borderProps.className
+		);
+		const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+		const blockProps = useBlockProps.save();
+
+		if ( 'hidden' === type ) {
+			return <input type={ type } name={ name } value={ value } />;
+		}
+
+		return (
+			<div { ...blockProps }>
+				{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+				<label
+					className={ clsx( 'wp-block-form-input__label', {
+						'is-label-inline': inlineLabel,
+					} ) }
+				>
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+					<TagName
+						className={ inputClasses }
+						type={ 'textarea' === type ? undefined : type }
+						name={ name || getNameFromLabelV1( label ) }
+						required={ required }
+						aria-required={ required }
+						placeholder={ placeholder || undefined }
+						style={ inputStyle }
+					/>
+				</label>
+				{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
+			</div>
+		);
+	},
+};
+
 // Version without wrapper div in saved markup
 // See: https://github.com/WordPress/gutenberg/pull/56507
 const v1 = {
@@ -137,6 +250,6 @@ const v1 = {
 	},
 };
 
-const deprecated = [ v1 ];
+const deprecated = [ v2, v1 ];
 
 export default deprecated;

package/src/form-input/edit.js

@@ -31,6 +31,9 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		ref.current.focus();
 	}
 
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
 	const controls = (
 		<>
 			{ 'hidden' !== type && (
@@ -81,6 +84,18 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		</>
 	);
 
+	const content = (
+		<RichText
+			tagName="span"
+			className="wp-block-form-input__label-content"
+			value={ label }
+			onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }
+			aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
+			data-empty={ ! label }
+			placeholder={ __( 'Type the label for this input' ) }
+		/>
+	);
+
 	if ( 'hidden' === type ) {
 		return (
 			<>
@@ -111,17 +126,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					'is-label-inline': inlineLabel || 'checkbox' === type,
 				} ) }
 			>
-				<RichText
-					tagName="span"
-					className="wp-block-form-input__label-content"
-					value={ label }
-					onChange={ ( newLabel ) =>
-						setAttributes( { label: newLabel } )
-					}
-					aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
-					data-empty={ label ? false : true }
-					placeholder={ __( 'Type the label for this input' ) }
-				/>
+				{ ! isCheckboxOrRadio && content }
 				<TagName
 					type={ 'textarea' === type ? undefined : type }
 					className={ clsx(
@@ -147,6 +152,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 						...colorProps.style,
 					} }
 				/>
+				{ isCheckboxOrRadio && content }
 			</span>
 		</div>
 	);

package/src/form-input/save.js

@@ -55,6 +55,9 @@ export default function save( { attributes } ) {
 
 	const blockProps = useBlockProps.save();
 
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
 	if ( 'hidden' === type ) {
 		return <input type={ type } name={ name } value={ value } />;
 	}
@@ -67,9 +70,11 @@ export default function save( { attributes } ) {
 					'is-label-inline': inlineLabel,
 				} ) }
 			>
-				<span className="wp-block-form-input__label-content">
-					<RichText.Content value={ label } />
-				</span>
+				{ ! isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
 				<TagName
 					className={ inputClasses }
 					type={ 'textarea' === type ? undefined : type }
@@ -79,6 +84,11 @@ export default function save( { attributes } ) {
 					placeholder={ placeholder || undefined }
 					style={ inputStyle }
 				/>
+				{ isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
 			</label>
 			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
 		</div>

package/src/form-input/style.scss

@@ -15,16 +15,17 @@
 		}
 	}
 
-	/*
-	Small tweak to left-align the checkbox.
-	Even though `:has` is not currently supported in Firefox, this is a small tweak
-	and does not affect the functionality of the block or the user's experience.
-	There will be a minor inconsistency between browsers. However, it's more important to provide
-	a better experience for 80+% of users, until Firefox catches up and supports `:has`.
-	*/
 	&:has(input[type="checkbox"]) {
+		flex-direction: row;
 		width: fit-content;
-		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+
+		.wp-block-form-input__label-content {
+			margin: 0;
+		}
+	}
+
+	&:has(.wp-block-form-input__label-content + input[type="checkbox"]) {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
 		flex-direction: row-reverse;
 	}
 }

package/src/image/image.js

@@ -559,7 +559,8 @@ export default function Image( {
 	const mediaReplaceFlow = isSingleSelected &&
 		! isEditingImage &&
 		! lockUrlControls && (
-			<BlockControls group="other">
+			// For contentOnly mode, put this button in its own area so it has borders around it.
+			<BlockControls group={ isContentOnlyMode ? 'inline' : 'other' }>
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }

package/src/navigation-submenu/block.json

@@ -59,6 +59,19 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/post-template/edit.js

@@ -90,6 +90,7 @@ export default function PostTemplateEdit( {
 			taxQuery,
 			parents,
 			pages,
+			format,
 			// We gather extra query args to pass to the REST API call.
 			// This way extenders of Query Loop can add their own query args,
 			// and have accurate previews in the editor.
@@ -163,6 +164,10 @@ export default function PostTemplateEdit( {
 			if ( parents?.length ) {
 				query.parent = parents;
 			}
+			if ( format?.length ) {
+				query.format = format;
+			}
+
 			// If sticky is not set, it will return all posts in the results.
 			// If sticky is set to `only`, it will limit the results to sticky posts only.
 			// If it is anything else, it will exclude sticky posts from results. For the record the value stored is `exclude`.
@@ -205,6 +210,7 @@ export default function PostTemplateEdit( {
 			templateSlug,
 			taxQuery,
 			parents,
+			format,
 			restQueryArgs,
 			previewPostType,
 		]

package/src/post-template/index.php

@@ -64,6 +64,11 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		if ( in_the_loop() ) {
 			$query = clone $wp_query;
 			$query->rewind_posts();
+
+			// If in a single post of any post type, default to the 'post' post type.
+			if ( is_singular() ) {
+				query_posts( array( 'post_type' => 'post' ) );
+			}
 		} else {
 			$query = $wp_query;
 		}