@wordpress/block-library 9.27.0 → 9.28.0

package/src/list-item/edit.js

@@ -18,6 +18,7 @@ import {
 } from '@wordpress/icons';
 import { useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -53,6 +54,7 @@ export function IndentUI( { clientId } ) {
 			<ToolbarButton
 				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
 				title={ __( 'Outdent' ) }
+				shortcut={ displayShortcut.shift( 'Tab' ) }
 				description={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
 				onClick={ () => outdentListItem() }
@@ -60,6 +62,7 @@ export function IndentUI( { clientId } ) {
 			<ToolbarButton
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
+				shortcut="Tab"
 				description={ __( 'Indent list item' ) }
 				disabled={ ! canIndent }
 				onClick={ () => indentListItem() }

package/src/loginout/index.php

@@ -23,14 +23,16 @@ function render_block_core_loginout( $attributes ) {
 	 */
 	$current_url = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
 
-	$classes  = is_user_logged_in() ? 'logged-in' : 'logged-out';
+	$user_logged_in = is_user_logged_in();
+
+	$classes  = $user_logged_in ? 'logged-in' : 'logged-out';
 	$contents = wp_loginout(
 		isset( $attributes['redirectToCurrent'] ) && $attributes['redirectToCurrent'] ? $current_url : '',
 		false
 	);
 
 	// If logged-out and displayLoginAsForm is true, show the login form.
-	if ( ! is_user_logged_in() && ! empty( $attributes['displayLoginAsForm'] ) ) {
+	if ( ! $user_logged_in && ! empty( $attributes['displayLoginAsForm'] ) ) {
 		// Add a class.
 		$classes .= ' has-login-form';
 

package/src/media-text/edit.js

@@ -199,9 +199,14 @@ function MediaTextEdit( {
 			return {
 				featuredImageMedia:
 					featuredImage && useFeaturedImage
-						? select( coreStore ).getMedia( featuredImage, {
-								context: 'view',
-						  } )
+						? select( coreStore ).getEntityRecord(
+								'postType',
+								'attachment',
+								featuredImage,
+								{
+									context: 'view',
+								}
+						  )
 						: undefined,
 			};
 		},
@@ -213,9 +218,14 @@ function MediaTextEdit( {
 			return {
 				image:
 					mediaId && isSelected
-						? select( coreStore ).getMedia( mediaId, {
-								context: 'view',
-						  } )
+						? select( coreStore ).getEntityRecord(
+								'postType',
+								'attachment',
+								mediaId,
+								{
+									context: 'view',
+								}
+						  )
 						: null,
 			};
 		},

package/src/more/edit.js

@@ -7,9 +7,13 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
 } from '@wordpress/components';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { ENTER } from '@wordpress/keycodes';
+import {
+	InspectorControls,
+	PlainText,
+	useBlockProps,
+} from '@wordpress/block-editor';
 import { getDefaultBlockName, createBlock } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -22,29 +26,6 @@ export default function MoreEdit( {
 	insertBlocksAfter,
 	setAttributes,
 } ) {
-	const onChangeInput = ( event ) => {
-		setAttributes( {
-			customText: event.target.value,
-		} );
-	};
-
-	const onKeyDown = ( { keyCode } ) => {
-		if ( keyCode === ENTER ) {
-			insertBlocksAfter( [ createBlock( getDefaultBlockName() ) ] );
-		}
-	};
-
-	const getHideExcerptHelp = ( checked ) =>
-		checked
-			? __( 'The excerpt is hidden.' )
-			: __( 'The excerpt is visible.' );
-
-	const toggleHideExcerpt = () => setAttributes( { noTeaser: ! noTeaser } );
-
-	const style = {
-		width: `${ ( customText ? customText : DEFAULT_TEXT ).length + 1.2 }em`,
-	};
-
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
@@ -73,21 +54,34 @@ export default function MoreEdit( {
 								'Hide the excerpt on the full content page'
 							) }
 							checked={ !! noTeaser }
-							onChange={ toggleHideExcerpt }
-							help={ getHideExcerptHelp }
+							onChange={ () =>
+								setAttributes( { noTeaser: ! noTeaser } )
+							}
+							help={ ( checked ) =>
+								checked
+									? __( 'The excerpt is hidden.' )
+									: __( 'The excerpt is visible.' )
+							}
 						/>
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
 			<div { ...useBlockProps() }>
-				<input
-					aria-label={ __( '“Read more” link text' ) }
-					type="text"
+				<PlainText
+					__experimentalVersion={ 2 }
+					tagName="span"
+					aria-label={ __( '"Read more" text' ) }
 					value={ customText }
 					placeholder={ DEFAULT_TEXT }
-					onChange={ onChangeInput }
-					onKeyDown={ onKeyDown }
-					style={ style }
+					onChange={ ( value ) =>
+						setAttributes( { customText: value } )
+					}
+					disableLineBreaks
+					__unstableOnSplitAtEnd={ () =>
+						insertBlocksAfter(
+							createBlock( getDefaultBlockName() )
+						)
+					}
 				/>
 			</div>
 		</>

package/src/more/editor.scss

@@ -11,27 +11,18 @@
 	white-space: nowrap;
 
 	// Label
-	input[type="text"] {
+	.rich-text {
 		position: relative;
 		font-size: $default-font-size;
 		text-transform: uppercase;
 		font-weight: 600;
 		font-family: $default-font;
 		color: $gray-700;
-		border: none;
-		box-shadow: none;
+		display: inline-flex;
 		white-space: nowrap;
 		text-align: center;
-		margin: 0;
-		border-radius: 4px;
 		background: $white;
-		padding: 6px 8px;
-		height: $button-size-small;
-		max-width: 100%;
-
-		&:focus {
-			box-shadow: none;
-		}
+		padding: 10px 36px;
 	}
 
 	// Dashed line

package/src/page-list/editor.scss

@@ -1,10 +1,4 @@
 .wp-block-navigation {
-	// Block wrapper gets the classes in the editor, and there's an extra div wrapper for now, so background styles need to be inherited.
-	.wp-block-page-list > div,
-	.wp-block-page-list {
-		background-color: inherit;
-	}
-
 	// space-between justification.
 	&.items-justified-space-between {
 		.wp-block-page-list > div,

package/src/paragraph/edit.js

@@ -81,8 +81,8 @@ function DropCapControl( { clientId, attributes, setAttributes, name } ) {
 				hasValue={ () => !! dropCap }
 				label={ __( 'Drop cap' ) }
 				isShownByDefault={ isDropCapControlEnabledByDefault }
-				onDeselect={ () => setAttributes( { dropCap: undefined } ) }
-				resetAllFilter={ () => ( { dropCap: undefined } ) }
+				onDeselect={ () => setAttributes( { dropCap: false } ) }
+				resetAllFilter={ () => ( { dropCap: false } ) }
 				panelId={ clientId }
 			>
 				<ToggleControl

package/src/post-comments-count/block.json

@@ -12,6 +12,9 @@
 		}
 	},
 	"usesContext": [ "postId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {

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

@@ -12,6 +12,9 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {

package/src/post-date/block.json

@@ -7,6 +7,10 @@
 	"description": "Display the publish date for an entry such as a post or page.",
 	"textdomain": "default",
 	"attributes": {
+		"datetime": {
+			"type": "string",
+			"role": "content"
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -17,10 +21,6 @@
 			"type": "boolean",
 			"default": false,
 			"role": "content"
-		},
-		"displayType": {
-			"type": "string",
-			"default": "date"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

package/src/post-date/deprecated.js

@@ -1,8 +1,111 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
 
+const v2 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		format: {
+			type: 'string',
+		},
+		isLink: {
+			type: 'boolean',
+			default: false,
+			role: 'content',
+		},
+		displayType: {
+			type: 'string',
+			default: 'date',
+		},
+	},
+	supports: {
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		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,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				radius: true,
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate( { className, displayType, metadata, ...otherAttributes } ) {
+		if ( displayType === 'date' || displayType === 'modified' ) {
+			if ( displayType === 'modified' ) {
+				className = clsx(
+					className,
+					'wp-block-post-date__modified-date'
+				);
+			}
+
+			return {
+				...otherAttributes,
+				className,
+				metadata: {
+					...metadata,
+					bindings: {
+						datetime: {
+							source: 'core/post-data',
+							args: { key: displayType },
+						},
+					},
+				},
+			};
+		}
+	},
+	isEligible( attributes ) {
+		// If there's neither an explicit `datetime` attribute nor a block binding for that attribute,
+		// then we're dealing with an old version of the block.
+		return (
+			! attributes.datetime && ! attributes?.metadata?.bindings?.datetime
+		);
+	},
+};
+
 const v1 = {
 	attributes: {
 		textAlign: {
@@ -49,4 +152,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

package/src/post-date/edit.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useMemo, useState } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import {
 	dateI18n,
 	humanTimeDiff,
@@ -17,6 +17,7 @@ import {
 	AlignmentControl,
 	BlockControls,
 	InspectorControls,
+	store as blockEditorStore,
 	useBlockProps,
 	__experimentalDateFormatPicker as DateFormatPicker,
 	__experimentalPublishDateTimePicker as PublishDateTimePicker,
@@ -32,7 +33,7 @@ import {
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 import { DOWN } from '@wordpress/keycodes';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -40,14 +41,17 @@ import { useSelect } from '@wordpress/data';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function PostDateEdit( {
-	attributes: { textAlign, format, isLink, displayType },
-	context: { postId, postType: postTypeSlug, queryId },
+	attributes: { datetime, textAlign, format, isLink, metadata },
+	context: { postType: postTypeSlug, queryId },
 	setAttributes,
 } ) {
+	const displayType =
+		metadata?.bindings?.datetime?.source === 'core/post-data' &&
+		metadata?.bindings?.datetime?.args?.key;
+
 	const blockProps = useBlockProps( {
 		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			[ `wp-block-post-date__modified-date` ]: displayType === 'modified',
 		} ),
 	} );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -61,6 +65,19 @@ export default function PostDateEdit( {
 		[ popoverAnchor ]
 	);
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	// We need to set the datetime to a default value upon first loading
+	// to discern the block from its legacy version (which would default
+	// to the containing post's publish date).
+	useEffect( () => {
+		if ( datetime === undefined ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { datetime: new Date() } );
+		}
+	}, [ datetime ] );
+
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const dateSettings = getDateSettings();
 	const [ siteFormat = dateSettings.formats.date ] = useEntityProp(
@@ -73,12 +90,6 @@ export default function PostDateEdit( {
 		'site',
 		'time_format'
 	);
-	const [ date, setDate ] = useEntityProp(
-		'postType',
-		postTypeSlug,
-		displayType,
-		postId
-	);
 
 	const postType = useSelect(
 		( select ) =>
@@ -88,20 +99,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 }>
+	let postDate = (
+		<time dateTime={ dateI18n( 'c', datetime ) } ref={ setPopoverAnchor }>
 			{ format === 'human-diff'
-				? humanTimeDiff( date )
-				: dateI18n( format || siteFormat, date ) }
+				? humanTimeDiff( datetime )
+				: dateI18n( format || siteFormat, datetime ) }
 		</time>
-	) : (
-		dateLabel
 	);
 
-	if ( isLink && date ) {
+	if ( isLink && datetime ) {
 		postDate = (
 			<a
 				href="#post-date-pseudo-link"
@@ -121,49 +127,53 @@ export default function PostDateEdit( {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
-				{ date &&
-					displayType === 'date' &&
-					! isDescendentOfQueryLoop && (
-						<ToolbarGroup>
-							<Dropdown
-								popoverProps={ popoverProps }
-								renderContent={ ( { onClose } ) => (
-									<PublishDateTimePicker
-										currentDate={ date }
-										onChange={ setDate }
-										is12Hour={ is12HourFormat(
-											siteTimeFormat
-										) }
-										onClose={ onClose }
-										dateOrder={
-											/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
-											_x( 'dmy', 'date order' )
-										}
+				{ displayType !== 'modified' && ! isDescendentOfQueryLoop && (
+					<ToolbarGroup>
+						<Dropdown
+							popoverProps={ popoverProps }
+							renderContent={ ( { onClose } ) => (
+								<PublishDateTimePicker
+									title={
+										displayType === 'date'
+											? __( 'Publish Date' )
+											: __( 'Date' )
+									}
+									currentDate={ datetime }
+									onChange={ ( newDatetime ) =>
+										setAttributes( {
+											datetime: newDatetime,
+										} )
+									}
+									is12Hour={ is12HourFormat(
+										siteTimeFormat
+									) }
+									onClose={ onClose }
+									dateOrder={
+										/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+										_x( 'dmy', 'date order' )
+									}
+								/>
+							) }
+							renderToggle={ ( { isOpen, onToggle } ) => {
+								const openOnArrowDown = ( event ) => {
+									if ( ! isOpen && event.keyCode === DOWN ) {
+										event.preventDefault();
+										onToggle();
+									}
+								};
+								return (
+									<ToolbarButton
+										aria-expanded={ isOpen }
+										icon={ edit }
+										title={ __( 'Change Date' ) }
+										onClick={ onToggle }
+										onKeyDown={ openOnArrowDown }
 									/>
-								) }
-								renderToggle={ ( { isOpen, onToggle } ) => {
-									const openOnArrowDown = ( event ) => {
-										if (
-											! isOpen &&
-											event.keyCode === DOWN
-										) {
-											event.preventDefault();
-											onToggle();
-										}
-									};
-									return (
-										<ToolbarButton
-											aria-expanded={ isOpen }
-											icon={ edit }
-											title={ __( 'Change Date' ) }
-											onClick={ onToggle }
-											onKeyDown={ openOnArrowDown }
-										/>
-									);
-								} }
-							/>
-						</ToolbarGroup>
-					) }
+								);
+							} }
+						/>
+					</ToolbarGroup>
+				) }
 			</BlockControls>
 
 			<InspectorControls>
@@ -171,9 +181,9 @@ export default function PostDateEdit( {
 					label={ __( 'Settings' ) }
 					resetAll={ () => {
 						setAttributes( {
+							datetime: undefined,
 							format: undefined,
 							isLink: false,
-							displayType: 'date',
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -225,28 +235,6 @@ export default function PostDateEdit( {
 							checked={ isLink }
 						/>
 					</ToolsPanelItem>
-					<ToolsPanelItem
-						hasValue={ () => displayType !== 'date' }
-						label={ __( 'Display last modified date' ) }
-						onDeselect={ () =>
-							setAttributes( { displayType: 'date' } )
-						}
-						isShownByDefault
-					>
-						<ToggleControl
-							__nextHasNoMarginBottom
-							label={ __( 'Display last modified date' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									displayType: value ? 'modified' : 'date',
-								} )
-							}
-							checked={ displayType === 'modified' }
-							help={ __(
-								'Only shows if the post has been modified'
-							) }
-						/>
-					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>