@wordpress/block-library 8.3.6 → 8.5.0

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

@@ -49,7 +49,7 @@ const scaleHelp = {
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { width, height, scale, sizeSlug },
+	attributes: { aspectRatio, width, height, scale, sizeSlug },
 	setAttributes,
 	imageSizeOptions = [],
 } ) => {
@@ -72,6 +72,68 @@ const DimensionControls = ( {
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
 		<InspectorControls group="dimensions">
+			<ToolsPanelItem
+				hasValue={ () => !! aspectRatio }
+				label={ __( 'Aspect ratio' ) }
+				onDeselect={ () => setAttributes( { aspectRatio: undefined } ) }
+				resetAllFilter={ () => ( {
+					aspectRatio: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
+			>
+				<SelectControl
+					__nextHasNoMarginBottom
+					label={ __( 'Aspect ratio' ) }
+					value={ aspectRatio }
+					options={ [
+						// These should use the same values as AspectRatioDropdown in @wordpress/block-editor
+						{
+							label: __( 'Original' ),
+							value: 'auto',
+						},
+						{
+							label: __( 'Square' ),
+							value: '1',
+						},
+						{
+							label: __( '16:10' ),
+							value: '16/10',
+						},
+						{
+							label: __( '16:9' ),
+							value: '16/9',
+						},
+						{
+							label: __( '4:3' ),
+							value: '4/3',
+						},
+						{
+							label: __( '3:2' ),
+							value: '3/2',
+						},
+						{
+							label: __( '10:16' ),
+							value: '10/16',
+						},
+						{
+							label: __( '9:16' ),
+							value: '9/16',
+						},
+						{
+							label: __( '3:4' ),
+							value: '3/4',
+						},
+						{
+							label: __( '2:3' ),
+							value: '2/3',
+						},
+					] }
+					onChange={ ( nextAspectRatio ) =>
+						setAttributes( { aspectRatio: nextAspectRatio } )
+					}
+				/>
+			</ToolsPanelItem>
 			<ToolsPanelItem
 				className="single-column"
 				hasValue={ () => !! height }
@@ -116,7 +178,7 @@ const DimensionControls = ( {
 					units={ units }
 				/>
 			</ToolsPanelItem>
-			{ !! height && (
+			{ ( height || aspectRatio ) && (
 				<ToolsPanelItem
 					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }

package/src/post-featured-image/edit.js

@@ -50,8 +50,16 @@ export default function PostFeaturedImageEdit( {
 	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale, sizeSlug, rel, linkTarget } =
-		attributes;
+	const {
+		isLink,
+		aspectRatio,
+		height,
+		width,
+		scale,
+		sizeSlug,
+		rel,
+		linkTarget,
+	} = attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
@@ -89,7 +97,7 @@ export default function PostFeaturedImageEdit( {
 		} ) );
 
 	const blockProps = useBlockProps( {
-		style: { width, height },
+		style: { width, height, aspectRatio },
 	} );
 	const borderProps = useBorderProps( attributes );
 
@@ -101,7 +109,10 @@ export default function PostFeaturedImageEdit( {
 					borderProps.className
 				) }
 				withIllustration={ true }
-				style={ borderProps.style }
+				style={ {
+					...blockProps.style,
+					...borderProps.style,
+				} }
 			>
 				{ content }
 			</Placeholder>
@@ -130,6 +141,7 @@ export default function PostFeaturedImageEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -145,6 +157,7 @@ export default function PostFeaturedImageEdit( {
 					{ isLink && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
 								onChange={ ( value ) =>
 									setAttributes( {
@@ -218,8 +231,9 @@ export default function PostFeaturedImageEdit( {
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,
-		height,
-		objectFit: height && scale,
+		height: ( !! aspectRatio && '100%' ) || height,
+		width: !! aspectRatio && '100%',
+		objectFit: !! ( height || aspectRatio ) && scale,
 	};
 
 	/**

package/src/post-featured-image/index.php

@@ -42,11 +42,20 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		}
 	}
 
-	if ( ! empty( $attributes['height'] ) ) {
-		$extra_styles = "height:{$attributes['height']};";
-		if ( ! empty( $attributes['scale'] ) ) {
-			$extra_styles .= "object-fit:{$attributes['scale']};";
-		}
+	$extra_styles = '';
+
+	// Aspect ratio with a height set needs to override the default width/height.
+	if ( ! empty( $attributes['aspectRatio'] ) ) {
+		$extra_styles .= 'width:100%;height:100%;';
+	} elseif ( ! empty( $attributes['height'] ) ) {
+		$extra_styles .= "height:{$attributes['height']};";
+	}
+
+	if ( ! empty( $attributes['scale'] ) ) {
+		$extra_styles .= "object-fit:{$attributes['scale']};";
+	}
+
+	if ( ! empty( $extra_styles ) ) {
 		$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
 	}
 
@@ -71,12 +80,19 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = $featured_image . $overlay_markup;
 	}
 
-	$width  = ! empty( $attributes['width'] ) ? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';' : '';
-	$height = ! empty( $attributes['height'] ) ? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';' : '';
-	if ( ! $height && ! $width ) {
+	$aspect_ratio = ! empty( $attributes['aspectRatio'] )
+		? esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';'
+		: '';
+	$width        = ! empty( $attributes['width'] )
+		? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';'
+		: '';
+	$height       = ! empty( $attributes['height'] )
+		? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';'
+		: '';
+	if ( ! $height && ! $width && ! $aspect_ratio ) {
 		$wrapper_attributes = get_block_wrapper_attributes();
 	} else {
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $width . $height ) );
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) );
 	}
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }

package/src/post-navigation-link/block.json

@@ -31,6 +31,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/post-navigation-link/edit.js

@@ -52,6 +52,7 @@ export default function PostNavigationLinkEdit( {
 			<InspectorControls>
 				<PanelBody>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display the title as a link' ) }
 						help={ __(
 							'If you have entered a custom label, it will be prepended before the title.'
@@ -65,6 +66,7 @@ export default function PostNavigationLinkEdit( {
 					/>
 					{ showTitle && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __(
 								'Include the label as part of the link'
 							) }

package/src/post-template/block.json

@@ -19,6 +19,7 @@
 		"reusable": false,
 		"html": false,
 		"align": true,
+		"anchor": true,
 		"__experimentalLayout": {
 			"allowEditing": false
 		},

package/src/post-terms/block.json

@@ -28,6 +28,7 @@
 	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-terms/index.php

@@ -87,6 +87,7 @@ function register_block_core_post_terms() {
 				'term' => $taxonomy->name,
 			),
 			'isActive'    => array( 'term' ),
+			'scope'       => array( 'inserter', 'transform' ),
 		);
 		// Set the category variation as the default one.
 		if ( 'category' === $taxonomy->name ) {

package/src/post-terms/use-post-terms.js

@@ -36,6 +36,6 @@ export default function usePostTerms( { postId, term } ) {
 				hasPostTerms: !! terms?.length,
 			};
 		},
-		[ postId, term?.visibility?.publicly_queryable ]
+		[ postId, term?.visibility?.publicly_queryable, slug ]
 	);
 }

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

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/post-time-to-read",
+	"title": "Time To Read",
+	"category": "theme",
+	"description": "Show minutes required to finish reading the post.",
+	"textdomain": "default",
+	"usesContext": [ "postId", "postType" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"multiple": false
+	}
+}

package/src/post-time-to-read/edit.js

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { _x, _n, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import {
+	AlignmentControl,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
+import { count as wordCount } from '@wordpress/wordcount';
+
+/**
+ * Average reading rate - based on average taken from
+ * https://irisreading.com/average-reading-speed-in-various-languages/
+ * (Characters/minute used for Chinese rather than words).
+ */
+const AVERAGE_READING_RATE = 189;
+
+function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
+	const { textAlign } = attributes;
+	const { postId, postType } = context;
+
+	const [ contentStructure ] = useEntityProp(
+		'postType',
+		postType,
+		'content',
+		postId
+	);
+
+	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
+		id: postId,
+	} );
+
+	const minutesToReadString = useMemo( () => {
+		// Replicates the logic found in getEditedPostContent().
+		let content;
+		if ( contentStructure instanceof Function ) {
+			content = contentStructure( { blocks } );
+		} else if ( blocks ) {
+			// If we have parsed blocks already, they should be our source of truth.
+			// Parsing applies block deprecations and legacy block conversions that
+			// unparsed content will not have.
+			content = __unstableSerializeAndClean( blocks );
+		} else {
+			content = contentStructure;
+		}
+
+		/*
+		 * translators: If your word count is based on single characters (e.g. East Asian characters),
+		 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+		 * Do not translate into your own language.
+		 */
+		const wordCountType = _x(
+			'words',
+			'Word count type. Do not translate!'
+		);
+
+		const minutesToRead = Math.max(
+			1,
+			Math.round(
+				wordCount( content, wordCountType ) / AVERAGE_READING_RATE
+			)
+		);
+
+		return sprintf(
+			/* translators: %d is the number of minutes the post will take to read. */
+			_n( '%d minute', '%d minutes', minutesToRead ),
+			minutesToRead
+		);
+	}, [ contentStructure, blocks ] );
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<p { ...blockProps }>{ minutesToReadString }</p>
+		</>
+	);
+}
+
+export default PostTimeToReadEdit;

package/src/post-time-to-read/icon.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+	>
+		<Path d="M12 3c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16.5c-4.1 0-7.5-3.4-7.5-7.5S7.9 4.5 12 4.5s7.5 3.4 7.5 7.5-3.4 7.5-7.5 7.5zM12 7l-1 5c0 .3.2.6.4.8l4.2 2.8-2.7-4.1L12 7z" />
+	</SVG>
+);

package/src/post-time-to-read/index.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import icon from './icon';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/post-time-to-read/index.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-time-to-read` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-time-to-read` block on the server.
+ *
+ * @param  array    $attributes Block attributes.
+ * @param  string   $content    Block default content.
+ * @param  WP_Block $block      Block instance.
+ * @return string Returns the rendered post author name block.
+ */
+function render_block_core_post_time_to_read( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$content = get_the_content();
+
+	/*
+	 * Average reading rate - based on average taken from
+	 * https://irisreading.com/average-reading-speed-in-various-languages/
+	 * (Characters/minute used for Chinese rather than words).
+	 */
+	$average_reading_rate = 189;
+
+	$word_count_type = wp_get_word_count_type();
+
+	$minutes_to_read = max( 1, (int) round( wp_word_count( $content, $word_count_type ) / $average_reading_rate ) );
+
+	$minutes_to_read_string = sprintf(
+		/* translators: %d is the number of minutes the post will take to read. */
+		_n( '%d minute', '%d minutes', $minutes_to_read ),
+		$minutes_to_read
+	);
+
+	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+
+	return sprintf(
+		'<p %1$s>%2$s</p>',
+		$wrapper_attributes,
+		$minutes_to_read_string
+	);
+}
+
+/**
+ * Registers the `core/post-time-to-read` block on the server.
+ */
+function register_block_core_post_time_to_read() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-time-to-read',
+		array(
+			'render_callback' => 'render_block_core_post_time_to_read',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_time_to_read' );

package/src/post-title/block.json

@@ -31,6 +31,7 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-title/edit.js

@@ -118,6 +118,7 @@ export default function PostTitleEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Make title a link' ) }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
@@ -125,6 +126,7 @@ export default function PostTitleEdit( {
 					{ isLink && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
 								onChange={ ( value ) =>
 									setAttributes( {

package/src/post-title/index.php

@@ -19,8 +19,8 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID = $block->context['postId'];
-	$title   = get_the_title();
+	$post  = get_post( $block->context['postId'] );
+	$title = get_the_title( $post );
 
 	if ( ! $title ) {
 		return '';
@@ -33,7 +33,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
-		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
+		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
 	}
 
 	$classes = array();

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

@@ -3,7 +3,7 @@
 exports[`core/more/edit/native should match snapshot when content is empty 1`] = `
 <View
   style={
-    Array [
+    [
       undefined,
       undefined,
       undefined,
@@ -12,7 +12,7 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -20,9 +20,9 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
   >
     <TextInput
       accessibilityLabel="Text input. Empty"
-      activeFormats={Array []}
+      activeFormats={[]}
       blockType={
-        Object {
+        {
           "tag": "pre",
         }
       }
@@ -39,7 +39,7 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
-      triggerKeyCodes={Array []}
+      triggerKeyCodes={[]}
       value=""
     />
   </View>
@@ -49,7 +49,7 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
 exports[`core/more/edit/native should match snapshot when content is not empty 1`] = `
 <View
   style={
-    Array [
+    [
       undefined,
       undefined,
       undefined,
@@ -58,7 +58,7 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -66,9 +66,9 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
   >
     <TextInput
       accessibilityLabel="Text input. <pre>Hello World!</pre>"
-      activeFormats={Array []}
+      activeFormats={[]}
       blockType={
-        Object {
+        {
           "tag": "pre",
         }
       }
@@ -85,7 +85,7 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
-      triggerKeyCodes={Array []}
+      triggerKeyCodes={[]}
       value="<pre>Hello World!</pre>"
     />
   </View>

package/src/query/block.json

@@ -49,6 +49,7 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
 		"html": false,
 		"__experimentalLayout": true
 	},

package/src/query/edit/inspector-controls/index.js

@@ -132,6 +132,7 @@ export default function QueryInspectorControls( {
 					<PanelBody title={ __( 'Settings' ) }>
 						{ showInheritControl && (
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Inherit query from template' ) }
 								help={ __(
 									'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'

package/src/query-no-results/block.json

@@ -9,6 +9,7 @@
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
+		"anchor": true,
 		"align": true,
 		"reusable": false,
 		"html": false,

package/src/query-pagination/block.json

@@ -18,6 +18,7 @@
 		"paginationArrow": "paginationArrow"
 	},
 	"supports": {
+		"anchor": true,
 		"align": true,
 		"reusable": false,
 		"html": false,

package/src/query-pagination-next/block.json

@@ -14,6 +14,7 @@
 	},
 	"usesContext": [ "queryId", "query", "paginationArrow" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/query-pagination-numbers/block.json

@@ -9,6 +9,7 @@
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/query-pagination-previous/block.json

@@ -14,6 +14,7 @@
 	},
 	"usesContext": [ "queryId", "query", "paginationArrow" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {