@wordpress/block-library 5.0.1 → 6.0.1

package/src/page-list/index.php

@@ -128,6 +128,9 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 /**
  * Outputs Page list markup from an array of pages with nested children.
  *
+ * @param boolean $open_submenus_on_click Whether to open submenus on click instead of hover.
+ * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
+ * @param boolean $is_navigation_child If block is a child of Navigation block.
  * @param array   $nested_pages The array of nested pages.
  * @param array   $active_page_ancestor_ids An array of ancestor ids for active page.
  * @param array   $colors Color information for overlay styles.
@@ -135,7 +138,7 @@ function block_core_page_list_build_css_font_sizes( $context ) {
  *
  * @return string List markup.
  */
-function block_core_page_list_render_nested_page_list( $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
+function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
@@ -149,6 +152,18 @@ function block_core_page_list_render_nested_page_list( $nested_pages, $active_pa
 			$css_class .= ' has-child';
 		}
 
+		if ( $is_navigation_child ) {
+			$css_class .= ' wp-block-navigation-item';
+
+			if ( $open_submenus_on_click ) {
+				$css_class .= ' open-on-click';
+			} elseif ( $show_submenu_icons ) {
+				$css_class .= ' open-on-hover-click';
+			}
+		}
+
+		$navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';
+
 		// If this is the first level of submenus, include the overlay colors.
 		if ( 1 === $depth && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
 			$css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
@@ -158,13 +173,32 @@ function block_core_page_list_render_nested_page_list( $nested_pages, $active_pa
 		}
 
 		$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';
-		$markup .= '<a class="wp-block-pages-list__item__link" href="' . esc_url( $page['link'] ) . '">' . wp_kses(
-			$page['title'],
-			wp_kses_allowed_html( 'post' )
-		) . '</a>';
+
+		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
+			$markup .= '<button class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . wp_kses(
+				$page['title'],
+				wp_kses_allowed_html( 'post' )
+			) . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
+			'</button>';
+		} else {
+			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '">' . wp_kses(
+				$page['title'],
+				wp_kses_allowed_html( 'post' )
+			) . '</a>';
+		}
+
 		if ( isset( $page['children'] ) ) {
-			$markup .= '<span class="wp-block-page-list__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
-			$markup .= '<ul class="submenu-container">' . block_core_page_list_render_nested_page_list( $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
+			if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
+				$markup .= '<button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
+				$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
+				$markup .= '</button>';
+			}
+			$markup .= '<ul class="submenu-container';
+			// Extra classname is added when the block is a child of Navigation.
+			if ( $is_navigation_child ) {
+				$markup .= ' wp-block-navigation__submenu-container';
+			}
+			$markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
 		}
 		$markup .= '</li>';
 	}
@@ -258,13 +292,15 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
-	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+	$is_navigation_child = array_key_exists( 'isNavigationChild', $attributes ) ? $attributes['isNavigationChild'] : ! empty( $block->context );
 
-	$items_markup = block_core_page_list_render_nested_page_list( $nested_pages, $active_page_ancestor_ids, $colors );
+	$open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $attributes ) ? $attributes['openSubmenusOnClick'] : false;
 
