@wordpress/block-library 9.30.1-next.a730c9c8c.0 → 9.31.1-next.233ccab9b.0

package/src/avatar/hooks.js

@@ -1,11 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { useDefaultAvatar } from '../utils/hooks';
+
 function getAvatarSizes( sizes ) {
 	const minSize = sizes ? sizes[ 0 ] : 24;
 	const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96;
@@ -16,15 +20,6 @@ function getAvatarSizes( sizes ) {
 	};
 }
 
-function useDefaultAvatar() {
-	const { avatarURL: defaultAvatarUrl } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const { __experimentalDiscussionSettings } = getSettings();
-		return __experimentalDiscussionSettings;
-	} );
-	return defaultAvatarUrl;
-}
-
 export function useCommentAvatar( { commentId } ) {
 	const [ avatars ] = useEntityProp(
 		'root',

package/src/comments/index.php

@@ -28,11 +28,11 @@
 function render_block_core_comments( $attributes, $content, $block ) {
 	global $post;
 
-	$post_id = $block->context['postId'];
-	if ( ! isset( $post_id ) ) {
+	if ( ! isset( $block->context['postId'] ) ) {
 		return '';
 	}
 
+	$post_id = $block->context['postId'];
 	// Return early if there are no comments and comments are closed.
 	if ( ! comments_open( $post_id ) && (int) get_comments_number( $post_id ) === 0 ) {
 		return '';

package/src/group/variations.js

@@ -53,11 +53,6 @@ const variations = [
 		attributes: { layout: { type: 'constrained' } },
 		isDefault: true,
 		scope: [ 'block', 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) =>
-			! blockAttributes.layout ||
-			! blockAttributes.layout?.type ||
-			blockAttributes.layout?.type === 'default' ||
-			blockAttributes.layout?.type === 'constrained',
 		icon: group,
 	},
 	{
@@ -66,10 +61,7 @@ const variations = [
 		description: __( 'Arrange blocks horizontally.' ),
 		attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },
 		scope: [ 'block', 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) =>
-			blockAttributes.layout?.type === 'flex' &&
-			( ! blockAttributes.layout?.orientation ||
-				blockAttributes.layout?.orientation === 'horizontal' ),
+		isActive: [ 'layout.type' ],
 		icon: row,
 		example,
 	},
@@ -79,9 +71,7 @@ const variations = [
 		description: __( 'Arrange blocks vertically.' ),
 		attributes: { layout: { type: 'flex', orientation: 'vertical' } },
 		scope: [ 'block', 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) =>
-			blockAttributes.layout?.type === 'flex' &&
-			blockAttributes.layout?.orientation === 'vertical',
+		isActive: [ 'layout.type', 'layout.orientation' ],
 		icon: stack,
 		example,
 	},
@@ -91,8 +81,7 @@ const variations = [
 		description: __( 'Arrange blocks in a grid.' ),
 		attributes: { layout: { type: 'grid' } },
 		scope: [ 'block', 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) =>
-			blockAttributes.layout?.type === 'grid',
+		isActive: [ 'layout.type' ],
 		icon: grid,
 		example,
 	},

package/src/navigation/block.json

@@ -138,7 +138,8 @@
 			}
 		},
 		"interactivity": true,
-		"renaming": false
+		"renaming": false,
+		"contentRole": true
 	},
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"

package/src/navigation/edit/leaf-more-menu.js

@@ -13,6 +13,11 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_BLOCK } from '../constants';
+
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	placement: 'bottom-start',
@@ -43,7 +48,10 @@ function AddSubmenuItem( {
 			disabled={ isDisabled }
 			onClick={ () => {
 				const updateSelectionOnInsert = false;
-				const newLink = createBlock( 'core/navigation-link' );
+				const newLink = createBlock(
+					DEFAULT_BLOCK.name,
+					DEFAULT_BLOCK.attributes
+				);
 
 				if ( block.name === 'core/navigation-submenu' ) {
 					insertBlock(

package/src/navigation/index.php

@@ -478,10 +478,10 @@ class WP_Navigation_Block_Renderer {
 		);
 
 		$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
-		$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
+		$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7.5h16v1.5H4z"></path><path d="M4 15h16v1.5H4z"></path></svg>';
 		if ( isset( $attributes['icon'] ) ) {
 			if ( 'menu' === $attributes['icon'] ) {
-				$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" /></svg>';
+				$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5z"></path><path d="M5 12.8h14v-1.5H5v1.5z"></path><path d="M5 19h14v-1.5H5V19z"></path></svg>';
 			}
 		}
 		$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );

package/src/navigation-link/block.json

@@ -14,7 +14,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"label": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"type": {
 			"type": "string"

package/src/navigation-submenu/block.json

@@ -9,7 +9,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"label": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"type": {
 			"type": "string"

package/src/navigation-submenu/edit.js

@@ -46,6 +46,7 @@ import {
 	getNavigationChildBlockProps,
 } from '../navigation/edit/utils';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { DEFAULT_BLOCK } from '../navigation/constants';
 
 const ALLOWED_BLOCKS = [
 	'core/navigation-link',
@@ -53,10 +54,6 @@ const ALLOWED_BLOCKS = [
 	'core/page-list',
 ];
 
-const DEFAULT_BLOCK = {
-	name: 'core/navigation-link',
-};
-
 /**
  * A React hook to determine if it's dragging within the target element.
  *

package/src/page-list/block.json

@@ -76,7 +76,8 @@
 				"padding": false,
 				"margin": false
 			}
-		}
+		},
+		"contentRole": true
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"

package/src/post-author/edit.js

@@ -21,16 +21,19 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo, useState } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
-import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import {
+	useDefaultAvatar,
+	useToolsPanelDropdownMenuProps,
+} from '../utils/hooks';
 
 const AUTHORS_QUERY = {
 	who: 'authors',
@@ -115,6 +118,7 @@ function PostAuthorEdit( {
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const defaultAvatar = useDefaultAvatar();
 
 	const { authorDetails, canAssignAuthor, supportsAuthor } = useSelect(
 		( select ) => {
@@ -323,12 +327,17 @@ function PostAuthorEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				{ showAvatar && authorDetails?.avatar_urls && (
+				{ showAvatar && (
 					<div className="wp-block-post-author__avatar">
 						<img
 							width={ avatarSize }
-							src={ authorDetails.avatar_urls[ avatarSize ] }
-							alt={ authorDetails.name }
+							src={
+								authorDetails?.avatar_urls?.[ avatarSize ] ||
+								defaultAvatar
+							}
+							alt={
+								authorDetails?.name || __( 'Default Avatar' )
+							}
 						/>
 					</div>
 				) }

package/src/post-date/edit.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useEffect, useMemo, useState } from '@wordpress/element';
 import {
 	dateI18n,
@@ -81,22 +81,22 @@ export default function PostDateEdit( {
 
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const dateSettings = getDateSettings();
-	const [ siteFormat = dateSettings.formats.date ] = useEntityProp(
-		'root',
-		'site',
-		'date_format'
-	);
-	const [ siteTimeFormat = dateSettings.formats.time ] = useEntityProp(
-		'root',
-		'site',
-		'time_format'
-	);
 
-	const postType = useSelect(
-		( select ) =>
-			postTypeSlug
-				? select( coreStore ).getPostType( postTypeSlug )
-				: null,
+	const {
+		postType,
+		siteFormat = dateSettings.formats.date,
+		siteTimeFormat = dateSettings.formats.time,
+	} = useSelect(
+		( select ) => {
+			const { getPostType, getEntityRecord } = select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+
+			return {
+				siteFormat: siteSettings?.date_format,
+				siteTimeFormat: siteSettings?.time_format,
+				postType: postTypeSlug ? getPostType( postTypeSlug ) : null,
+			};
+		},
 		[ postTypeSlug ]
 	);
 

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

@@ -5,12 +5,28 @@
 	"name": "core/post-time-to-read",
 	"title": "Time to Read",
 	"category": "theme",
-	"description": "Show minutes required to finish reading the post.",
+	"description": "Show minutes required to finish reading the post. Can also show a word count.",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"displayAsRange": {
+			"type": "boolean",
+			"default": true
+		},
+		"showTimeToRead": {
+			"type": "boolean",
+			"default": true
+		},
+		"showWordCount": {
+			"type": "boolean",
+			"default": false
+		},
+		"averageReadingSpeed": {
+			"type": "number",
+			"default": 189
 		}
 	},
 	"supports": {

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

@@ -6,27 +6,39 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { _x, _n, sprintf } from '@wordpress/i18n';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import {
 	AlignmentControl,
 	BlockControls,
+	InspectorControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 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).
+ * Internal dependencies
  */
-const AVERAGE_READING_RATE = 189;
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
-	const { textAlign } = attributes;
+	const {
+		textAlign,
+		displayAsRange,
+		showTimeToRead,
+		showWordCount,
+		averageReadingSpeed,
+	} = attributes;
+
 	const { postId, postType } = context;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const [ contentStructure ] = useEntityProp(
 		'postType',
@@ -39,7 +51,7 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 		id: postId,
 	} );
 
-	const minutesToReadString = useMemo( () => {
+	const displayString = useMemo( () => {
 		// Replicates the logic found in getEditedPostContent().
 		let content;
 		if ( contentStructure instanceof Function ) {
@@ -63,19 +75,74 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 			'Word count type. Do not translate!'
 		);
 
-		const minutesToRead = Math.max(
-			1,
-			Math.round(
-				wordCount( content || '', wordCountType ) / AVERAGE_READING_RATE
-			)
-		);
+		const totalWords = wordCount( content || '', wordCountType );
 
-		return sprintf(
-			/* translators: %s: the number of minutes to read the post. */
-			_n( '%s minute', '%s minutes', minutesToRead ),
-			minutesToRead
-		);
-	}, [ contentStructure, blocks ] );
+		const parts = [];
+
+		// Add "time to read" part, if enabled.
+		if ( showTimeToRead ) {
+			let timeString;
+			if ( displayAsRange ) {
+				let maxMinutes = Math.max(
+					1,
+					Math.round( ( totalWords / averageReadingSpeed ) * 1.2 )
+				);
+				const minMinutes = Math.max(
+					1,
+					Math.round( ( totalWords / averageReadingSpeed ) * 0.8 )
+				);
+
+				if ( minMinutes === maxMinutes ) {
+					maxMinutes = maxMinutes + 1;
+				}
+				// translators: %1$s: minimum minutes, %2$s: maximum minutes to read the post.
+				const rangeLabel = _x(
+					'%1$s–%2$s minutes',
+					'Range of minutes to read'
+				);
+				timeString = sprintf( rangeLabel, minMinutes, maxMinutes );
+			} else {
+				const minutesToRead = Math.max(
+					1,
+					Math.round( totalWords / averageReadingSpeed )
+				);
+
+				timeString = sprintf(
+					/* translators: %s: the number of minutes to read the post. */
+					_n( '%s minute', '%s minutes', minutesToRead ),
+					minutesToRead
+				);
+			}
+			parts.push( timeString );
+		}
+
+		// Add "word count" part, if enabled.
+		if ( showWordCount ) {
+			const wordCountString = sprintf(
+				/* translators: %s: the number of words in the post. */
+				_n( '%s word', '%s words', totalWords ),
+				totalWords.toLocaleString()
+			);
+			parts.push( wordCountString );
+		}
+
+		if ( parts.length === 1 ) {
+			return parts[ 0 ];
+		}
+		return parts.map( ( part, index ) => (
+			<span key={ index }>
+				{ part }
+				{ index < parts.length - 1 && <br /> }
+			</span>
+		) );
+	}, [
+		contentStructure,
+		blocks,
+		displayAsRange,
+		showTimeToRead,
+		showWordCount,
+		averageReadingSpeed,
+	] );
 
 	const blockProps = useBlockProps( {
 		className: clsx( {
@@ -93,7 +160,87 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 					} }
 				/>
 			</BlockControls>
-			<div { ...blockProps }>{ minutesToReadString }</div>
+			<InspectorControls>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							displayAsRange: true,
+							showTimeToRead: true,
+							showWordCount: false,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Show time to read' ) }
+						hasValue={ () => ! showTimeToRead }
+						onDeselect={ () => {
+							setAttributes( {
+								showTimeToRead: true,
+							} );
+						} }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show time to read' ) }
+							checked={ !! showTimeToRead }
+							onChange={ () =>
+								setAttributes( {
+									showTimeToRead: ! showTimeToRead,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+					{ showTimeToRead && (
+						<ToolsPanelItem
+							isShownByDefault
+							label={ _x(
+								'Display as range',
+								'Turns reading time range display on or off'
+							) }
+							hasValue={ () => ! displayAsRange }
+							onDeselect={ () => {
+								setAttributes( {
+									displayAsRange: true,
+								} );
+							} }
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Display as range' ) }
+								checked={ !! displayAsRange }
+								onChange={ () =>
+									setAttributes( {
+										displayAsRange: ! displayAsRange,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
+					) }
+					<ToolsPanelItem
+						label={ __( 'Show word count' ) }
+						hasValue={ () => !! showWordCount }
+						onDeselect={ () => {
+							setAttributes( {
+								showWordCount: false,
+							} );
+						} }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show word count' ) }
+							checked={ !! showWordCount }
+							onChange={ () =>
+								setAttributes( {
+									showWordCount: ! showWordCount,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</InspectorControls>
+			<div { ...blockProps }>{ displayString }</div>
 		</>
 	);
 }

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

@@ -18,24 +18,54 @@ function render_block_core_post_time_to_read( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$content = get_the_content();
+	$content              = get_the_content();
+	$average_reading_rate = isset( $attributes['averageReadingSpeed'] ) ? $attributes['averageReadingSpeed'] : 189;
+	$show_time_to_read    = isset( $attributes['showTimeToRead'] ) ? $attributes['showTimeToRead'] : true;
+	$show_word_count      = isset( $attributes['showWordCount'] ) ? $attributes['showWordCount'] : false;
+	$word_count_type      = wp_get_word_count_type();
+	$total_words          = wp_word_count( $content, $word_count_type );
 
-	/*
-	 * 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;
+	$parts = array();
 
-	$word_count_type = wp_get_word_count_type();
+	// Add "time to read" part, if enabled.
+	if ( $show_time_to_read ) {
+		if ( ! empty( $attributes['displayAsRange'] ) ) {
+			// Calculate faster reading rate with 20% speed = lower minutes,
+			// and slower reading rate with 20% speed = higher minutes.
+			$min_minutes = max( 1, (int) round( $total_words / $average_reading_rate * 0.8 ) );
+			$max_minutes = max( 1, (int) round( $total_words / $average_reading_rate * 1.2 ) );
+			if ( $min_minutes === $max_minutes ) {
+				$max_minutes = $min_minutes + 1;
+			}
+			/* translators: 1: minimum minutes, 2: maximum minutes to read the post. */
+			$time_string = sprintf(
+				/* translators: 1: minimum minutes, 2: maximum minutes to read the post. */
+				_x( '%1$s–%2$s minutes', 'Range of minutes to read' ),
+				$min_minutes,
+				$max_minutes
+			);
+		} else {
+			$minutes_to_read = max( 1, (int) round( $total_words / $average_reading_rate ) );
+			$time_string     = sprintf(
+				/* translators: %s: the number of minutes to read the post. */
+				_n( '%s minute', '%s minutes', $minutes_to_read ),
+				$minutes_to_read
+			);
+		}
+		$parts[] = $time_string;
+	}
 
-	$minutes_to_read = max( 1, (int) round( wp_word_count( $content, $word_count_type ) / $average_reading_rate ) );
+	// Add "word count" part, if enabled.
+	if ( $show_word_count ) {
+		$word_count_string = sprintf(
+			/* translators: %s: the number of words in the post. */
+			_n( '%s word', '%s words', $total_words ),
+			number_format_i18n( $total_words )
+		);
+		$parts[] = $word_count_string;
+	}
 
-	$minutes_to_read_string = sprintf(
-		/* translators: %s: the number of minutes to read the post. */
-		_n( '%s minute', '%s minutes', $minutes_to_read ),
-		$minutes_to_read
-	);
+	$display_string = implode( '<br>', $parts );
 
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
@@ -44,10 +74,11 @@ function render_block_core_post_time_to_read( $attributes, $content, $block ) {
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
-		$minutes_to_read_string
+		$display_string
 	);
 }
 
+
 /**
  * Registers the `core/post-time-to-read` block on the server.
  */
@@ -59,4 +90,5 @@ function register_block_core_post_time_to_read() {
 		)
 	);
 }
+
 add_action( 'init', 'register_block_core_post_time_to_read' );

package/src/social-link/index.php

@@ -374,11 +374,11 @@ function block_core_social_link_get_color_styles( $context ) {
 	$styles = array();
 
 	if ( array_key_exists( 'iconColorValue', $context ) ) {
-		$styles[] = 'color: ' . $context['iconColorValue'] . '; ';
+		$styles[] = 'color:' . $context['iconColorValue'] . ';';
 	}
 
 	if ( array_key_exists( 'iconBackgroundColorValue', $context ) ) {
-		$styles[] = 'background-color: ' . $context['iconBackgroundColorValue'] . '; ';
+		$styles[] = 'background-color:' . $context['iconBackgroundColorValue'] . ';';
 	}
 
 	return implode( '', $styles );

package/src/style.scss

@@ -1,4 +1,6 @@
-@import "./accordion/style.scss";
+@import "./accordion-content/style.scss";
+@import "./accordion-header/style.scss";
+@import "./accordion-panel/style.scss";
 @import "./archives/style.scss";
 @import "./avatar/style.scss";
 @import "./audio/style.scss";

package/src/table-of-contents/block.json

@@ -29,6 +29,7 @@
 		}
 	},
 	"supports": {
+		"ariaLabel": true,
 		"html": false,
 		"color": {
 			"text": true,