@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/src/post-date/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
 import {
 	AlignmentControl,
@@ -16,15 +16,17 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import {
+	Dropdown,
+	ToolbarGroup,
 	ToolbarButton,
 	ToggleControl,
-	Popover,
 	DateTimePicker,
 	PanelBody,
 	CustomSelectControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
+import { DOWN } from '@wordpress/keycodes';
 
 export default function PostDateEdit( {
 	attributes: { textAlign, format, isLink },
@@ -39,7 +41,6 @@ export default function PostDateEdit( {
 		'date',
 		postId
 	);
-	const [ isPickerOpen, setIsPickerOpen ] = useState( false );
 	const settings = __experimentalGetSettings();
 	// To know if the current time format is a 12 hour time, look for "a".
 	// Also make sure this "a" is not escaped by a "/".
@@ -64,21 +65,14 @@ export default function PostDateEdit( {
 		} ),
 	} );
 
+	const timeRef = useRef();
+
 	let postDate = date ? (
-		<time dateTime={ dateI18n( 'c', date ) }>
+		<time dateTime={ dateI18n( 'c', date ) } ref={ timeRef }>
 			{ dateI18n( resolvedFormat, date ) }
-			{ isPickerOpen && (
-				<Popover onClose={ setIsPickerOpen.bind( null, false ) }>
-					<DateTimePicker
-						currentDate={ date }
-						onChange={ setDate }
-						is12Hour={ is12Hour }
-					/>
-				</Popover>
-			) }
 		</time>
 	) : (
-		__( 'No Date' )
+		__( 'Post Date' )
 	);
 	if ( isLink && date ) {
 		postDate = (
@@ -101,15 +95,35 @@ export default function PostDateEdit( {
 				/>
 
 				{ date && ! isDescendentOfQueryLoop && (
-					<ToolbarButton
-						icon={ edit }
-						title={ __( 'Change Date' ) }
-						onClick={ () =>
-							setIsPickerOpen(
-								( _isPickerOpen ) => ! _isPickerOpen
-							)
-						}
-					/>
+					<ToolbarGroup>
+						<Dropdown
+							popoverProps={ { anchorRef: timeRef.current } }
+							renderContent={ () => (
+								<DateTimePicker
+									currentDate={ date }
+									onChange={ setDate }
+									is12Hour={ is12Hour }
+								/>
+							) }
+							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>
 				) }
 			</BlockControls>
 

package/src/post-date/index.js

@@ -8,6 +8,7 @@ import { postDate as icon } from '@wordpress/icons';
  */
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -15,4 +16,5 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	deprecated,
 };

package/src/post-excerpt/block.json

@@ -24,9 +24,20 @@
 			"gradients": true,
 			"link": true
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",

package/src/post-excerpt/edit.js

@@ -57,13 +57,7 @@ export default function PostExcerptEditor( {
 		return document.body.textContent || document.body.innerText || '';
 	}, [ renderedExcerpt ] );
 	if ( ! postType || ! postId ) {
-		return (
-			<div { ...blockProps }>
-				<Warning>
-					{ __( 'Post excerpt block: no post found.' ) }
-				</Warning>
-			</div>
-		);
+		return <div { ...blockProps }>{ __( 'Post Excerpt' ) }</div>;
 	}
 	if ( isProtected && ! userCanEdit ) {
 		return (
@@ -86,6 +80,7 @@ export default function PostExcerptEditor( {
 			onChange={ ( newMoreText ) =>
 				setAttributes( { moreText: newMoreText } )
 			}
+			withoutInteractiveFormatting={ true }
 		/>
 	);
 	const excerptContent = isEditable ? (

package/src/post-excerpt/index.php

@@ -18,6 +18,12 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$excerpt = get_the_excerpt( $block->context['postId'] );
+
+	if ( empty( $excerpt ) ) {
+		return '';
+	}
+
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . $attributes['moreText'] . '</a>' : '';
 	$filter_excerpt_more = function( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';
@@ -38,7 +44,7 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
-	$content               = '<p class="wp-block-post-excerpt__excerpt">' . get_the_excerpt( $block->context['postId'] );
+	$content               = '<p class="wp-block-post-excerpt__excerpt">' . $excerpt;
 	$show_more_on_new_line = ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'];
 	if ( $show_more_on_new_line && ! empty( $more_text ) ) {
 		$content .= '</p><p class="wp-block-post-excerpt__more-text">' . $more_text . '</p>';

package/src/post-featured-image/block.json

@@ -24,7 +24,16 @@
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
-		"html": false
+		"color": {
+			"__experimentalDuotone": "img",
+			"text": false,
+			"background": false
+		},
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"editorStyle": "wp-block-post-featured-image-editor",
 	"style": "wp-block-post-featured-image"

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -5,38 +10,46 @@ import { __, _x } from '@wordpress/i18n';
 import {
 	PanelBody,
 	__experimentalUnitControl as UnitControl,
-	BaseControl,
 	Flex,
 	FlexItem,
-	__experimentalSegmentedControl as SegmentedControl,
-	__experimentalSegmentedControlOption as SegmentedControlOption,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { useSetting } from '@wordpress/block-editor';
 
 const SCALE_OPTIONS = (
 	<>
-		<SegmentedControlOption
+		<ToggleGroupControlOption
 			value="cover"
 			label={ _x( 'Cover', 'Scale option for Image dimension control' ) }
 		/>
-		<SegmentedControlOption
+		<ToggleGroupControlOption
 			value="contain"
 			label={ _x(
 				'Contain',
 				'Scale option for Image dimension control'
 			) }
 		/>
-		<SegmentedControlOption
+		<ToggleGroupControlOption
 			value="fill"
-			label={ _x(
-				'Stretch',
-				'Scale option for Image dimension control'
-			) }
+			label={ _x( 'Fill', 'Scale option for Image dimension control' ) }
 		/>
 	</>
 );
 
+const scaleHelp = {
+	cover: __(
+		'Image is scaled and cropped to fill the entire space without being distorted.'
+	),
+	contain: __(
+		'Image is scaled to fill the space without clipping nor distorting.'
+	),
+	fill: __(
+		'Image will be stretched and distorted to completely fill the space.'
+	),
+};
+
 const DimensionControls = ( {
 	attributes: { width, height, scale },
 	setAttributes,
@@ -60,7 +73,13 @@ const DimensionControls = ( {
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
 		<PanelBody title={ __( 'Dimensions' ) }>
-			<Flex justify="space-between">
+			<Flex
+				justify="space-between"
+				className={ classNames(
+					'block-library-post-featured-image-dimension-controls',
+					{ 'scale-control-is-visible': !! height }
+				) }
+			>
 				<FlexItem>
 					<UnitControl
 						label={ __( 'Height' ) }
@@ -85,30 +104,19 @@ const DimensionControls = ( {
 				</FlexItem>
 			</Flex>
 			{ !! height && (
-				<>
-					<BaseControl
-						aria-label={ scaleLabel }
-						className="block-library-post-featured-image-scale-controls"
-					>
-						<div>
-							<BaseControl.VisualLabel>
-								{ scaleLabel }
-							</BaseControl.VisualLabel>
-						</div>
-						<SegmentedControl
-							label={ scaleLabel }
-							value={ scale }
-							onChange={ ( value ) => {
-								setAttributes( {
-									scale: value,
-								} );
-							} }
-							isBlock
-						>
-							{ SCALE_OPTIONS }
-						</SegmentedControl>
-					</BaseControl>
-				</>
+				<ToggleGroupControl
+					label={ scaleLabel }
+					value={ scale }
+					help={ scaleHelp[ scale ] }
+					onChange={ ( value ) => {
+						setAttributes( {
+							scale: value,
+						} );
+					} }
+					isBlock
+				>
+					{ SCALE_OPTIONS }
+				</ToggleGroupControl>
 			) }
 		</PanelBody>
 	);

package/src/post-featured-image/editor.scss

@@ -10,7 +10,7 @@ div[data-type="core/post-featured-image"] {
 	.post-featured-image_placeholder {
 		display: flex;
 		flex-direction: row;
-		align-items: flex-start;
+		align-items: center;
 		border-radius: $radius-block-ui;
 		background-color: $white;
 		box-shadow: inset 0 0 0 $border-width $gray-900;
@@ -26,14 +26,9 @@ div[data-type="core/post-featured-image"] {
 	}
 }
 
-// TODO this is temp styles.
-.block-library-post-featured-image-scale-controls {
-	margin-top: $grid-unit-20;
-	.components-flex {
-		border: $border-width solid $gray-700;
-	}
-	button {
-		width: 100%;
-		display: block;
+.block-library-post-featured-image-dimension-controls {
+	margin-bottom: $grid-unit-10;
+	&.scale-control-is-visible {
+		margin-bottom: $grid-unit-20;
 	}
 }

package/src/post-featured-image/style.scss

@@ -8,6 +8,7 @@
 		max-width: 100%;
 		width: 100%;
 		height: auto;
+		vertical-align: bottom;
 	}
 
 	&.alignwide img,

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

@@ -19,10 +19,25 @@
 		"showTitle": {
 			"type": "boolean",
 			"default": false
+		},
+		"linkLabel": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	}
 }

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

@@ -17,11 +17,17 @@ import {
 import { __ } from '@wordpress/i18n';
 
 export default function PostNavigationLinkEdit( {
-	attributes: { type, label, showTitle, textAlign },
+	attributes: { type, label, showTitle, textAlign, linkLabel },
 	setAttributes,
 } ) {
 	const isNext = type === 'next';
-	const placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
+	let placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
+
+	if ( showTitle ) {
+		/* translators: Label before for next and previous post. There is a space after the colon. */
+		placeholder = isNext ? __( 'Next: ' ) : __( 'Previous: ' );
+	}
+
 	const ariaLabel = isNext ? __( 'Next post' ) : __( 'Previous post' );
 	const blockProps = useBlockProps( {
 		className: classnames( {
@@ -44,6 +50,19 @@ export default function PostNavigationLinkEdit( {
 							} )
 						}
 					/>
+					{ showTitle && (
+						<ToggleControl
+							label={ __(
+								'Include the label as part of the link'
+							) }
+							checked={ !! linkLabel }
+							onChange={ () =>
+								setAttributes( {
+									linkLabel: ! linkLabel,
+								} )
+							}
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			<BlockControls>
@@ -65,6 +84,14 @@ export default function PostNavigationLinkEdit( {
 						setAttributes( { label: newLabel } )
 					}
 				/>
+				{ showTitle && (
+					<a
+						href="#post-navigation-pseudo-link"
+						onClick={ ( event ) => event.preventDefault() }
+					>
+						{ __( 'An example title' ) }
+					</a>
+				) }
 			</div>
 		</>
 	);

package/src/post-navigation-link/index.php

@@ -33,6 +33,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	$format = '%link';
 	$link   = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' );
 	$label  = '';
+
 	// If a custom label is provided, make this a link.
 	// `$label` is used to prepend the provided label, if we want to show the page title as well.
 	if ( isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ) {
@@ -42,11 +43,34 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 
 	// If we want to also show the page title, make the page title a link and prepend the label.
 	if ( isset( $attributes['showTitle'] ) && $attributes['showTitle'] ) {
-		if ( $label ) {
-			$format = "$label %link";
+		/*
+		 * If the label link option is not enabled but there is a custom label,
+		 * display the custom label as text before the linked title.
+		 */
+		if ( ! $attributes['linkLabel'] ) {
+			if ( $label ) {
+				$format = '<span class="post-navigation-link__label">' . $label . '</span> %link';
+			}
+			$link = '%title';
+		} elseif ( isset( $attributes['linkLabel'] ) && $attributes['linkLabel'] ) {
+			// If the label link option is enabled and there is a custom label, display it before the title.
+			if ( $label ) {
+				$link = '<span class="post-navigation-link__label">' . $label . '</span> <span class="post-navigation-link__title">%title</title>';
+			} else {
+				/*
+				 * If the label link option is enabled and there is no custom label,
+				 * add a colon between the label and the post title.
+				 */
+				$label = 'next' === $navigation_type ? _x( 'Next:', 'label before the title of the next post' ) : _x( 'Previous:', 'label before the title of the previous post' );
+				$link  = sprintf(
+					'<span class="post-navigation-link__label">%1$s</span> <span class="post-navigation-link__title">%2$s</span>',
+					$label,
+					'%title'
+				);
+			}
 		}
-		$link = '%title';
 	}
+
 	// The dynamic portion of the function name, `$navigation_type`,
 	// refers to the type of adjacency, 'next' or 'previous'.
 	$get_link_function = "get_{$navigation_type}_post_link";

package/src/post-template/block.json

@@ -16,7 +16,10 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
-		"align": true
+		"align": true,
+		"__experimentalLayout": {
+			"allowEditing": false
+		}
 	},
 	"style": "wp-block-post-template",
 	"editorStyle": "wp-block-post-template-editor"

package/src/post-template/edit.js

@@ -13,7 +13,7 @@ import {
 	BlockContextProvider,
 	BlockPreview,
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';
@@ -24,6 +24,12 @@ const TEMPLATE = [
 	[ 'core/post-date' ],
 	[ 'core/post-excerpt' ],
 ];
+
+function PostTemplateInnerBlocks() {
+	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
+	return <li { ...innerBlocksProps } />;
+}
+
 export default function PostTemplateEdit( {
 	clientId,
 	context: {
@@ -125,7 +131,6 @@ export default function PostTemplateEdit( {
 			[ `columns-${ columns }` ]: hasLayoutFlex,
 		} ),
 	} );
-	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
 
 	if ( ! posts ) {
 		return (
@@ -149,7 +154,7 @@ export default function PostTemplateEdit( {
 					>
 						{ blockContext ===
 						( activeBlockContext || blockContexts[ 0 ] ) ? (
-							<li { ...innerBlocksProps } />
+							<PostTemplateInnerBlocks />
 						) : (
 							<li>
 								<BlockPreview

package/src/post-template/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { loop } from '@wordpress/icons';
+import { layout } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon: loop,
+	icon: layout,
 	edit,
 	save,
 };

package/src/post-template/style.scss

@@ -5,6 +5,8 @@
 // See: https://github.com/WordPress/gutenberg/pull/32514.
 // TODO: Remove this class when WordPress 5.9 is released.
 .wp-block-query-loop {
+	margin-top: 0;
+	margin-bottom: 0;
 	max-width: 100%;
 	list-style: none;
 	padding: 0;

package/src/post-terms/block.json

@@ -26,7 +26,14 @@
 		},
 		"typography": {
 			"lineHeight": true,
-			"fontSize": true
+			"fontSize": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"style": "wp-block-post-terms"

package/src/post-terms/edit.js

@@ -8,9 +8,8 @@ import classnames from 'classnames';
  */
 import {
 	AlignmentToolbar,
-	InspectorAdvancedControls,
+	InspectorControls,
 	BlockControls,
-	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { Spinner, TextControl } from '@wordpress/components';
@@ -53,20 +52,8 @@ export default function PostTermsEdit( {
 		} ),
 	} );
 
-	if ( ! hasPost ) {
-		return (
-			<div { ...blockProps }>
-				<Warning>{ __( 'Post Terms block: post not found.' ) }</Warning>
-			</div>
-		);
-	}
-
-	if ( ! term ) {
-		return (
-			<div { ...blockProps }>
-				{ __( 'Post Terms block: no term specified.' ) }
-			</div>
-		);
+	if ( ! hasPost || ! term ) {
+		return <div { ...blockProps }>{ __( 'Post Terms' ) }</div>;
 	}
 
 	return (
@@ -79,7 +66,7 @@ export default function PostTermsEdit( {
 					} }
 				/>
 			</BlockControls>
-			<InspectorAdvancedControls>
+			<InspectorControls __experimentalGroup="advanced">
 				<TextControl
 					autoComplete="off"
 					label={ __( 'Separator' ) }
@@ -89,7 +76,7 @@ export default function PostTermsEdit( {
 					} }
 					help={ __( 'Enter character(s) used to separate terms.' ) }
 				/>
-			</InspectorAdvancedControls>
+			</InspectorControls>
 			<div { ...blockProps }>
 				{ isLoading && <Spinner /> }
 				{ ! isLoading &&

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

@@ -19,7 +19,7 @@ export default function usePostTerms( { postId, postType, term } ) {
 			}
 			if ( ! termIds ) {
 				// Waiting for post terms to be fetched.
-				return { isLoading: true };
+				return { isLoading: term?.postTerms?.includes( postType ) };
 			}
 			if ( ! termIds.length ) {
 				return { isLoading: false };

package/src/post-title/block.json

@@ -35,10 +35,22 @@
 			"gradients": true,
 			"link": true
 		},
+		"spacing": {
+			"margin": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontFamily": true
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontAppearance": true,
+				"textTransform": true
+			}
 		}
 	},
 	"style": "wp-block-post-title"