@wordpress/block-library 9.31.0 → 9.31.1-next.f56bd8138.0

package/src/accordion-header/edit.js

@@ -9,23 +9,12 @@ import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import {
 	useBlockProps,
-	__experimentalUseBorderProps as useBorderProps,
-	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
-	__experimentalGetShadowClassesAndStyles as useShadowProps,
 	BlockControls,
 	HeadingLevelDropdown,
 	RichText,
 } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import { plus } from '../accordion-content/icons';
-
-const ICONS = {
-	plus,
-};
 
 export default function Edit( { attributes, setAttributes, context } ) {
 	const { level, title, textAlign, levelOptions } = attributes;
@@ -45,14 +34,12 @@ export default function Edit( { attributes, setAttributes, context } ) {
 		}
 	}, [ iconPosition, showIcon, setAttributes ] );
 
-	const blockProps = useBlockProps();
-	const borderProps = useBorderProps( attributes );
-	const colorProps = useColorProps( attributes );
+	const blockProps = useBlockProps( {
+		className: clsx( 'accordion-content__heading', {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
 	const spacingProps = useSpacingProps( attributes );
-	const shadowProps = useShadowProps( attributes );
-
-	const Icon = ICONS.plus;
-	const shouldShowIcon = showIcon && Icon;
 
 	return (
 		<>
@@ -67,38 +54,23 @@ export default function Edit( { attributes, setAttributes, context } ) {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
-			<TagName
-				{ ...blockProps }
-				className={ clsx(
-					blockProps.className,
-					colorProps.className,
-					borderProps.className,
-					'accordion-content__heading',
-					{
-						[ `has-custom-font-size` ]: blockProps.style.fontSize,
-						[ `icon-position-left` ]: iconPosition === 'left',
-						[ `has-text-align-${ textAlign }` ]: textAlign,
-					}
-				) }
-				style={ {
-					...borderProps.style,
-					...colorProps.style,
-					...shadowProps.style,
-				} }
-			>
+			<TagName { ...blockProps }>
 				<button
 					className={ clsx( 'accordion-content__toggle' ) }
 					style={ {
 						...spacingProps.style,
 					} }
 				>
+					{ showIcon && iconPosition === 'left' && (
+						<span
+							className="accordion-content__toggle-icon"
+							aria-hidden="true"
+						>
+							+
+						</span>
+					) }
 					<RichText
-						allowedFormats={ [
-							'core/bold',
-							'core/italic',
-							'core/image',
-							'core/strikethrough',
-						] }
+						withoutInteractiveFormatting
 						disableLineBreaks
 						tagName="span"
 						value={ title }
@@ -107,21 +79,12 @@ export default function Edit( { attributes, setAttributes, context } ) {
 						}
 						placeholder={ __( 'Accordion title' ) }
 					/>
-					{ shouldShowIcon && (
+					{ showIcon && iconPosition === 'right' && (
 						<span
-							className={ clsx(
-								`accordion-content__toggle-icon`,
-								{
-									'has-icon-plus': true,
-								}
-							) }
-							style={ {
-								// TO-DO: make this configurable
-								width: `1.2em`,
-								height: `1.2em`,
-							} }
+							className="accordion-content__toggle-icon"
+							aria-hidden="true"
 						>
-							{ Icon && <Icon width="1.2em" height="1.2em" /> }
+							+
 						</span>
 					) }
 				</button>

package/src/accordion-header/save.js

@@ -7,72 +7,50 @@ import clsx from 'clsx';
  */
 import {
 	useBlockProps,
-	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
-	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
-	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	RichText,
 } from '@wordpress/block-editor';
-/**
- * Internal dependencies
- */
-import { plus } from '../accordion-content/icons';
-
-const ICONS = {
-	plus,
-};
 
 export default function save( { attributes } ) {
 	const { level, title, iconPosition, textAlign, showIcon } = attributes;
 	const TagName = 'h' + level;
 
-	const blockProps = useBlockProps.save();
-	const borderProps = getBorderClassesAndStyles( attributes );
-	const colorProps = getColorClassesAndStyles( attributes );
+	const blockProps = useBlockProps.save( {
+		className: clsx( 'accordion-content__heading', {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
-	const shadowProps = getShadowClassesAndStyles( attributes );
-
-	const Icon = ICONS.plus;
 
 	return (
-		<TagName
-			{ ...blockProps }
-			className={ clsx(
-				blockProps.className,
-				colorProps.className,
-				borderProps.className,
-				'accordion-content__heading',
-				{
-					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
-					[ `icon-position-left` ]: iconPosition === 'left',
-					[ `has-text-align-${ textAlign }` ]: textAlign,
-				}
-			) }
-			style={ {
-				...borderProps.style,
-				...colorProps.style,
-				...shadowProps.style,
-			} }
-		>
+		<TagName { ...blockProps }>
 			<button
 				className={ clsx( 'accordion-content__toggle' ) }
 				style={ {
 					...spacingProps.style,
 				} }
 			>
-				<RichText.Content tagName="span" value={ title } />
-				<span
-					className={ clsx( `accordion-content__toggle-icon`, {
-						'has-icon-plus': showIcon,
-					} ) }
-					style={ {
-						// TO-DO: make this configurable
-						width: `1.2em`,
-						height: `1.2em`,
-					} }
-				>
-					{ showIcon && <Icon width="1.2em" height="1.2em" /> }
-				</span>
+				{ showIcon && iconPosition === 'left' && (
+					<span
+						className="accordion-content__toggle-icon"
+						aria-hidden="true"
+					>
+						+
+					</span>
+				) }
+				<RichText.Content
+					className="accordion-content__toggle-title"
+					tagName="span"
+					value={ title }
+				/>
+				{ showIcon && iconPosition === 'right' && (
+					<span
+						className="accordion-content__toggle-icon"
+						aria-hidden="true"
+					>
+						+
+					</span>
+				) }
 			</button>
 		</TagName>
 	);

package/src/accordion-panel/block.json

@@ -10,12 +10,11 @@
 	"supports": {
 		"color": {
 			"background": true,
-			"gradient": true
+			"gradients": true
 		},
 		"interactivity": true,
 		"spacing": {
 			"padding": true,
-			"margin": [ "top", "bottom" ],
 			"blockGap": true,
 			"__experimentalDefaultControls": {
 				"padding": true,

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/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-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/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-time-to-read/block.json

@@ -11,6 +11,14 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"displayAsRange": {
+			"type": "boolean",
+			"default": true
+		},
+		"averageReadingSpeed": {
+			"type": "number",
+			"default": 189
 		}
 	},
 	"supports": {

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

@@ -6,27 +6,32 @@ 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, averageReadingSpeed } = attributes;
 	const { postId, postType } = context;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const [ contentStructure ] = useEntityProp(
 		'postType',
@@ -63,11 +68,31 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 			'Word count type. Do not translate!'
 		);
 
+		const totalWords = wordCount( content || '', wordCountType );
+		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'
+			);
+			return sprintf( rangeLabel, minMinutes, maxMinutes );
+		}
+
 		const minutesToRead = Math.max(
 			1,
-			Math.round(
-				wordCount( content || '', wordCountType ) / AVERAGE_READING_RATE
-			)
+			Math.round( totalWords / averageReadingSpeed )
 		);
 
 		return sprintf(
@@ -75,7 +100,7 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 			_n( '%s minute', '%s minutes', minutesToRead ),
 			minutesToRead
 		);
-	}, [ contentStructure, blocks ] );
+	}, [ contentStructure, blocks, displayAsRange, averageReadingSpeed ] );
 
 	const blockProps = useBlockProps( {
 		className: clsx( {
@@ -93,6 +118,42 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 					} }
 				/>
 			</BlockControls>
+			<InspectorControls>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							displayAsRange: true,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<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>
+				</ToolsPanel>
+			</InspectorControls>
 			<div { ...blockProps }>{ minutesToReadString }</div>
 		</>
 	);

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

@@ -18,24 +18,34 @@ 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;
+	$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;
-
-	$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: %s: the number of minutes to read the post. */
-		_n( '%s minute', '%s minutes', $minutes_to_read ),
-		$minutes_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. */
+		$minutes_to_read_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 ) );
+		$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
+		);
+	}
 
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
@@ -48,6 +58,7 @@ function render_block_core_post_time_to_read( $attributes, $content, $block ) {
 	);
 }
 
+
 /**
  * Registers the `core/post-time-to-read` block on the server.
  */
@@ -59,4 +70,5 @@ function register_block_core_post_time_to_read() {
 		)
 	);
 }
+
 add_action( 'init', 'register_block_core_post_time_to_read' );

package/src/term-description/block.json

@@ -6,6 +6,7 @@
 	"category": "theme",
 	"description": "Display the description of categories, tags and custom taxonomies when viewing an archive.",
 	"textdomain": "default",
+	"usesContext": [ "termId", "taxonomy" ],
 	"attributes": {
 		"textAlign": {
 			"type": "string"

package/src/term-description/edit.js

@@ -13,18 +13,27 @@ import {
 	AlignmentControl,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { useTermDescription } from './use-term-description';
+
 export default function TermDescriptionEdit( {
 	attributes,
 	setAttributes,
 	mergedStyle,
+	context: { termId, taxonomy },
 } ) {
 	const { textAlign } = attributes;
+	const { termDescription } = useTermDescription( termId, taxonomy );
+
 	const blockProps = useBlockProps( {
 		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style: mergedStyle,
 	} );
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -36,9 +45,15 @@ export default function TermDescriptionEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				<div className="wp-block-term-description__placeholder">
-					<span>{ __( 'Term Description' ) }</span>
-				</div>
+				{ termDescription ? (
+					<div
+						dangerouslySetInnerHTML={ { __html: termDescription } }
+					/>
+				) : (
+					<div className="wp-block-term-description__placeholder">
+						<span>{ __( 'Term Description' ) }</span>
+					</div>
+				) }
 			</div>
 		</>
 	);