prep build 07/15

backport-changelog/6.6/7036.md

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

backport-changelog/6.7/6991.md

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

changelog.txt

@@ -1,5 +1,28 @@
 == Changelog ==
 
+= 18.8.0-rc.3 =
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Layout
+- Fix invalid css for nested fullwidth layouts with zero padding applied. ([63436](https://github.com/WordPress/gutenberg/pull/63436))
+
+#### Typography
+- Font Appearance Control: Refactor font appearance fallbacks. ([63215](https://github.com/WordPress/gutenberg/pull/63215))
+
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@mikachan @richtabor
+
+
 = 18.8.0-rc.2 =
 
 

docs/reference-guides/core-blocks.md

@@ -61,7 +61,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
 -	**Name:** core/buttons
 -	**Category:** design
 -	**Allowed Blocks:** core/button
--	**Supports:** align (full, wide), anchor, interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), anchor, color (background, gradients, ~~text~~), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 
 ## Calendar
 
@@ -79,7 +79,7 @@ Display a list of all categories. ([Source](https://github.com/WordPress/gutenbe
 -	**Name:** core/categories
 -	**Category:** widgets
 -	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** displayAsDropdown, showEmpty, showHierarchy, showOnlyTopLevel, showPostCounts
+-	**Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts
 
 ## Code
 
@@ -783,7 +783,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 
 -	**Name:** core/quote
 -	**Category:** text
--	**Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** citation, textAlign, value
 
 ## Read More

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -216,6 +216,7 @@ Background styles.
 | backgroundPosition | string, object |  |
 | backgroundRepeat | string, object |  |
 | backgroundSize | string, object |  |
+| backgroundAttachment | string, object |  |
 
 ---
 

lib/block-supports/background.php

@@ -52,12 +52,12 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$background_styles                       = array();
-	$background_styles['backgroundImage']    = $block_attributes['style']['background']['backgroundImage'] ?? null;
-	$background_styles['backgroundSize']     = $block_attributes['style']['background']['backgroundSize'] ?? null;
-	$background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
-	$background_styles['backgroundRepeat']   = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
-
+	$background_styles                         = array();
+	$background_styles['backgroundImage']      = $block_attributes['style']['background']['backgroundImage'] ?? null;
+	$background_styles['backgroundSize']       = $block_attributes['style']['background']['backgroundSize'] ?? null;
+	$background_styles['backgroundPosition']   = $block_attributes['style']['background']['backgroundPosition'] ?? null;
+	$background_styles['backgroundRepeat']     = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
+	$background_styles['backgroundAttachment'] = $block_attributes['style']['background']['backgroundAttachment'] ?? null;
 	if ( ! empty( $background_styles['backgroundImage'] ) ) {
 		$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
 		// If the background size is set to `contain` and no position is set, set the position to `center`.

lib/block-supports/layout.php

@@ -306,14 +306,22 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			 * They're added separately because padding might only be set on one side.
 			 */
 			if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
-				$padding_right   = $block_spacing_values['declarations']['padding-right'];
+				$padding_right = $block_spacing_values['declarations']['padding-right'];
+				// Add unit if 0.
+				if ( '0' === $padding_right ) {
+					$padding_right = '0px';
+				}
 				$layout_styles[] = array(
 					'selector'     => "$selector > .alignfull",
 					'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
 				);
 			}
 			if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
-				$padding_left    = $block_spacing_values['declarations']['padding-left'];
+				$padding_left = $block_spacing_values['declarations']['padding-left'];
+				// Add unit if 0.
+				if ( '0' === $padding_left ) {
+					$padding_left = '0px';
+				}
 				$layout_styles[] = array(
 					'selector'     => "$selector > .alignfull",
 					'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),

lib/class-wp-theme-json-gutenberg.php

@@ -234,6 +234,7 @@ class WP_Theme_JSON_Gutenberg {
 		'background-position'               => array( 'background', 'backgroundPosition' ),
 		'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
 		'background-size'                   => array( 'background', 'backgroundSize' ),
+		'background-attachment'             => array( 'background', 'backgroundAttachment' ),
 		'border-radius'                     => array( 'border', 'radius' ),
 		'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
 		'border-top-right-radius'           => array( 'border', 'radius', 'topRight' ),
@@ -503,10 +504,11 @@ class WP_Theme_JSON_Gutenberg {
 	 */
 	const VALID_STYLES = array(
 		'background' => array(
-			'backgroundImage'    => null,
-			'backgroundPosition' => null,
-			'backgroundRepeat'   => null,
-			'backgroundSize'     => null,
+			'backgroundImage'      => null,
+			'backgroundAttachment' => null,
+			'backgroundPosition'   => null,
+			'backgroundRepeat'     => null,
+			'backgroundSize'       => null,
 		),
 		'border'     => array(
 			'color'  => null,

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "18.8.0-rc.2",
+	"version": "18.8.0-rc.3",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -110,7 +110,7 @@
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.8.0",
-		"@playwright/test": "1.43.0",
+		"@playwright/test": "1.45.1",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
 		"@react-native/babel-preset": "0.73.10",
 		"@react-native/metro-babel-transformer": "0.73.10",
@@ -303,7 +303,7 @@
 		"lint:pkg-json": "wp-scripts lint-pkg-json . 'packages/*/package.json'",
 		"native": "npm run --prefix packages/react-native-editor",
 		"other:changelog": "node ./bin/plugin/cli.js changelog",
-		"other:check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
+		"other:check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios,@ampproject/remapping,human-signals,fb-watchman,bser,walker,chrome-launcher,lighthouse-logger,chromium-edge-launcher\" \"wp-scripts check-licenses --dev --ignore=jackspeak,path-scurry,package-json-from-dist\"",
 		"preother:check-local-changes": "npm run docs:build",
 		"other:check-local-changes": "node ./bin/check-local-changes.js",
 		"other:cherry-pick": "node ./bin/cherry-pick.mjs",

packages/block-editor/src/components/block-inspector/index.js

@@ -132,6 +132,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 							label={ __( 'Color' ) }
 							className="color-block-support-panel__inner-wrapper"
 						/>
+						<InspectorControls.Slot
+							group="background"
+							label={ __( 'Background image' ) }
+						/>
 						<InspectorControls.Slot
 							group="typography"
 							label={ __( 'Typography' ) }
@@ -285,6 +289,10 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ __( 'Color' ) }
 						className="color-block-support-panel__inner-wrapper"
 					/>
+					<InspectorControls.Slot
+						group="background"
+						label={ __( 'Background image' ) }
+					/>
 					<InspectorControls.Slot
 						group="typography"
 						label={ __( 'Typography' ) }
@@ -298,10 +306,6 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ borderPanelLabel }
 					/>
 					<InspectorControls.Slot group="styles" />
-					<InspectorControls.Slot
-						group="background"
-						label={ __( 'Background image' ) }
-					/>
 					<PositionControls />
 					<div>
 						<AdvancedControls />

packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { chevronRight } from '@wordpress/icons';
 
 import {
@@ -34,6 +34,7 @@ function PatternTransformationsMenu( {
 } ) {
 	const [ showTransforms, setShowTransforms ] = useState( false );
 	const patterns = useTransformedPatterns( statePatterns, blocks );
+
 	if ( ! patterns.length ) {
 		return null;
 	}
@@ -60,21 +61,22 @@ function PatternTransformationsMenu( {
 }
 
 function PreviewPatternsPopover( { patterns, onSelect } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
 	return (
-		<div className="block-editor-block-switcher__popover__preview__parent">
-			<div className="block-editor-block-switcher__popover__preview__container">
-				<Popover
-					className="block-editor-block-switcher__preview__popover"
-					position="bottom right"
-				>
-					<div className="block-editor-block-switcher__preview is-pattern-list-preview">
-						<BlockPatternsList
-							patterns={ patterns }
-							onSelect={ onSelect }
-						/>
-					</div>
-				</Popover>
-			</div>
+		<div className="block-editor-block-switcher__popover-preview-container">
+			<Popover
+				className="block-editor-block-switcher__popover-preview"
+				placement={ isMobile ? 'bottom' : 'right-start' }
+				offset={ 16 }
+			>
+				<div className="block-editor-block-switcher__preview is-pattern-list-preview">
+					<BlockPatternsList
+						patterns={ patterns }
+						onSelect={ onSelect }
+					/>
+				</div>
+			</Popover>
 		</div>
 	);
 }