prep build 01/05

README.md

@@ -37,7 +37,7 @@ Get hands on: check out the [block editor live demo](https://wordpress.org/guten
 
 Extending and customizing is at the heart of the WordPress platform, this is no different for the Gutenberg project. The editor and future products can be extended by third-party developers using plugins.
 
-Review the [Create a Block tutorial](/docs/getting-started/create-block/README.md) for the fastest way to get started extending the block editor. See the [Developer Documentation](https://developer.wordpress.org/block-editor/#develop-for-the-block-editor) for extensive tutorials, documentation, and API references.
+Review the [Create a Block tutorial](/docs/getting-started/devenv/get-started-with-create-block.md) for the fastest way to get started extending the block editor. See the [Developer Documentation](https://developer.wordpress.org/block-editor/#develop-for-the-block-editor) for extensive tutorials, documentation, and API references.
 
 ### Contribute to Gutenberg
 

changelog.txt

@@ -1,5 +1,36 @@
 == Changelog ==
 
+= 17.4.1 =
+
+## Changelog
+
+### Bug Fixes
+
+- Rich text: add HTML string methods to RichTextData ([57322](https://github.com/WordPress/gutenberg/pull/57322))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@ellatrix
+
+
+= 17.3.1 =
+
+## Changelog
+
+### Bug Fixes
+
+- Rich text: add HTML string methods to RichTextData ([57322](https://github.com/WordPress/gutenberg/pull/57322))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@ellatrix 
+
+
+
 = 17.4.0 =
 
 

docs/contributors/documentation/README.md

@@ -31,7 +31,7 @@ See [the Git Workflow](/docs/contributors/code/git-workflow.md) documentation fo
 
 The handbook is organized into four sections based on the functional types of documents. [The Documentation System](https://documentation.divio.com/) does a great job explaining the needs and functions of each type, but in short they are:
 
--   **Getting started tutorials** - full lessons that take learners step by step to complete an objective, for example the [create a block tutorial](/docs/getting-started/create-block/README.md).
+-   **Getting started tutorials** - full lessons that take learners step by step to complete an objective, for example the [create a block tutorial](/docs/getting-started/devenv/get-started-with-create-block.md).
 -   **How to guides** - short lessons specific to completing a small specific task, for example [how to add a button to the block toolbar](/docs/how-to-guides/format-api.md).
 -   **Reference guides** - API documentation, purely functional descriptions,
 -   **Explanations** - longer documentation focused on learning, not a specific task.
@@ -164,7 +164,7 @@ This is a **warning** callout.
 Note: In callout notices, links also need to be HTML `<a href></a>` notations. 
 The usual link transformation is not applied to links in callouts.
 For instance, to reach the Getting started > Create Block page the URL in GitHub is
-https://developer.wordpress.org/docs/getting-started/create-block/README.md
+https://developer.wordpress.org/docs/getting-started/devenv/get-started-with-create-block.md
 and will have to be hardcoded for the endpoint in the Block Editor Handbook as 
 <a href="https://developer.wordpress.org/block-editor/getting-started/create-block/">https://developer.wordpress.org/block-editor/getting-started/create-block/</a> to link correctly in the handbook. 
 </div>

docs/explanations/architecture/key-concepts.md

@@ -39,7 +39,7 @@ Given a block type, a block variation is a predefined set of its initial attribu
 **More on blocks**
 
 -   **[Block API](/docs/reference-guides/block-api/README.md)**
--   **[Tutorial: Building A Custom Block](/docs/getting-started/create-block/README.md)**
+-   **[Tutorial: Building A Custom Block](/docs/getting-started/devenv/get-started-with-create-block.md)**
 
 ## Reusable blocks
 

docs/explanations/user-interface/block-design.md

@@ -74,7 +74,7 @@ When referring to a block in documentation or UI, use title case for the block t
 -   Latest Posts block
 -   Media & Text block
 
-Blocks should have an identifying icon, ideally using a single color. Try to avoid using the same icon used by an existing block. The core block icons are based on [Material Design Icons](https://material.io/tools/icons/). Look to that icon set, or to [Dashicons](https://developer.wordpress.org/resource/dashicons/) for style inspiration.
+Blocks should have an identifying icon, ideally using a single color. Try to avoid using the same icon used by an existing block. The core block icons are based on [Material Design Icons](https://fonts.google.com/icons). Look to that icon set, or to [Dashicons](https://developer.wordpress.org/resource/dashicons/) for style inspiration.
 
 ![A screenshot of the block library with concise block names](https://developer.wordpress.org/files/2022/01/blocks-do.png)
 **Do:**

docs/getting-started/quick-start-guide.md

@@ -25,7 +25,7 @@ Navigate to the Plugins page of your local WordPress installation and activate t
 
 ## Basic usage
 
-With the plugin activated, you can  explore how the block works. Use the following command to move into the newly created plugin folder and start the development process.
+With the plugin activated, you can explore how the block works. Use the following command to move into the newly created plugin folder and start the development process.
 
 ```sh
 cd copyright-date-block && npm start
@@ -37,6 +37,14 @@ The `npm start` command will start a development server and watch for changes in
 
 When you are finished making changes, run the `npm run build` command. This optimizes the block code and makes it production-ready.
 
+## View the block in action
+
+You can use any local WordPress development environment to test your new block, but the scaffolded plugin includes configuration for `wp-env`. You must have [Docker](https://www.docker.com/products/docker-desktop) already installed and running on your machine, but if you do, run the `npx wp-env start` command. 
+
+Once the script finishes running, you can access the local environment at: `http://localhost:8888`. Log into the WordPress dashboard using username `admin` and password `password`. The plugin will already be installed and activated. Open the Editor or Site Editor, and insert the Copyright Date Block as you would any other block.
+
+Visit the [Getting started](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/) guide to learn more about `wp-env`.
+
 ## Additional resources
 
 - [Get started with create-block](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/)

docs/how-to-guides/README.md

@@ -6,7 +6,7 @@ The new editor is highly flexible, like most of WordPress. You can build custom
 
 The editor is about blocks, and the main extensibility API is the Block API. It allows you to create your own static blocks, [Dynamic Blocks](/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md) ( rendered on the server ) and also blocks capable of saving data to Post Meta for more structured content.
 
-If you want to learn more about block creation, see the [Create a Block tutorial](/docs/getting-started/create-block/README.md) for the best place to start.
+If you want to learn more about block creation, see the [Create a Block tutorial](/docs/getting-started/devenv/get-started-with-create-block.md) for the best place to start.
 
 ## Extending blocks
 

docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md

@@ -6,7 +6,7 @@ A block typically inserts markup (HTML) into post content that you want to style
 
 ## Before you start
 
-You will need a basic block and WordPress development environment to implement the examples shown in this guide. See the [create a basic block](/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md) or [block tutorial](/docs/getting-started/create-block/README.md) to get setup.
+You will need a basic block and WordPress development environment to implement the examples shown in this guide. See the [create a basic block](/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md) or [block tutorial](/docs/getting-started/devenv/get-started-with-create-block.md) to get setup.
 
 ## Methods to add style
 

docs/how-to-guides/metabox.md

@@ -18,7 +18,7 @@ This guide shows how to create a block that prompts a user for a single value, a
 
 This guide assumes you are already familiar with WordPress plugins, post meta, and basic JavaScript. Review the [Getting started with JavaScript tutorial](/docs/how-to-guides/javascript/README.md) for an introduction.
 
-The guide will walk through creating a basic block, but recommended to go through the [Create Block tutorial](/docs/getting-started/create-block/README.md) for a deeper understanding of creating custom blocks.
+The guide will walk through creating a basic block, but recommended to go through the [Create Block tutorial](/docs/getting-started/devenv/get-started-with-create-block.md) for a deeper understanding of creating custom blocks.
 
 You will need:
 

docs/reference-guides/core-blocks.md

@@ -630,7 +630,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
 -	**Name:** core/post-featured-image
 -	**Category:** theme
 -	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
--	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
+-	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, useFirstImageFromPost, width
 
 ## Post Navigation Link
 
@@ -799,7 +799,7 @@ Help visitors find your content. ([Source](https://github.com/WordPress/gutenber
 -	**Name:** core/search
 -	**Category:** widgets
 -	**Supports:** align (center, left, right), color (background, gradients, text), interactivity, typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** buttonBehavior, buttonPosition, buttonText, buttonUseIcon, isSearchFieldHidden, label, placeholder, query, showLabel, width, widthUnit
+-	**Attributes:** buttonPosition, buttonText, buttonUseIcon, isSearchFieldHidden, label, placeholder, query, showLabel, width, widthUnit
 
 ## Separator
 

lib/block-supports/background.php

@@ -96,6 +96,7 @@ function gutenberg_render_background_support( $block_content, $block ) {
 
 			$updated_style .= $styles['css'];
 			$tags->set_attribute( 'style', $updated_style );
+			$tags->add_class( 'has-background' );
 		}
 
 		return $tags->get_updated_html();

lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

@@ -361,16 +361,25 @@ private static function get_classes( $attributes ) {
 		$text_decoration       = $attributes['style']['typography']['textDecoration'] ?? null;
 		$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
 
+		// Sets the is-collapsed class when the navigation is set to always use the overlay.
+		// This saves us from needing to do this check in the view.js file (see the collapseNav function).
+		$is_collapsed_class = static::is_always_overlay( $attributes ) ? array( 'is-collapsed' ) : array();
+
 		$classes = array_merge(
 			$colors['css_classes'],
 			$font_sizes['css_classes'],
 			$is_responsive_menu ? array( 'is-responsive' ) : array(),
 			$layout_class ? array( $layout_class ) : array(),
-			$text_decoration ? array( $text_decoration_class ) : array()
+			$text_decoration ? array( $text_decoration_class ) : array(),
+			$is_collapsed_class
 		);
 		return implode( ' ', $classes );
 	}
 
+	private static function is_always_overlay( $attributes ) {
+		return isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
+	}
+
 	/**
 	 * Get styles for the navigation block.
 	 *
@@ -397,16 +406,12 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 		$colors                  = gutenberg_block_core_navigation_build_css_colors( $attributes );
 		$modal_unique_id         = wp_unique_id( 'modal-' );
 
-		$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
-
 		$responsive_container_classes = array(
 			'wp-block-navigation__responsive-container',
-			$is_hidden_by_default ? 'hidden-by-default' : '',
 			implode( ' ', $colors['overlay_css_classes'] ),
 		);
 		$open_button_classes          = array(
 			'wp-block-navigation__responsive-container-open',
-			$is_hidden_by_default ? 'always-shown' : '',
 		);
 
 		$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
@@ -504,7 +509,7 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
 		);
 
 		if ( $is_responsive_menu ) {
-			$nav_element_directives = static::get_nav_element_directives( $should_load_view_script );
+			$nav_element_directives = static::get_nav_element_directives( $should_load_view_script, $attributes );
 			$wrapper_attributes    .= ' ' . $nav_element_directives;
 		}
 
@@ -517,12 +522,12 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
 	 * @param bool $should_load_view_script Whether or not the view script should be loaded.
 	 * @return string the directives for the navigation element.
 	 */
-	private static function get_nav_element_directives( $should_load_view_script ) {
+	private static function get_nav_element_directives( $should_load_view_script, $attributes ) {
 		if ( ! $should_load_view_script ) {
 			return '';
 		}
 		// When adding to this array be mindful of security concerns.
-		$nav_element_context = wp_json_encode(
+		$nav_element_context    = wp_json_encode(
 			array(
 				'overlayOpenedBy' => array(),
 				'type'            => 'overlay',
@@ -531,10 +536,20 @@ private static function get_nav_element_directives( $should_load_view_script ) {
 			),
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
 		);
-		return '
+		$nav_element_directives = '
 			data-wp-interactive=\'{"namespace":"core/navigation"}\'
 			data-wp-context=\'' . $nav_element_context . '\'
 		';
+
+		// When the navigation overlayMenu attribute is set to "always"
+		// we don't need to use JavaScript to collapse the menu as we set the class manually.
+		if ( ! static::is_always_overlay( $attributes ) ) {
+			$nav_element_directives .= 'data-wp-init="callbacks.initNav"';
+			$nav_element_directives .= ' '; // space separator
+			$nav_element_directives .= 'data-wp-class--is-collapsed="context.isCollapsed"';
+		}
+
+		return $nav_element_directives;
 	}
 
 	/**

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "17.4.0",
+	"version": "17.4.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

packages/block-editor/src/components/block-lock/toolbar.js

@@ -3,78 +3,46 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { focus } from '@wordpress/dom';
 import { useReducer, useRef, useEffect } from '@wordpress/element';
-import { lock } from '@wordpress/icons';
+import { lock, unlock } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
 
-export default function BlockLockToolbar( { clientId, wrapperRef } ) {
-	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
+export default function BlockLockToolbar( { clientId } ) {
+	const { canLock, isLocked } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
 	);
 
-	const lockButtonRef = useRef( null );
-	const isFirstRender = useRef( true );
-	const hasModalOpened = useRef( false );
+	const hasLockButtonShown = useRef( false );
 
-	const shouldHideBlockLockUI =
-		! canLock || ( canEdit && canMove && canRemove );
-
-	// Restore focus manually on the first focusable element in the toolbar
-	// when the block lock modal is closed and the block is not locked anymore.
-	// See https://github.com/WordPress/gutenberg/issues/51447
+	// If the block lock button has been shown, we don't want to remove it
+	// from the toolbar until the toolbar is rendered again without it.
+	// Removing it beforehand can cause focus loss issues, such as when
+	// unlocking the block from the modal. It needs to return focus from
+	// whence it came, and to do that, we need to leave the button in the toolbar.
 	useEffect( () => {
-		if ( isFirstRender.current ) {
-			isFirstRender.current = false;
-			return;
-		}
-
-		if ( isModalOpen && ! hasModalOpened.current ) {
-			hasModalOpened.current = true;
-		}
-
-		// We only want to allow this effect to happen if the modal has been opened.
-		// The issue is when we're returning focus from the block lock modal to a toolbar,
-		// so it can only happen after a modal has been opened. Without this, the toolbar
-		// will steal focus on rerenders.
-		if (
-			hasModalOpened.current &&
-			! isModalOpen &&
-			shouldHideBlockLockUI
-		) {
-			focus.focusable
-				.find( wrapperRef.current, {
-					sequential: false,
-				} )
-				.find(
-					( element ) =>
-						element.tagName === 'BUTTON' &&
-						element !== lockButtonRef.current
-				)
-				?.focus();
+		if ( isLocked ) {
+			hasLockButtonShown.current = true;
 		}
-		// wrapperRef is a reference object and should be stable
-	}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );
+	}, [ isLocked ] );
 
-	if ( shouldHideBlockLockUI ) {
+	if ( ! canLock || ( ! isLocked && ! hasLockButtonShown.current ) ) {
 		return null;
 	}
 
 	return (
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
-					ref={ lockButtonRef }
-					icon={ lock }
-					label={ __( 'Unlock' ) }
+					icon={ isLocked ? lock : unlock }
+					label={ isLocked ? __( 'Unlock' ) : __( 'Lock' ) }
 					onClick={ toggleModal }
 					aria-expanded={ isModalOpen }
 					aria-haspopup="dialog"