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

package/src/navigation-link/shared/test/controls.js

@@ -0,0 +1,210 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Controls } from '../controls';
+
+// Mock the updateAttributes function
+let mockUpdateAttributes;
+jest.mock( '../../update-attributes', () => ( {
+	updateAttributes: ( ...args ) => mockUpdateAttributes( ...args ),
+} ) );
+
+// Mock the useToolsPanelDropdownMenuProps hook
+jest.mock( '../../../utils/hooks', () => ( {
+	useToolsPanelDropdownMenuProps: () => ( {} ),
+} ) );
+
+describe( 'Controls', () => {
+	// Initialize the mock function
+	beforeAll( () => {
+		mockUpdateAttributes = jest.fn();
+	} );
+
+	const defaultProps = {
+		attributes: {
+			label: 'Test Link',
+			url: 'https://example.com',
+			description: 'Test description',
+			rel: 'nofollow',
+			opensInNewTab: false,
+		},
+		setAttributes: jest.fn(),
+		setIsEditingControl: jest.fn(),
+	};
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+		mockUpdateAttributes.mockClear();
+	} );
+
+	it( 'renders all form controls', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		expect( screen.getByLabelText( 'Text' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Link' ) ).toBeInTheDocument();
+		expect(
+			screen.getByLabelText( 'Open in new tab' )
+		).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Description' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Rel attribute' ) ).toBeInTheDocument();
+	} );
+
+	it( 'strips HTML from label values', () => {
+		const propsWithHtml = {
+			...defaultProps,
+			attributes: {
+				...defaultProps.attributes,
+				label: '<strong>Bold Text</strong>',
+			},
+		};
+		render( <Controls { ...propsWithHtml } /> );
+
+		const textInput = screen.getByLabelText( 'Text' );
+		expect( textInput.value ).toBe( 'Bold Text' );
+	} );
+
+	it( 'decodes URL values for display', () => {
+		const propsWithEncodedUrl = {
+			...defaultProps,
+			attributes: {
+				...defaultProps.attributes,
+				url: 'https://example.com/test%20page',
+			},
+		};
+		render( <Controls { ...propsWithEncodedUrl } /> );
+
+		const urlInput = screen.getByLabelText( 'Link' );
+		expect( urlInput.value ).toBe( 'https://example.com/test page' );
+	} );
+
+	it( 'encodes URL values when changed', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		const urlInput = screen.getByLabelText( 'Link' );
+
+		fireEvent.change( urlInput, {
+			target: { value: 'https://example.com/test page' },
+		} );
+
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			url: 'https://example.com/test%20page',
+		} );
+	} );
+
+	it( 'calls updateAttributes on URL blur', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		const urlInput = screen.getByLabelText( 'Link' );
+
+		fireEvent.focus( urlInput );
+		fireEvent.blur( urlInput );
+
+		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
+			{ url: 'https://example.com' },
+			defaultProps.setAttributes,
+			{ ...defaultProps.attributes, url: 'https://example.com' }
+		);
+	} );
+
+	it( 'stores last URL value on focus and uses it in updateAttributes', () => {
+		const propsWithDifferentUrl = {
+			...defaultProps,
+			attributes: {
+				...defaultProps.attributes,
+				url: 'https://different.com',
+			},
+		};
+		render( <Controls { ...propsWithDifferentUrl } /> );
+
+		const urlInput = screen.getByLabelText( 'Link' );
+
+		fireEvent.focus( urlInput );
+
+		// Change the URL
+		fireEvent.change( urlInput, {
+			target: { value: 'https://new.com' },
+		} );
+
+		// Blur should call updateAttributes with the current URL (since url exists)
+		fireEvent.blur( urlInput );
+
+		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
+			{ url: 'https://different.com' }, // Current URL from attributes (not input value)
+			defaultProps.setAttributes,
+			{
+				...propsWithDifferentUrl.attributes,
+				url: 'https://different.com',
+			} // lastURLRef.current
+		);
+	} );
+
+	it( 'calls setIsEditingControl on focus and blur for all inputs', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		const textInput = screen.getByLabelText( 'Text' );
+		const urlInput = screen.getByLabelText( 'Link' );
+
+		// Test text input
+		fireEvent.focus( textInput );
+		expect( defaultProps.setIsEditingControl ).toHaveBeenCalledWith( true );
+
+		fireEvent.blur( textInput );
+		expect( defaultProps.setIsEditingControl ).toHaveBeenCalledWith(
+			false
+		);
+
+		// Test URL input
+		fireEvent.focus( urlInput );
+		expect( defaultProps.setIsEditingControl ).toHaveBeenCalledWith( true );
+
+		fireEvent.blur( urlInput );
+		expect( defaultProps.setIsEditingControl ).toHaveBeenCalledWith(
+			false
+		);
+	} );
+
+	it( 'handles all form field changes correctly', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		// Test text change
+		const textInput = screen.getByLabelText( 'Text' );
+		fireEvent.change( textInput, { target: { value: 'New Label' } } );
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			label: 'New Label',
+		} );
+
+		// Test description change
+		const descriptionInput = screen.getByLabelText( 'Description' );
+		fireEvent.change( descriptionInput, {
+			target: { value: 'New Description' },
+		} );
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			description: 'New Description',
+		} );
+
+		// Test rel change
+		const relInput = screen.getByLabelText( 'Rel attribute' );
+		fireEvent.change( relInput, {
+			target: { value: 'nofollow noopener' },
+		} );
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			rel: 'nofollow noopener',
+		} );
+
+		// Test checkbox change
+		const checkbox = screen.getByLabelText( 'Open in new tab' );
+		fireEvent.click( checkbox );
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			opensInNewTab: true,
+		} );
+	} );
+} );

