@wordpress/block-library 6.0.5 → 6.0.9

package/src/calendar/index.php

@@ -19,7 +19,7 @@ function render_block_core_calendar( $attributes ) {
 	// when there are no published posts on the site.
 	if ( ! block_core_calendar_has_published_posts() ) {
 		if ( is_user_logged_in() ) {
-			return '<div>' . __( 'The calendar block is hidden because there are no published posts.', 'gutenberg' ) . '</div>';
+			return '<div>' . __( 'The calendar block is hidden because there are no published posts.' ) . '</div>';
 		}
 		return '';
 	}
@@ -107,47 +107,51 @@ function block_core_calendar_update_has_published_posts() {
 	return $has_published_posts;
 }
 
-// We only want to register these functions and actions when
-// we are on single sites. On multi sites we use `post_count` option.
-if ( ! is_multisite() ) {
-	/**
-	 * Handler for updating the has published posts flag when a post is deleted.
-	 *
-	 * @param int $post_id Deleted post ID.
-	 */
-	function block_core_calendar_update_has_published_post_on_delete( $post_id ) {
-		$post = get_post( $post_id );
-
-		if ( ! $post || 'publish' !== $post->post_status || 'post' !== $post->post_type ) {
-			return;
-		}
+/**
+ * Handler for updating the has published posts flag when a post is deleted.
+ *
+ * @param int $post_id Deleted post ID.
+ */
+function block_core_calendar_update_has_published_post_on_delete( $post_id ) {
+	if ( is_multisite() ) {
+		return;
+	}
+
+	$post = get_post( $post_id );
 
-		block_core_calendar_update_has_published_posts();
+	if ( ! $post || 'publish' !== $post->post_status || 'post' !== $post->post_type ) {
+		return;
 	}
 
-	/**
-	 * Handler for updating the has published posts flag when a post status changes.
-	 *
-	 * @param string  $new_status The status the post is changing to.
-	 * @param string  $old_status The status the post is changing from.
-	 * @param WP_Post $post       Post object.
-	 */
-	function block_core_calendar_update_has_published_post_on_transition_post_status( $new_status, $old_status, $post ) {
-		if ( $new_status === $old_status ) {
-			return;
-		}
+	block_core_calendar_update_has_published_posts();
+}
 
-		if ( 'post' !== get_post_type( $post ) ) {
-			return;
-		}
+/**
+ * Handler for updating the has published posts flag when a post status changes.
+ *
+ * @param string  $new_status The status the post is changing to.
+ * @param string  $old_status The status the post is changing from.
+ * @param WP_Post $post       Post object.
+ */
+function block_core_calendar_update_has_published_post_on_transition_post_status( $new_status, $old_status, $post ) {
+	if ( is_multisite() ) {
+		return;
+	}
 
-		if ( 'publish' !== $new_status && 'publish' !== $old_status ) {
-			return;
-		}
+	if ( $new_status === $old_status ) {
+		return;
+	}
 
-		block_core_calendar_update_has_published_posts();
+	if ( 'post' !== get_post_type( $post ) ) {
+		return;
 	}
 
-	add_action( 'delete_post', 'block_core_calendar_update_has_published_post_on_delete' );
-	add_action( 'transition_post_status', 'block_core_calendar_update_has_published_post_on_transition_post_status', 10, 3 );
+	if ( 'publish' !== $new_status && 'publish' !== $old_status ) {
+		return;
+	}
+
+	block_core_calendar_update_has_published_posts();
 }
+
+add_action( 'delete_post', 'block_core_calendar_update_has_published_post_on_delete' );
+add_action( 'transition_post_status', 'block_core_calendar_update_has_published_post_on_transition_post_status', 10, 3 );

package/src/code/theme.scss

@@ -1,4 +1,4 @@
-.wp-block-code {
+.wp-block-code > code {
 	font-family: $editor-html-font;
 	color: $gray-900;
 	padding: 0.8em 1em;

package/src/cover/style.scss

@@ -43,16 +43,23 @@
 	 *   - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545
 	 *   - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545
 	 */
-	&.has-background-dim:not([class*="-background-color"]) {
+
+	// the first selector is required for old Cover markup
+	&.has-background-dim:not([class*="-background-color"]),
+	.has-background-dim:not([class*="-background-color"]) {
 		background-color: $black;
 	}
 
-	&.has-background-dim::before {
+	// the first selector is required for old Cover markup
+	&.has-background-dim::before,
+	.has-background-dim::before {
 		content: "";
 		background-color: inherit;
 	}
 
+	// the first selector is required for old Cover markup
 	&.has-background-dim:not(.has-background-gradient)::before,
+	.has-background-dim:not(.has-background-gradient)::before,
 	.wp-block-cover__gradient-background {
 		position: absolute;
 		top: 0;

package/src/cover/transforms.js

@@ -17,6 +17,7 @@ const transforms = {
 				createBlock(
 					'core/cover',
 					{
+						dimRatio: 50,
 						url,
 						alt,
 						align,
@@ -43,6 +44,7 @@ const transforms = {
 				createBlock(
 					'core/cover',
 					{
+						dimRatio: 50,
 						url: src,
 						align,
 						id,

package/src/gallery/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/image` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**

package/src/home-link/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/home-link` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**

package/src/image/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/image` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**

package/src/index.js

@@ -154,7 +154,6 @@ export const __experimentalGetCoreBlocks = () => [
 	missing,
 	more,
 	navigation,
-	navigationArea,
 	navigationLink,
 	navigationSubmenu,
 	nextpage,
@@ -253,6 +252,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								commentReplyLink,
 								commentTemplate,
 								commentsQueryLoop,
+								navigationArea,
 								postComment,
 								postCommentsCount,
 								postCommentsForm,

package/src/navigation/edit/index.js

@@ -103,11 +103,10 @@ function Navigation( {
 	customAppender: CustomAppender = null,
 } ) {
 	const {
-		itemsJustification,
 		openSubmenusOnClick,
-		orientation,
 		overlayMenu,
 		showSubmenuIcon,
+		layout: { justifyContent, orientation = 'horizontal' } = {},
 	} = attributes;
 
 	const [ areaMenu, setAreaMenu ] = useEntityProp(
@@ -150,7 +149,11 @@ function Navigation( {
 		[ clientId ]
 	);
 	const hasExistingNavItems = !! innerBlocks.length;
-	const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );
+	const {
+		replaceInnerBlocks,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 
 	const [
 		hasSavedUnsavedInnerBlocks,
@@ -189,8 +192,8 @@ function Navigation( {
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames( className, {
-			[ `items-justified-${ attributes.itemsJustification }` ]: itemsJustification,
-			'is-vertical': orientation === 'vertical',
+			'items-justified-right': justifyContent === 'right',
+			'items-justified-space-between': justifyContent === 'space-between',
 			'is-responsive': 'never' !== overlayMenu,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
@@ -209,6 +212,29 @@ function Navigation( {
 		},
 	} );
 
+	const overlayClassnames = classnames( {
+		'has-text-color':
+			!! overlayTextColor.color || !! overlayTextColor?.class,
+		[ getColorClassName(
+			'color',
+			overlayTextColor?.slug
+		) ]: !! overlayTextColor?.slug,
+		'has-background':
+			!! overlayBackgroundColor.color || overlayBackgroundColor?.class,
+		[ getColorClassName(
+			'background-color',
+			overlayBackgroundColor?.slug
+		) ]: !! overlayBackgroundColor?.slug,
+	} );
+
+	const overlayStyles = {
+		color: ! overlayTextColor?.slug && overlayTextColor?.color,
+		backgroundColor:
+			! overlayBackgroundColor?.slug &&
+			overlayBackgroundColor?.color &&
+			overlayBackgroundColor.color,
+	};
+
 	// Turn on contrast checker for web only since it's not supported on mobile yet.
 	const enableContrastChecking = Platform.OS === 'web';
 
@@ -220,6 +246,15 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
+	// Spacer block needs orientation from context. This is a patch until
+	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
+	useEffect( () => {
+		if ( orientation ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { orientation } );
+		}
+	}, [ orientation ] );
+
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
 			return;
@@ -482,6 +517,8 @@ function Navigation( {
 							isOpen={ isResponsiveMenuOpen }
 							isResponsive={ 'never' !== overlayMenu }
 							isHiddenByDefault={ 'always' === overlayMenu }
+							classNames={ overlayClassnames }
+							styles={ overlayStyles }
 						>
 							{ isEntityAvailable && (
 								<NavigationInnerBlocks

package/src/navigation/edit/inner-blocks.js

@@ -81,7 +81,8 @@ export default function NavigationInnerBlocks( {
 			blocks.every(
 				( { name } ) =>
 					name === 'core/navigation-link' ||
-					name === 'core/navigation-submenu'
+					name === 'core/navigation-submenu' ||
+					name === 'core/page-list'
 			),
 		[ blocks ]
 	);

package/src/navigation/edit/navigation-menu-selector.js

@@ -3,7 +3,8 @@
  */
 import { MenuGroup, MenuItem, MenuItemsChoice } from '@wordpress/components';
 import { useEntityId } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -26,10 +27,18 @@ export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
 							)
 						)
 					}
-					choices={ navigationMenus.map( ( { id, title } ) => ( {
-						value: id,
-						label: title.rendered,
-					} ) ) }
+					choices={ navigationMenus.map( ( { id, title } ) => {
+						const label = decodeEntities( title.rendered );
+						return {
+							value: id,
+							label,
+							'aria-label': sprintf(
+								/* translators: %s: The name of a menu. */
+								__( "Switch to '%s'" ),
+								label
+							),
+						};
+					} ) }
 				/>
 			</MenuGroup>
 			<MenuGroup>

package/src/navigation/edit/placeholder/index.js

@@ -13,7 +13,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { navigation, chevronDown, Icon } from '@wordpress/icons';
+import { navigation, Icon } from '@wordpress/icons';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -34,13 +35,14 @@ const ExistingMenusDropdown = ( {
 	onCreateFromMenu,
 } ) => {
 	const toggleProps = {
-		variant: 'primary',
+		variant: 'tertiary',
+		iconPosition: 'right',
 		className: 'wp-block-navigation-placeholder__actions__dropdown',
 	};
 	return (
 		<DropdownMenu
-			text={ __( 'Select existing menu' ) }
-			icon={ chevronDown }
+			text={ __( 'Select menu' ) }
+			icon={ null }
 			toggleProps={ toggleProps }
 			popoverProps={ { isAlternate: true } }
 		>
@@ -58,7 +60,9 @@ const ExistingMenusDropdown = ( {
 										onClose={ onClose }
 										key={ menu.id }
 									>
-										{ menu.title.rendered }
+										{ decodeEntities(
+											menu.title.rendered
+										) }
 									</MenuItem>
 								);
 							} ) }
@@ -74,7 +78,7 @@ const ExistingMenusDropdown = ( {
 									onClose={ onClose }
 									key={ menu.id }
 								>
-									{ menu.name }
+									{ decodeEntities( menu.name ) }
 								</MenuItem>
 							);
 						} ) }
@@ -201,32 +205,35 @@ export default function NavigationPlaceholder( {
 								<Icon icon={ navigation } />{ ' ' }
 								{ __( 'Navigation' ) }
 							</div>
+							<hr />
 							{ hasMenus || navigationMenus.length ? (
-								<ExistingMenusDropdown
-									canSwitchNavigationMenu={
-										canSwitchNavigationMenu
-									}
-									navigationMenus={ navigationMenus }
-									setSelectedMenu={ setSelectedMenu }
-									onFinish={ onFinish }
-									menus={ menus }
-									onCreateFromMenu={ onCreateFromMenu }
-								/>
+								<>
+									<ExistingMenusDropdown
+										canSwitchNavigationMenu={
+											canSwitchNavigationMenu
+										}
+										navigationMenus={ navigationMenus }
+										setSelectedMenu={ setSelectedMenu }
+										onFinish={ onFinish }
+										menus={ menus }
+										onCreateFromMenu={ onCreateFromMenu }
+									/>
+									<hr />
+								</>
 							) : undefined }
 							{ hasPages ? (
-								<Button
-									variant={
-										hasMenus || canSwitchNavigationMenu
-											? 'tertiary'
-											: 'primary'
-									}
-									onClick={ () => {
-										setIsNewMenuModalVisible( true );
-										setCreateEmpty( false );
-									} }
-								>
-									{ __( 'Add all pages' ) }
-								</Button>
+								<>
+									<Button
+										variant="tertiary"
+										onClick={ () => {
+											setIsNewMenuModalVisible( true );
+											setCreateEmpty( false );
+										} }
+									>
+										{ __( 'Add all pages' ) }
+									</Button>
+									<hr />
+								</>
 							) : undefined }
 							<Button
 								variant="tertiary"

package/src/navigation/edit/responsive-wrapper.js

@@ -18,12 +18,15 @@ export default function ResponsiveWrapper( {
 	isResponsive,
 	onToggle,
 	isHiddenByDefault,
+	classNames,
+	styles,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
 	}
 	const responsiveContainerClasses = classnames(
 		'wp-block-navigation__responsive-container',
+		classNames,
 		{
 			'is-menu-open': isOpen,
 			'hidden-by-default': isHiddenByDefault,
@@ -61,7 +64,11 @@ export default function ResponsiveWrapper( {
 				</Button>
 			) }
 
-			<div className={ responsiveContainerClasses } id={ modalId }>
+			<div
+				className={ responsiveContainerClasses }
+				style={ styles }
+				id={ modalId }
+			>
 				<div
 					className="wp-block-navigation__responsive-close"
 					tabIndex="-1"

package/src/navigation/editor.scss

@@ -283,7 +283,6 @@ $color-control-label-height: 20px;
 		}
 
 		// Hide entirely when vertical.
-		.is-vertical.is-selected &,
 		.wp-block-navigation.is-selected .is-small &,
 		.wp-block-navigation.is-selected .is-medium & {
 			display: none;
@@ -321,17 +320,15 @@ $color-control-label-height: 20px;
 
 	// Show stacked for the vertical navigation, or small placeholders.
 	.is-small &,
-	.is-medium &,
-	.is-vertical & {
+	.is-medium & {
 		.wp-block-navigation-placeholder__actions {
 			flex-direction: column;
 		}
-	}
 
-	// Both selected and vertical.
-	.is-selected.is-vertical & {
-		display: inline-flex; // This makes the white box not take up all available space.
-		padding: $grid-unit-15;
+		// Hide the separators in the vertical version.
+		.wp-block-navigation-placeholder__actions hr {
+			display: none;
+		}
 	}
 
 	.wp-block-navigation-placeholder__icon {
@@ -341,67 +338,50 @@ $color-control-label-height: 20px;
 
 	// Block title
 	.wp-block-navigation-placeholder__actions__indicator {
-		margin-right: $grid-unit-15;
-		padding: 0;
+		display: flex;
+		padding: 0 ($grid-unit-15 * 0.5) 0 0;
 		align-items: center;
 		justify-content: flex-start;
 		line-height: 0;
+		min-height: $button-size;
 
 		// Line up with the icon in the toolbar.
-		margin-left: $grid-unit-05 + $border-width;
+		margin-left: $grid-unit-05;
 
 		svg {
 			margin-right: $grid-unit-05;
 		}
-
-		.is-vertical & {
-			margin-bottom: $grid-unit-05;
-			margin-left: 0;
-		}
-
-		// Show only in big placeholders.
-		display: none;
-		.is-large & {
-			display: inline-flex;
-		}
 	}
 }
 
-// When block is vertical.
-.is-vertical .wp-block-navigation-placeholder,
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-	min-height:
-		$icon-size +
-		( $grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15 ) * 3;
-}
-
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-	flex-direction: column;
-	align-items: flex-start;
-}
-
 .wp-block-navigation-placeholder__actions {
 	display: flex;
 	font-size: $default-font-size;
 	font-family: $default-font;
-
-	.components-button.components-dropdown-menu__toggle.has-icon {
-		padding:
-			( $grid-unit-15 * 0.5 ) $grid-unit-05 ( $grid-unit-15 * 0.5 )
-			$grid-unit-15;
-		display: flex;
-		flex-direction: row-reverse; // This puts the chevron, which is hidden from screen readers, on the right.
-	}
+	gap: $grid-unit-15 * 0.5;
 
 	// Margins.
 	.components-dropdown,
 	> .components-button {
-		margin-right: $grid-unit-15;
+		margin-right: 0;
+	}
+
+	// Separator.
+	height: 100%; // This allows the separator to scale vertically.
+
+	// Separator.
+	&.wp-block-navigation-placeholder__actions hr {
+		border: 0;
+		min-height: $border-width;
+		min-width: $border-width;
+		background-color: $gray-900;
+		margin: auto 0;
+		height: 100%;
+		max-height: $grid-unit-20;
 	}
 }
 
+
 /**
  * Mobile menu.
  */