prep build 07/22

.github/workflows/sync-backport-changelog.yml

@@ -14,10 +14,11 @@ jobs:
               with:
                   fetch-depth: 2 # Fetch the last two commits to compare changes
             - name: Check for changes in backport-changelog
+              id: check-for-changes
               run: |
-                  git diff --quiet HEAD^ HEAD -- backport-changelog || echo "changes=true" >> $GITHUB_OUTPUT
+                  git diff --quiet HEAD^ HEAD -- backport-changelog || echo "HAS_CHANGES=1" >> "$GITHUB_OUTPUT"
             - name: Sync Issue
-              if: env.changes == 'true'
+              if: steps.check-for-changes.outputs.HAS_CHANGES
               uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
               with:
                   script: |
@@ -52,18 +53,20 @@ jobs:
                       const endDelimiter = '<!-- END TRUNK BACKPORT CHANGELOG -->';
                       const autoGeneratedContent = `${startDelimiter}\n${processedChangelog}\n${endDelimiter}`;
 
-                      const regex = new RegExp(`${startDelimiter}[\\s\\S]*${endDelimiter}`);
+                      const existingBody = latestIssue.body ?? '';
+
                       let newBody;
 
-                      if (regex.test(latestIssue.body)) {
+                      const regex = new RegExp(`${startDelimiter}[\\s\\S]*${endDelimiter}`);
+                      if (regex.test(existingBody)) {
                         // If delimiters exist, replace the content between them
-                        newBody = latestIssue.body.replace(regex, autoGeneratedContent);
+                        newBody = existingBody.replace(regex, autoGeneratedContent);
                       } else {
                         // If delimiters don't exist, append the new content at the end
-                        newBody = `${latestIssue.body}\n\n${autoGeneratedContent}`;
+                        newBody = `${existingBody}\n\n${autoGeneratedContent}`;
                       }
 
-                      if (newBody.trim() !== latestIssue.body.trim()) {
+                      if (newBody.trim() !== existingBody.trim()) {
                         await github.rest.issues.update({
                           owner: context.repo.owner,
                           repo: context.repo.repo,

backport-changelog/6.7/7020.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7020
+
+* https://github.com/WordPress/gutenberg/pull/63470

docs/reference-guides/interactivity-api/api-reference.md

@@ -840,7 +840,7 @@ const { state } = store("myPlugin", {
 });
 ```
 
-As mentioned above with [`wp-on`](#wp-on), [`wp-on-window`](#wp-on-window), and [`wp-on-document`](#wp-on-document), an async action should be used whenever the `async` versions of the aforementioned directives cannot be used due to the action requiring synchronous access to the `event` object. Synchronous access is reqired whenever the action needs to call `event.preventDefault()`, `event.stopPropagation()`, or `event.stopImmediatePropagation()`. To ensure that the action code does not contribute to a long task, you may manually yield to the main thread after calling the synchronous event API. For example:
+As mentioned above with [`wp-on`](#wp-on), [`wp-on-window`](#wp-on-window), and [`wp-on-document`](#wp-on-document), an async action should be used whenever the `async` versions of the aforementioned directives cannot be used due to the action requiring synchronous access to the `event` object. Synchronous access is required whenever the action needs to call `event.preventDefault()`, `event.stopPropagation()`, or `event.stopImmediatePropagation()`. To ensure that the action code does not contribute to a long task, you may manually yield to the main thread after calling the synchronous event API. For example:
 
 ```js
 // Note: In WordPress 6.6 this splitTask function is exported by @wordpress/interactivity.

lib/compat/wordpress-6.7/block-bindings.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * Temporary compatibility code for new functionalitites/changes related to block bindings APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds the block bindings sources registered in the server to the editor settings.
+ *
+ * This allows them to be bootstrapped in the editor.
+ *
+ * @param array $settings The block editor settings from the `block_editor_settings_all` filter.
+ * @return array The editor settings including the block bindings sources.
+ */
+function gutenberg_add_server_block_bindings_sources_to_editor_settings( $editor_settings ) {
+	// Check if the sources are already exposed in the editor settings.
+	if ( isset( $editor_settings['blockBindingsSources'] ) ) {
+		return $editor_settings;
+	}
+
+	$registered_block_bindings_sources = get_all_registered_block_bindings_sources();
+	if ( ! empty( $registered_block_bindings_sources ) ) {
+		// Initialize array.
+		$editor_settings['blockBindingsSources'] = array();
+		foreach ( $registered_block_bindings_sources as $source_name => $source_properties ) {
+			// Add source with the label to editor settings.
+			$editor_settings['blockBindingsSources'][ $source_name ] = array(
+				'label' => $source_properties->label,
+			);
+			// Add `usesContext` property if exists.
+			if ( ! empty( $source_properties->uses_context ) ) {
+				$editor_settings['blockBindingsSources'][ $source_name ]['usesContext'] = $source_properties->uses_context;
+			}
+		}
+	}
+	return $editor_settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_add_server_block_bindings_sources_to_editor_settings', 10 );

lib/experiments-page.php

@@ -184,7 +184,7 @@ function gutenberg_display_experiment_field( $args ) {
  */
 function gutenberg_display_experiment_section() {
 	?>
-	<p><?php echo __( "The block editor includes experimental features that are useable while they're in development. Select the ones you'd like to enable. These features are likely to change, so avoid using them in production.", 'gutenberg' ); ?></p>
+	<p><?php echo __( "The block editor includes experimental features that are usable while they're in development. Select the ones you'd like to enable. These features are likely to change, so avoid using them in production.", 'gutenberg' ); ?></p>
 
 	<?php
 }

lib/load.php

@@ -169,6 +169,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // WordPress 6.7 compat.
 require __DIR__ . '/compat/wordpress-6.7/blocks.php';
+require __DIR__ . '/compat/wordpress-6.7/block-bindings.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';

packages/block-editor/src/components/global-styles/style.scss

@@ -197,15 +197,22 @@
 	.components-toggle-control {
 		margin-bottom: 0;
 	}
+
 	.components-focal-point-picker-wrapper {
 		background-color: $gray-100;
 		width: 100%;
 		border-radius: $radius-block-ui;
 		border: $border-width solid $gray-300;
 	}
+
 	.components-focal-point-picker__media--image {
 		max-height: 180px;
 	}
+
+	// Override focal picker to avoid a double border.
+	.components-focal-point-picker::after {
+		content: none;
+	}
 }
 
 .block-editor-global-styles-background-panel__hidden-tools-panel-item {

packages/block-editor/src/components/inserter/style.scss

@@ -679,6 +679,12 @@ $block-inserter-tabs-height: 44px;
 			height: 100%;
 		}
 	}
+
+	// Remove doubled-up shadow that occurs when categories panel is opened, only in zoom out.
+	// Shadow cannot be removed from the source, as it is required when not zoomed out.
+	.block-editor-inserter__category-panel {
+		box-shadow: none;
+	}
 }
 
 .show-icon-labels {

packages/block-library/src/template-part/edit/placeholder.js

@@ -4,6 +4,8 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, Button, Spinner } from '@wordpress/components';
 import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -28,6 +30,21 @@ export default function TemplatePartPlaceholder( {
 		templatePartId
 	);
 	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
+
+	const { isBlockBasedTheme, canCreateTemplatePart } = useSelect(
+		( select ) => {
+			const { getCurrentTheme, canUser } = select( coreStore );
+			return {
+				isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+				canCreateTemplatePart: canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_template_part',
+				} ),
+			};
+		},
+		[]
+	);
+
 	const [ showTitleModal, setShowTitleModal ] = useState( false );
 	const areaObject = useTemplatePartArea( area );
 	const createFromBlocks = useCreateTemplatePartFromBlocks(
@@ -39,11 +56,19 @@ export default function TemplatePartPlaceholder( {
 		<Placeholder
 			icon={ areaObject.icon }
 			label={ areaObject.label }
-			instructions={ sprintf(
-				// Translators: %s as template part area title ("Header", "Footer", etc.).
-				__( 'Choose an existing %s or create a new one.' ),
-				areaObject.label.toLowerCase()
-			) }
+			instructions={
+				isBlockBasedTheme
+					? sprintf(
+							// Translators: %s as template part area title ("Header", "Footer", etc.).
+							__( 'Choose an existing %s or create a new one.' ),
+							areaObject.label.toLowerCase()
+					  )
+					: sprintf(
+							// Translators: %s as template part area title ("Header", "Footer", etc.).
+							__( 'Choose an existing %s.' ),
+							areaObject.label.toLowerCase()
+					  )
+			}
 		>
 			{ isResolving && <Spinner /> }
 
@@ -54,7 +79,7 @@ export default function TemplatePartPlaceholder( {
 					</Button>
 				) }
 
-			{ ! isResolving && (
+			{ ! isResolving && isBlockBasedTheme && canCreateTemplatePart && (
 				<Button
 					variant="secondary"
 					onClick={ () => {

packages/block-library/src/template-part/edit/title-modal.js

@@ -14,7 +14,7 @@ import {
 export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 	// Restructure onCreate to set the blocks on local state.
 	// Add modal to confirm title and trigger onCreate.
-	const [ title, setTitle ] = useState( __( 'Untitled Template Part' ) );
+	const [ title, setTitle ] = useState( '' );
 
 	const submitForCreation = ( event ) => {
 		event.preventDefault();
@@ -25,26 +25,40 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 		<Modal
 			title={ sprintf(
 				// Translators: %s as template part area title ("Header", "Footer", etc.).
-				__( 'Name and create your new %s' ),
+				__( 'Create new %s' ),
 				areaLabel.toLowerCase()
 			) }
-			overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
 			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
 		>
 			<form onSubmit={ submitForCreation }>
 				<VStack spacing="5">
 					<TextControl
-						__nextHasNoMarginBottom
 						label={ __( 'Name' ) }
 						value={ title }
 						onChange={ setTitle }
+						placeholder={ __( 'Custom Template Part' ) }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 					/>
 					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								onClose();
+								setTitle( '' );
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
 						<Button
 							variant="primary"
 							type="submit"
 							accessibleWhenDisabled
 							disabled={ ! title.length }
+							__next40pxDefaultSize
 						>
 							{ __( 'Create' ) }
 						</Button>

packages/blocks/src/api/registration.js

@@ -769,7 +769,7 @@ export const unregisterBlockVariation = ( blockName, variationName ) => {
  *
  * @param {Object}   source                    Properties of the source to be registered.
  * @param {string}   source.name               The unique and machine-readable name.
- * @param {string}   source.label              Human-readable label.
+ * @param {string}   [source.label]            Human-readable label.
  * @param {Function} [source.getValues]        Function to get the values from the source.
  * @param {Function} [source.setValues]        Function to update multiple values connected to the source.
  * @param {Function} [source.getPlaceholder]   Function to get the placeholder when the value is undefined.
@@ -800,11 +800,15 @@ export const registerBlockBindingsSource = ( source ) => {
 		canUserEditValue,
 	} = source;
 
-	// Check if the source is already registered.
 	const existingSource = unlock(
 		select( blocksStore )
 	).getBlockBindingsSource( name );
-	if ( existingSource ) {
+
+	/*
+	 * Check if the source has been already registered on the client.
+	 * If the `getValues` property is defined, it could be assumed the source is already registered.
+	 */
+	if ( existingSource?.getValues ) {
 		warning(
 			'Block bindings source "' + name + '" is already registered.'
 		);
@@ -844,12 +848,21 @@ export const registerBlockBindingsSource = ( source ) => {
 	}
 
 	// Check the `label` property is correct.
-	if ( ! label ) {
+	if ( label && existingSource?.label ) {
+		warning(
+			'Block bindings "' +
+				name +
+				'" source label is already defined in the server.'
+		);
+		return;
+	}
+
+	if ( ! label && ! existingSource?.label ) {
 		warning( 'Block bindings source must contain a label.' );
 		return;
 	}
 
-	if ( typeof label !== 'string' ) {
+	if ( label && typeof label !== 'string' ) {
 		warning( 'Block bindings source label must be a string.' );
 		return;
 	}

packages/blocks/src/api/test/registration.js

@@ -1512,6 +1512,22 @@ describe( 'blocks', () => {
 			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
 		} );
 
+		it( 'should not override label from the server', () => {
+			// Simulate bootstrapping a source from the server registration.
+			registerBlockBindingsSource( {
+				name: 'core/server',
+				label: 'Server label',
+			} );
+			// Override the source with a different label in the client.
+			registerBlockBindingsSource( {
+				name: 'core/server',
+				label: 'Client label',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings "core/server" source label is already defined in the server.'
+			);
+		} );
+
 		// Check the `getValues` callback is correct.
 		it( 'should reject invalid getValues callback', () => {
 			registerBlockBindingsSource( {
@@ -1600,6 +1616,7 @@ describe( 'blocks', () => {
 			const source = {
 				name: 'core/test-source',
 				label: 'Test Source',
+				getValues: () => 'value',
 			};
 			registerBlockBindingsSource( source );
 			registerBlockBindingsSource( source );

packages/blocks/src/store/private-actions.js

@@ -69,3 +69,17 @@ export function removeBlockBindingsSource( name ) {
 		name,
 	};
 }
+
+/**
+ * Add bootstrapped block bindings sources, usually initialized from the server.
+ *
+ * @param {string} source Name of the source to bootstrap.
+ */
+export function addBootstrappedBlockBindingsSource( source ) {
+	return {
+		type: 'ADD_BOOTSTRAPPED_BLOCK_BINDINGS_SOURCE',
+		name: source.name,
+		label: source.label,
+		usesContext: source.usesContext,
+	};
+}

packages/blocks/src/store/reducer.js

@@ -377,13 +377,22 @@ export function blockBindingsSources( state = {}, action ) {
 			return {
 				...state,
 				[ action.name ]: {
-					label: action.label,
+					// Don't override the label if it's already set.
+					label: state[ action.name ]?.label || action.label,
 					getValues: action.getValues,
 					setValues: action.setValues,
 					getPlaceholder: action.getPlaceholder,
 					canUserEditValue: action.canUserEditValue,
 				},
 			};
+		case 'ADD_BOOTSTRAPPED_BLOCK_BINDINGS_SOURCE':
+			return {
+				...state,
+				[ action.name ]: {
+					label: action.label,
+					usesContext: action.usesContext,
+				},
+			};
 		case 'REMOVE_BLOCK_BINDINGS_SOURCE':
 			return omit( state, action.name );
 	}

packages/components/CHANGELOG.md

@@ -28,6 +28,10 @@
 -   `Tabs`: Vertical Tabs should be 40px min height. ([#63446](https://github.com/WordPress/gutenberg/pull/63446)).
 -   `ColorPicker`: Use `minimal` variant for `SelectControl` ([#63676](https://github.com/WordPress/gutenberg/pull/63676)).
 
+### Documentation
+
+-   `BaseControl`: Improve the base control help prop documentation. ([#63693](https://github.com/WordPress/gutenberg/pull/63693)).
+
 ## 28.3.0 (2024-07-10)
 
 ### Enhancements