package/src/navigation-submenu/edit.js

@@ -7,15 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	CheckboxControl,
-	TextControl,
-	TextareaControl,
-	ToolbarButton,
-	ToolbarGroup,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import {
@@ -41,11 +33,12 @@ import { useMergeRefs, usePrevious } from '@wordpress/compose';
 import { ItemSubmenuIcon } from './icons';
 import { LinkUI } from '../navigation-link/link-ui';
 import { updateAttributes } from '../navigation-link/update-attributes';
+import { Controls } from '../navigation-link/shared';
 import {
 	getColors,
 	getNavigationChildBlockProps,
 } from '../navigation/edit/utils';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { DEFAULT_BLOCK } from '../navigation/constants';
 
 const ALLOWED_BLOCKS = [
 	'core/navigation-link',
@@ -53,10 +46,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.
  *
@@ -135,7 +124,7 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, url, description, rel, opensInNewTab } = attributes;
+	const { label, url, description } = attributes;
 
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 
@@ -154,7 +143,6 @@ export default function NavigationSubmenuEdit( {
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add text…' );
 	const ref = useRef();
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const {
 		parentCount,
@@ -383,120 +371,11 @@ export default function NavigationSubmenuEdit( {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
-			{ /* Warning, this duplicated in packages/block-library/src/navigation-link/edit.js */ }
 			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () => {
-						setAttributes( {
-							label: '',
-							url: '',
-							description: '',
-							rel: '',
-							opensInNewTab: false,
-						} );
-					} }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					<ToolsPanelItem
-						label={ __( 'Text' ) }
-						isShownByDefault
-						hasValue={ () => !! label }
-						onDeselect={ () => setAttributes( { label: '' } ) }
-					>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							value={ label || '' }
-							onChange={ ( labelValue ) => {
-								setAttributes( { label: labelValue } );
-							} }
-							label={ __( 'Text' ) }
-							autoComplete="off"
-						/>
-					</ToolsPanelItem>
-
-					<ToolsPanelItem
-						label={ __( 'Link' ) }
-						isShownByDefault
-						hasValue={ () => !! url }
-						onDeselect={ () => setAttributes( { url: '' } ) }
-					>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							value={ url || '' }
-							onChange={ ( urlValue ) => {
-								setAttributes( { url: urlValue } );
-							} }
-							label={ __( 'Link' ) }
-							autoComplete="off"
-							type="url"
-						/>
-					</ToolsPanelItem>
-
-					<ToolsPanelItem
-						hasValue={ () => !! opensInNewTab }
-						label={ __( 'Open in new tab' ) }
-						onDeselect={ () =>
-							setAttributes( { opensInNewTab: false } )
-						}
-						isShownByDefault
-					>
-						<CheckboxControl
-							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
-							checked={ opensInNewTab }
-							onChange={ ( value ) =>
-								setAttributes( { opensInNewTab: value } )
-							}
-						/>
-					</ToolsPanelItem>
-
-					<ToolsPanelItem
-						label={ __( 'Description' ) }
-						isShownByDefault
-						hasValue={ () => !! description }
-						onDeselect={ () =>
-							setAttributes( { description: '' } )
-						}
-					>
-						<TextareaControl
-							__nextHasNoMarginBottom
-							value={ description || '' }
-							onChange={ ( descriptionValue ) => {
-								setAttributes( {
-									description: descriptionValue,
-								} );
-							} }
-							label={ __( 'Description' ) }
-							help={ __(
-								'The description will be displayed in the menu if the current theme supports it.'
-							) }
-						/>
-					</ToolsPanelItem>
-
-					<ToolsPanelItem
-						label={ __( 'Rel attribute' ) }
-						isShownByDefault
-						hasValue={ () => !! rel }
-						onDeselect={ () => setAttributes( { rel: '' } ) }
-					>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							value={ rel || '' }
-							onChange={ ( relValue ) => {
-								setAttributes( { rel: relValue } );
-							} }
-							label={ __( 'Rel attribute' ) }
-							autoComplete="off"
-							help={ __(
-								'The relationship of the linked URL as space-separated link types.'
-							) }
-						/>
-					</ToolsPanelItem>
-				</ToolsPanel>
+				<Controls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }

package/src/pattern/block.json

@@ -9,6 +9,7 @@
 		"html": false,
 		"inserter": false,
 		"renaming": false,
+		"blockVisibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

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,7 +5,7 @@
 	"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": {
@@ -16,6 +16,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"displayMode": {
+			"type": "string",
+			"default": "time"
+		},
 		"averageReadingSpeed": {
 			"type": "number",
 			"default": 189

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

@@ -29,7 +29,9 @@ import { count as wordCount } from '@wordpress/wordcount';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
-	const { textAlign, displayAsRange, averageReadingSpeed } = attributes;
+	const { textAlign, displayAsRange, displayMode, averageReadingSpeed } =
+		attributes;
+
 	const { postId, postType } = context;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
@@ -44,7 +46,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 ) {
@@ -69,38 +71,62 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 		);
 
 		const totalWords = wordCount( content || '', wordCountType );
-		if ( displayAsRange ) {
-			let maxMinutes = Math.max(
-				1,
-				Math.round( ( totalWords / averageReadingSpeed ) * 1.2 )
-			);
-			const minMinutes = Math.max(
+
+		// Add "time to read" part, if enabled.
+		if ( displayMode === 'time' ) {
+			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( ( totalWords / averageReadingSpeed ) * 0.8 )
+				Math.round( totalWords / averageReadingSpeed )
 			);
 
-			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(
+				/* translators: %s: the number of minutes to read the post. */
+				_n( '%s minute', '%s minutes', minutesToRead ),
+				minutesToRead
 			);
-			return sprintf( rangeLabel, minMinutes, maxMinutes );
 		}
 
-		const minutesToRead = Math.max(
-			1,
-			Math.round( totalWords / averageReadingSpeed )
-		);
-
-		return sprintf(
-			/* translators: %s: the number of minutes to read the post. */
-			_n( '%s minute', '%s minutes', minutesToRead ),
-			minutesToRead
-		);
-	}, [ contentStructure, blocks, displayAsRange, averageReadingSpeed ] );
+		// Add "word count" part, if enabled.
+		if ( displayMode === 'words' ) {
+			return wordCountType === 'words'
+				? sprintf(
+						/* translators: %s: the number of words in the post. */
+						_n( '%s word', '%s words', totalWords ),
+						totalWords.toLocaleString()
+				  )
+				: sprintf(
+						/* translators: %s: the number of characters in the post. */
+						_n( '%s character', '%s characters', totalWords ),
+						totalWords.toLocaleString()
+				  );
+		}
+	}, [
+		contentStructure,
+		blocks,
+		displayAsRange,
+		displayMode,
+		averageReadingSpeed,
+	] );
 
 	const blockProps = useBlockProps( {
 		className: clsx( {
@@ -118,43 +144,45 @@ 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={ () => {
+			{ displayMode === 'time' && (
+				<InspectorControls>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
 							setAttributes( {
 								displayAsRange: true,
 							} );
 						} }
+						dropdownMenuProps={ dropdownMenuProps }
 					>
-						<ToggleControl
-							__nextHasNoMarginBottom
-							label={ __( 'Display as range' ) }
-							checked={ !! displayAsRange }
-							onChange={ () =>
+						<ToolsPanelItem
+							isShownByDefault
+							label={ _x(
+								'Display as range',
+								'Turns reading time range display on or off'
+							) }
+							hasValue={ () => ! displayAsRange }
+							onDeselect={ () => {
 								setAttributes( {
-									displayAsRange: ! displayAsRange,
-								} )
-							}
-						/>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			</InspectorControls>
-			<div { ...blockProps }>{ minutesToReadString }</div>
+									displayAsRange: true,
+								} );
+							} }
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Display as range' ) }
+								checked={ !! displayAsRange }
+								onChange={ () =>
+									setAttributes( {
+										displayAsRange: ! displayAsRange,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				</InspectorControls>
+			) }
+			<div { ...blockProps }>{ displayString }</div>
 		</>
 	);
 }

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

@@ -5,6 +5,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import icon from './icon';
+import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
@@ -12,6 +13,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	variations,
 	example: {},
 };