@wordpress/block-library 8.6.0 → 8.7.0

package/src/navigation-submenu/index.php

@@ -14,66 +14,6 @@
  * @param  bool  $is_sub_menu Whether the block is a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_submenu_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
-	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	// Text color.
-	$named_text_color  = null;
-	$custom_text_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) {
-		$custom_text_color = $context['customOverlayTextColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) {
-		$named_text_color = $context['overlayTextColor'];
-	} elseif ( array_key_exists( 'customTextColor', $context ) ) {
-		$custom_text_color = $context['customTextColor'];
-	} elseif ( array_key_exists( 'textColor', $context ) ) {
-		$named_text_color = $context['textColor'];
-	} elseif ( isset( $context['style']['color']['text'] ) ) {
-		$custom_text_color = $context['style']['color']['text'];
-	}
-
-	// If has text color.
-	if ( ! is_null( $named_text_color ) ) {
-		// Add the color class.
-		array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) );
-	} elseif ( ! is_null( $custom_text_color ) ) {
-		// Add the custom color inline style.
-		$colors['css_classes'][]  = 'has-text-color';
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color );
-	}
-
-	// Background color.
-	$named_background_color  = null;
-	$custom_background_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customOverlayBackgroundColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) {
-		$named_background_color = $context['overlayBackgroundColor'];
-	} elseif ( array_key_exists( 'customBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customBackgroundColor'];
-	} elseif ( array_key_exists( 'backgroundColor', $context ) ) {
-		$named_background_color = $context['backgroundColor'];
-	} elseif ( isset( $context['style']['color']['background'] ) ) {
-		$custom_background_color = $context['style']['color']['background'];
-	}
-
-	// If has background color.
-	if ( ! is_null( $named_background_color ) ) {
-		// Add the background-color class.
-		array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) );
-	} elseif ( ! is_null( $custom_background_color ) ) {
-		// Add the custom background-color inline style.
-		$colors['css_classes'][]  = 'has-background';
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color );
-	}
-
-	return $colors;
-}
 
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
@@ -129,7 +69,6 @@ function block_core_navigation_submenu_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
-
 	$navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] );
 	$is_post_type           = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];
 	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
@@ -144,17 +83,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_submenu_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_submenu_build_css_font_sizes( $block->context );
-	$classes         = array_merge(
-		$colors['css_classes'],
-		$font_sizes['css_classes']
-	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
-	$css_classes = trim( implode( ' ', $classes ) );
+	$css_classes = trim( implode( ' ', $font_sizes['css_classes'] ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
+	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
@@ -249,14 +184,33 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
-		$colors      = block_core_navigation_submenu_build_css_colors( $block->context, $attributes, $has_submenu );
-		$classes     = array_merge(
-			array( 'wp-block-navigation__submenu-container' ),
-			$colors['css_classes']
-		);
-		$css_classes = trim( implode( ' ', $classes ) );
+		// Copy some attributes from the parent block to this one.
+		// Ideally this would happen in the client when the block is created.
+		if ( array_key_exists( 'overlayTextColor', $block->context ) ) {
+			$attributes['textColor'] = $block->context['overlayTextColor'];
+		}
+		if ( array_key_exists( 'overlayBackgroundColor', $block->context ) ) {
+			$attributes['backgroundColor'] = $block->context['overlayBackgroundColor'];
+		}
+		if ( array_key_exists( 'customOverlayTextColor', $block->context ) ) {
+			$attributes['style']['color']['text'] = $block->context['customOverlayTextColor'];
+		}
+		if ( array_key_exists( 'customOverlayBackgroundColor', $block->context ) ) {
+			$attributes['style']['color']['background'] = $block->context['customOverlayBackgroundColor'];
+		}
 
-		$style_attribute = $colors['inline_styles'];
+		// This allows us to be able to get a response from gutenberg_apply_colors_support.
+		$block->block_type->supports['color'] = true;
+		$colors_supports                      = gutenberg_apply_colors_support( $block->block_type, $attributes );
+		$css_classes                          = 'wp-block-navigation__submenu-container';
+		if ( array_key_exists( 'class', $colors_supports ) ) {
+			$css_classes .= ' ' . $colors_supports['class'];
+		}
+
+		$style_attribute = '';
+		if ( array_key_exists( 'style', $colors_supports ) ) {
+			$style_attribute = $colors_supports['style'];
+		}
 
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {

package/src/post-author/index.php

@@ -32,7 +32,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	$link        = get_author_posts_url( $author_id );
 	$author_name = get_the_author_meta( 'display_name', $author_id );
 	if ( ! empty( $attributes['isLink'] && ! empty( $attributes['linkTarget'] ) ) ) {
-		$author_name = sprintf( '<a href="%1s" target="%2s">%2s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
+		$author_name = sprintf( '<a href="%1$s" target="%2$s">%3$s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
 	}
 
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;

package/src/post-date/edit.js

@@ -76,12 +76,15 @@ export default function PostDateEdit( {
 		[ postTypeSlug ]
 	);
 
+	const dateLabel =
+		displayType === 'date' ? __( 'Post Date' ) : __( 'Post Modified Date' );
+
 	let postDate = date ? (
 		<time dateTime={ dateI18n( 'c', date ) } ref={ setPopoverAnchor }>
 			{ dateI18n( format || siteFormat, date ) }
 		</time>
 	) : (
-		__( 'Post Date' )
+		dateLabel
 	);
 
 	if ( isLink && date ) {

package/src/post-date/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import deprecated from './deprecated';
+import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/post-date/variations.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { postDate } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'post-date-modified',
+		title: __( 'Post Modified Date' ),
+		description: __( "Display a post's last updated date." ),
+		attributes: { displayType: 'modified' },
+		scope: [ 'block', 'inserter' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.displayType === 'modified',
+		icon: postDate,
+	},
+];
+
+export default variations;

package/src/post-excerpt/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import {
 	AlignmentToolbar,
@@ -18,12 +18,15 @@ import {
 } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
+const ELLIPSIS = '…';
+
 export default function PostExcerptEditor( {
 	attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength },
 	setAttributes,
@@ -32,13 +35,41 @@ export default function PostExcerptEditor( {
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
-	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
-
 	const [
 		rawExcerpt,
 		setExcerpt,
 		{ rendered: renderedExcerpt, protected: isProtected } = {},
 	] = useEntityProp( 'postType', postType, 'excerpt', postId );
+
+	/**
+	 * Check if the post type supports excerpts.
+	 * Add an exception and return early for the "page" post type,
+	 * which is registered without support for the excerpt UI,
+	 * but supports saving the excerpt to the database.
+	 * See: https://core.trac.wordpress.org/browser/branches/6.1/src/wp-includes/post.php#L65
+	 * Without this exception, users that have excerpts saved to the database will
+	 * not be able to edit the excerpts.
+	 */
+	const postTypeSupportsExcerpts = useSelect(
+		( select ) => {
+			if ( postType === 'page' ) {
+				return true;
+			}
+			return !! select( coreStore ).getPostType( postType )?.supports
+				.excerpt;
+		},
+		[ postType ]
+	);
+
+	/**
+	 * The excerpt is editable if:
+	 * - The user can edit the post
+	 * - It is not a descendent of a Query Loop block
+	 * - The post type supports excerpts
+	 */
+	const isEditable =
+		userCanEdit && ! isDescendentOfQueryLoop && postTypeSupportsExcerpts;
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -65,6 +96,7 @@ export default function PostExcerptEditor( {
 		);
 		return document.body.textContent || document.body.innerText || '';
 	}, [ renderedExcerpt ] );
+
 	if ( ! postType || ! postId ) {
 		return (
 			<>
@@ -123,14 +155,13 @@ export default function PostExcerptEditor( {
 	 * The excerpt length setting needs to be applied to both
 	 * the raw and the rendered excerpt depending on which is being used.
 	 */
-	const rawOrRenderedExcerpt = !! renderedExcerpt
-		? strippedRenderedExcerpt
-		: rawExcerpt;
+	const rawOrRenderedExcerpt = (
+		rawExcerpt || strippedRenderedExcerpt
+	).trim();
 
 	let trimmedExcerpt = '';
 	if ( wordCountType === 'words' ) {
 		trimmedExcerpt = rawOrRenderedExcerpt
-			.trim()
 			.split( ' ', excerptLength )
 			.join( ' ' );
 	} else if ( wordCountType === 'characters_excluding_spaces' ) {
@@ -143,7 +174,6 @@ export default function PostExcerptEditor( {
 		 * so that the spaces are excluded from the word count.
 		 */
 		const excerptWithSpaces = rawOrRenderedExcerpt
-			.trim()
 			.split( '', excerptLength )
 			.join( '' );
 
@@ -152,14 +182,15 @@ export default function PostExcerptEditor( {
 			excerptWithSpaces.replaceAll( ' ', '' ).length;
 
 		trimmedExcerpt = rawOrRenderedExcerpt
-			.trim()
 			.split( '', excerptLength + numberOfSpaces )
 			.join( '' );
 	} else if ( wordCountType === 'characters_including_spaces' ) {
-		trimmedExcerpt = rawOrRenderedExcerpt.trim().split( '', excerptLength );
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.split( '', excerptLength )
+			.join( '' );
 	}
 
-	trimmedExcerpt = trimmedExcerpt + '...';
+	const isTrimmed = trimmedExcerpt !== rawOrRenderedExcerpt;
 
 	const excerptContent = isEditable ? (
 		<RichText
@@ -168,7 +199,9 @@ export default function PostExcerptEditor( {
 			value={
 				isSelected
 					? rawOrRenderedExcerpt
-					: ( trimmedExcerpt !== '...' ? trimmedExcerpt : '' ) ||
+					: ( ! isTrimmed
+							? rawOrRenderedExcerpt
+							: trimmedExcerpt + ELLIPSIS ) ||
 					  __( 'No post excerpt found' )
 			}
 			onChange={ setExcerpt }
@@ -176,9 +209,9 @@ export default function PostExcerptEditor( {
 		/>
 	) : (
 		<p className={ excerptClassName }>
-			{ trimmedExcerpt !== '...'
-				? trimmedExcerpt
-				: __( 'No post excerpt found' ) }
+			{ ! isTrimmed
+				? rawOrRenderedExcerpt || __( 'No post excerpt found' )
+				: trimmedExcerpt + ELLIPSIS }
 		</p>
 	);
 	return (
@@ -208,7 +241,6 @@ export default function PostExcerptEditor( {
 						value={ excerptLength }
 						onChange={ ( value ) => {
 							setAttributes( { excerptLength: value } );
-							setExcerpt();
 						} }
 						min="10"
 						max="100"

package/src/post-featured-image/dimension-controls.js

@@ -204,7 +204,7 @@ const DimensionControls = ( {
 			{ !! imageSizeOptions.length && (
 				<ToolsPanelItem
 					hasValue={ () => !! sizeSlug }
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					onDeselect={ () =>
 						setAttributes( { sizeSlug: undefined } )
 					}
@@ -216,7 +216,7 @@ const DimensionControls = ( {
 				>
 					<SelectControl
 						__nextHasNoMarginBottom
-						label={ __( 'Image size' ) }
+						label={ __( 'Resolution' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
 						options={ imageSizeOptions }
 						onChange={ ( nextSizeSlug ) =>

package/src/post-featured-image/editor.scss

@@ -12,6 +12,7 @@
 		justify-content: center;
 		align-items: center;
 		padding: 0;
+		display: flex;
 
 		// Hide the upload button, as it's also available in the media library.
 		.components-form-file-upload {

package/src/post-template/block.json

@@ -18,7 +18,7 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
-		"align": true,
+		"align": [ "wide", "full" ],
 		"anchor": true,
 		"__experimentalLayout": {
 			"allowEditing": false

package/src/post-template/style.scss

@@ -16,7 +16,7 @@
 		flex-wrap: wrap;
 		gap: 1.25em;
 
-		li {
+		> li {
 			margin: 0;
 			width: 100%;
 		}

package/src/post-time-to-read/block.json

@@ -15,6 +15,22 @@
 	},
 	"supports": {
 		"html": false,
-		"multiple": false
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	}
 }

package/src/post-time-to-read/style.scss

@@ -0,0 +1,4 @@
+.wp-block-post-time-to-read {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/query-title/index.php

@@ -28,12 +28,9 @@ function render_block_core_query_title( $attributes ) {
 	if ( $is_archive ) {
 		$show_prefix = isset( $attributes['showPrefix'] ) ? $attributes['showPrefix'] : true;
 		if ( ! $show_prefix ) {
-			$filter_title = function( $title, $original_title ) {
-				return $original_title;
-			};
-			add_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			add_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 			$title = get_the_archive_title();
-			remove_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			remove_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 		} else {
 			$title = get_the_archive_title();
 		}

package/src/quote/block.json

@@ -29,6 +29,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"html": false,
 		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,

package/src/search/style.scss

@@ -1,5 +1,8 @@
+$button-spacing-x: $grid-unit-10 + math.div($grid-unit-05, 2); // 10px
+$button-spacing-y: math.div($grid-unit-15, 2); // 6px
+
 .wp-block-search__button {
-	margin-left: 0.625em;
+	margin-left: $button-spacing-x;
 	word-break: normal;
 
 	&.has-icon {
@@ -7,8 +10,8 @@
 	}
 
 	svg {
-		min-width: 1.5em;
-		min-height: 1.5em;
+		min-width: $grid-unit-30;
+		min-height: $grid-unit-30;
 		fill: currentColor;
 		vertical-align: text-bottom;
 	}
@@ -17,8 +20,8 @@
 // These rules are set to zero specificity to keep the default styles for search buttons.
 // They are needed for backwards compatibility.
 :where(.wp-block-search__button) {
-	border: 1px solid #ccc;
-	padding: 0.375em 0.625em;
+	border: 1px solid $gray-400;
+	padding: $button-spacing-y $button-spacing-x;
 }
 
 .wp-block-search__inside-wrapper {
@@ -33,12 +36,12 @@
 }
 
 .wp-block-search__input {
-	padding: 8px;
+	padding: $grid-unit-10;
 	flex-grow: 1;
 	margin-left: 0;
 	margin-right: 0;
-	min-width: 3em;
-	border: 1px solid #949494;
+	min-width: 3rem;
+	border: 1px solid $gray-600;
 	// !important used to forcibly prevent undesired application of
 	// text-decoration styles on the input field.
 	text-decoration: unset !important;
@@ -52,13 +55,14 @@
 
 // We are lowering the specificity so that the button element can override the rule for the button inside the search block.
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
-	padding: 4px;
-	border: 1px solid #949494;
+	padding: $grid-unit-05;
+	border: 1px solid $gray-600;
+	box-sizing: border-box;
 
 	.wp-block-search__input {
 		border-radius: 0;
 		border: none;
-		padding: 0 0 0 0.25em;
+		padding: 0 $grid-unit-05;
 
 		&:focus {
 			outline: none;
@@ -67,7 +71,7 @@
 
 	// For lower specificity.
 	:where(.wp-block-search__button) {
-		padding: 0.125em 0.5em;
+		padding: $grid-unit-05 $grid-unit-10;
 	}
 }
 

package/src/spacer/edit.js

@@ -78,8 +78,16 @@ const SpacerEdit = ( {
 	setAttributes,
 	toggleSelection,
 	context,
+	__unstableParentLayout: parentLayout,
 } ) => {
 	const { orientation } = context;
+	const { orientation: parentOrientation, type } = parentLayout || {};
+	// If the spacer is inside a flex container, it should either inherit the orientation
+	// of the parent or use the flex default orientation.
+	const inheritedOrientation =
+		! parentOrientation && type === 'flex'
+			? 'horizontal'
+			: parentOrientation || orientation;
 	const { height, width } = attributes;
 
 	const [ isResizing, setIsResizing ] = useState( false );
@@ -104,13 +112,18 @@ const SpacerEdit = ( {
 
 	const style = {
 		height:
-			orientation === 'horizontal'
+			inheritedOrientation === 'horizontal'
 				? 24
 				: temporaryHeight || height || undefined,
 		width:
-			orientation === 'horizontal'
+			inheritedOrientation === 'horizontal'
 				? temporaryWidth || width || undefined
 				: undefined,
+		// In vertical flex containers, the spacer shrinks to nothing without a minimum width.
+		minWidth:
+			inheritedOrientation === 'vertical' && type === 'flex'
+				? 48
+				: undefined,
 	};
 
 	const resizableBoxWithOrientation = ( blockOrientation ) => {
@@ -166,7 +179,7 @@ const SpacerEdit = ( {
 	};
 
 	useEffect( () => {
-		if ( orientation === 'horizontal' && ! width ) {
+		if ( inheritedOrientation === 'horizontal' && ! width ) {
 			setAttributes( {
 				height: '0px',
 				width: '72px',
@@ -177,13 +190,13 @@ const SpacerEdit = ( {
 	return (
 		<>
 			<View { ...useBlockProps( { style } ) }>
-				{ resizableBoxWithOrientation( orientation ) }
+				{ resizableBoxWithOrientation( inheritedOrientation ) }
 			</View>
 			<SpacerControls
 				setAttributes={ setAttributes }
 				height={ temporaryHeight || height }
 				width={ temporaryWidth || width }
-				orientation={ orientation }
+				orientation={ inheritedOrientation }
 				isResizing={ isResizing }
 			/>
 		</>

package/src/style.scss

@@ -32,6 +32,7 @@
 @import "./post-featured-image/style.scss";
 @import "./post-navigation-link/style.scss";
 @import "./post-terms/style.scss";
+@import "./post-time-to-read/style.scss";
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";

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

@@ -34,7 +34,7 @@ exports[`Video block transforms to Group block 1`] = `
 
 exports[`Video block transforms to Media & Text block 1`] = `
 "<!-- wp:media-text {"mediaType":"video"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
 <p></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->"