-	if ( $block->context && $block->context['showSubmenuIcon'] ) {
-		$css_classes .= ' show-submenu-icons';
-	}
+	$show_submenu_icons = array_key_exists( 'showSubmenuIcon', $attributes ) ? $attributes['showSubmenuIcon'] : false;
+
+	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+
+	$items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(

package/src/page-list/style.scss

@@ -8,27 +8,15 @@
 
 	// Menu items generated by the page list do not get `has-[x]-background-color`,
 	// and must therefore inherit from the parent.
-	.wp-block-pages-list__item {
+	.wp-block-navigation-item {
 		background-color: inherit;
 	}
-
-	// Submenu icon indicator.
-	// The specific styles for the submenu indicator are inherited from the navigation block style.
-	.wp-block-page-list__submenu-icon {
-		display: none;
-	}
-
-	.show-submenu-icons {
-		.wp-block-page-list__submenu-icon {
-			display: inline-block;
-		}
-	}
 }
 
 .is-vertical .wp-block-navigation__container,
 .is-open .wp-block-navigation__container {
 	.wp-block-page-list {
-		display: block;
+		display: flex;
 	}
 }
 

package/src/page-list/test/convert-to-links-modal.js

@@ -149,7 +149,7 @@ describe( 'page list convert to links', () => {
 							name: 'core/navigation-link',
 						},
 					],
-					name: 'core/navigation-link',
+					name: 'core/navigation-submenu',
 				},
 				{
 					attributes: {
@@ -193,10 +193,10 @@ describe( 'page list convert to links', () => {
 									name: 'core/navigation-link',
 								},
 							],
-							name: 'core/navigation-link',
+							name: 'core/navigation-submenu',
 						},
 					],
-					name: 'core/navigation-link',
+					name: 'core/navigation-submenu',
 				},
 			] );
 		} );
@@ -344,7 +344,7 @@ describe( 'page list convert to links', () => {
 							name: 'core/navigation-link',
 						},
 					],
-					name: 'core/navigation-link',
+					name: 'core/navigation-submenu',
 				},
 				{
 					attributes: {
@@ -388,10 +388,10 @@ describe( 'page list convert to links', () => {
 									name: 'core/navigation-link',
 								},
 							],
-							name: 'core/navigation-link',
+							name: 'core/navigation-submenu',
 						},
 					],
-					name: 'core/navigation-link',
+					name: 'core/navigation-submenu',
 				},
 			] );
 		} );

package/src/paragraph/style.scss

@@ -28,6 +28,11 @@
 	font-style: normal;
 }
 
+p {
+	// Break long strings of text without spaces so they don't overflow the block.
+	overflow-wrap: break-word;
+}
+
 // Prevent the dropcap from breaking out of the box when a background is applied.
 p.has-drop-cap.has-background {
 	overflow: hidden;
@@ -37,6 +42,10 @@ p.has-background {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }
 
-p.has-text-color a {
+// Use :where to contain the specificity of this rule
+// so it's easily overrideable by any theme that targets
+// links using the a element.
+// For example, this is what global styles does.
+:where(p.has-text-color:not(.has-link-color)) a {
 	color: inherit;
 }

package/src/post-author/block.json

@@ -33,7 +33,8 @@
 		},
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDuotone": ".wp-block-post-author__avatar img"
 		}
 	},
 	"editorStyle": "wp-block-post-author-editor",

package/src/post-comment/edit.js

@@ -5,18 +5,29 @@ import { __ } from '@wordpress/i18n';
 import { Placeholder, TextControl, Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { blockDefault } from '@wordpress/icons';
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
 const ALLOWED_BLOCKS = [
 	'core/post-comment-content',
 	'core/post-comment-author',
+	'core/post-comment-date',
+];
+const TEMPLATE = [
+	[ 'core/post-comment-content' ],
+	[ 'core/post-comment-author' ],
 ];
 
-// TODO: JSDOC types
 export default function Edit( { attributes, setAttributes } ) {
 	const { commentId } = attributes;
 	const [ commentIdInput, setCommentIdInput ] = useState( commentId );
 	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		allowedBlocks: ALLOWED_BLOCKS,
+	} );
 
 	if ( ! commentId ) {
 		return (
@@ -48,9 +59,5 @@ export default function Edit( { attributes, setAttributes } ) {
 		);
 	}
 
-	return (
-		<div { ...blockProps }>
-			<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />
-		</div>
-	);
+	return <div { ...innerBlocksProps } />;
 }

package/src/post-comment-author/edit.js

@@ -10,19 +10,22 @@ export default function Edit( { attributes, context } ) {
 	const { className } = attributes;
 	const { commentId } = context;
 
-	const displayName = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreStore );
+	const displayName = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
 
-		const comment = getEntityRecord( 'root', 'comment', commentId );
-		const authorName = comment?.author_name; // eslint-disable-line camelcase
+			const comment = getEntityRecord( 'root', 'comment', commentId );
+			const authorName = comment?.author_name; // eslint-disable-line camelcase
 
-		if ( comment && ! authorName ) {
-			const user = getEntityRecord( 'root', 'user', comment.author );
-			return user?.name ?? __( 'Anonymous' );
-		}
+			if ( comment && ! authorName ) {
+				const user = getEntityRecord( 'root', 'user', comment.author );
+				return user?.name ?? __( 'Anonymous' );
+			}
 
-		return authorName ?? '';
-	} );
+			return authorName ?? '';
+		},
+		[ commentId ]
+	);
 
 	return (
 		<div { ...useBlockProps() }>

package/src/post-comment-content/edit.js

@@ -1,24 +1,32 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { RawHTML } from '@wordpress/element';
 import { useEntityProp } from '@wordpress/core-data';
-import { useBlockProps } from '@wordpress/block-editor';
-
-// TODO: JSDOC types
-export default function Edit( { attributes, context } ) {
-	const { className } = attributes;
-	const { commentId } = context;
+import { useBlockProps, Warning } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
 
+export default function Edit( { context: { commentId } } ) {
+	const blockProps = useBlockProps();
 	const [ content ] = useEntityProp(
 		'root',
 		'comment',
 		'content',
 		commentId
 	);
-
+	if ( ! content?.rendered ) {
+		return (
+			<div { ...blockProps }>
+				<Warning>{ __( 'Comment has no content.' ) }</Warning>
+			</div>
+		);
+	}
 	return (
-		<div { ...useBlockProps() }>
-			<p className={ className }>{ content }</p>
+		<div { ...blockProps }>
+			<Disabled>
+				<RawHTML key="html">{ content.rendered }</RawHTML>
+			</Disabled>
 		</div>
 	);
 }

package/src/post-comment-content/index.php

@@ -17,11 +17,14 @@ function render_block_core_post_comment_content( $attributes, $content, $block )
 	if ( ! isset( $block->context['commentId'] ) ) {
 		return '';
 	}
-	$wrapper_attributes = get_block_wrapper_attributes();
+	$comment_text = get_comment_text( $block->context['commentId'] );
+	if ( ! $comment_text ) {
+		return '';
+	}
 	return sprintf(
 		'<div %1$s>%2$s</div>',
-		$wrapper_attributes,
-		get_comment_text( $block->context['commentId'] )
+		get_block_wrapper_attributes(),
+		$comment_text
 	);
 }
 

package/src/post-content/edit.js

@@ -85,9 +85,7 @@ function Placeholder() {
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
-			<div className="wp-block-post-content__placeholder">
-				<span>{ __( 'This is a placeholder for post content.' ) }</span>
-			</div>
+			<p>{ __( 'This is a placeholder for post content.' ) }</p>
 		</div>
 	);
 }

package/src/post-date/block.json

@@ -26,7 +26,8 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontWeight": true
 		}
 	}
 }

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,18 +65,11 @@ 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' )
@@ -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-excerpt/edit.js

@@ -86,6 +86,7 @@ export default function PostExcerptEditor( {
 			onChange={ ( newMoreText ) =>
 				setAttributes( { moreText: newMoreText } )
 			}
+			withoutInteractiveFormatting={ true }
 		/>
 	);
 	const excerptContent = isEditable ? (

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

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

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

@@ -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

@@ -1,4 +1,5 @@
 .wp-block-post-featured-image {
+	line-height: 0;
 	margin-left: 0;
 	margin-right: 0;
 	a {

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

@@ -19,10 +19,18 @@
 		"showTitle": {
 			"type": "boolean",
 			"default": false
+		},
+		"linkLabel": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }