Cherry-picked bug fixes for WP 6.5.3

.github/workflows/unit-test.yml

@@ -86,8 +86,6 @@ jobs:
             fail-fast: true
             matrix:
                 php:
-                    - '7.0'
-                    - '7.1'
                     - '7.2'
                     - '7.3'
                     - '7.4'

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

@@ -1230,7 +1230,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 			);
 
 			foreach ( $base_styles_nodes as $base_style_node ) {
-				$stylesheet .= $this->get_layout_styles( $base_style_node );
+				$stylesheet .= $this->get_layout_styles( $base_style_node, $types );
 			}
 		}
 
@@ -1392,7 +1392,7 @@ protected function get_block_classes( $style_nodes ) {
 	 * @param array $block_metadata Metadata about the block to get styles for.
 	 * @return string Layout styles for the block.
 	 */
-	protected function get_layout_styles( $block_metadata ) {
+	protected function get_layout_styles( $block_metadata, $types = array() ) {
 		$block_rules = '';
 		$block_type  = null;
 
@@ -1538,12 +1538,27 @@ protected function get_layout_styles( $block_metadata ) {
 					foreach ( $base_style_rules as $base_style_rule ) {
 						$declarations = array();
 
+						// Skip outputting base styles for flow and constrained layout types if theme doesn't support theme.json. The 'base-layout-styles' type flags this.
+						if ( in_array( 'base-layout-styles', $types, true ) && ( 'default' === $layout_definition['name'] || 'constrained' === $layout_definition['name'] ) ) {
+							continue;
+						}
+
 						if (
 							isset( $base_style_rule['selector'] ) &&
 							preg_match( $layout_selector_pattern, $base_style_rule['selector'] ) &&
 							! empty( $base_style_rule['rules'] )
 						) {
 							foreach ( $base_style_rule['rules'] as $css_property => $css_value ) {
+								// Skip rules that reference content size or wide size if they are not defined in the theme.json.
+								if (
+									is_string( $css_value ) &&
+									( str_contains( $css_value, '--global--content-size' ) || str_contains( $css_value, '--global--wide-size' ) ) &&
+									! isset( $this->theme_json['settings']['layout']['contentSize'] ) &&
+									! isset( $this->theme_json['settings']['layout']['wideSize'] )
+								) {
+									continue;
+								}
+
 								if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
 									$declarations[] = array(
 										'name'  => $css_property,

packages/block-editor/src/components/block-patterns-paging/index.js

@@ -45,6 +45,7 @@ export default function Pagination( {
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'First page' ) }
+							__experimentalIsFocusable
 						>
 							<span>«</span>
 						</Button>
@@ -53,6 +54,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'Previous page' ) }
+							__experimentalIsFocusable
 						>
 							<span>‹</span>
 						</Button>
@@ -75,6 +77,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Next page' ) }
+							__experimentalIsFocusable
 						>
 							<span>›</span>
 						</Button>
@@ -84,6 +87,7 @@ export default function Pagination( {
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Last page' ) }
 							size="default"
+							__experimentalIsFocusable
 						>
 							<span>»</span>
 						</Button>

packages/block-editor/src/components/list-view/use-list-view-drop-zone.js

@@ -556,9 +556,14 @@ export default function useListViewDropZone( {
 	const ref = useDropZone( {
 		dropZoneElement,
 		onDrop( event ) {
+			throttled.cancel();
 			if ( target ) {
 				onBlockDrop( event );
 			}
+			// Use `undefined` value to indicate that the drag has concluded.
+			// This allows styling rules that are active only when a user is
+			// dragging to be removed.
+			setTarget( undefined );
 		},
 		onDragLeave() {
 			throttled.cancel();

packages/block-editor/src/hooks/layout.js

@@ -338,7 +338,11 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
+function BlockWithLayoutStyles( {
+	block: BlockListBlock,
+	props,
+	layoutClasses,
+} ) {
 	const { name, attributes } = props;
 	const id = useInstanceId( BlockListBlock );
 	const { layout } = attributes;
@@ -348,7 +352,6 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 		layout?.inherit || layout?.contentSize || layout?.wideSize
 			? { ...layout, type: 'constrained' }
 			: layout || defaultBlockLayout || {};
-	const layoutClasses = useLayoutClasses( attributes, name );
 
 	const { kebabCase } = unlock( componentsPrivateApis );
 	const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
@@ -395,7 +398,9 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
+		const { name, attributes } = props;
 		const blockSupportsLayout = hasLayoutBlockSupport( props.name );
+		const layoutClasses = useLayoutClasses( attributes, name );
 		const shouldRenderLayoutStyles = useSelect(
 			( select ) => {
 				// The callback returns early to avoid block editor subscription.
@@ -410,11 +415,22 @@ export const withLayoutStyles = createHigherOrderComponent(
 		);
 
 		if ( ! shouldRenderLayoutStyles ) {
-			return <BlockListBlock { ...props } />;
+			return (
+				<BlockListBlock
+					{ ...props }
+					__unstableLayoutClassNames={
+						blockSupportsLayout ? layoutClasses : undefined
+					}
+				/>
+			);
 		}
 
 		return (
-			<BlockWithLayoutStyles block={ BlockListBlock } props={ props } />
+			<BlockWithLayoutStyles
+				block={ BlockListBlock }
+				props={ props }
+				layoutClasses={ layoutClasses }
+			/>
 		);
 	},
 	'withLayoutStyles'

packages/e2e-test-utils-playwright/src/request-utils/site-settings.ts

@@ -19,6 +19,9 @@ type SiteSettings = {
 	posts_per_page: number;
 	default_ping_status: 'open' | 'closed';
 	default_comment_status: 'open' | 'closed';
+	show_on_front: 'posts' | 'page';
+	page_on_front: number;
+	page_for_posts: number;
 };
 
 /**

packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php

@@ -51,4 +51,24 @@
 			data-wp-on--click="actions.clickHandler"
 		>Click me!</button>
 	</div>
+	<div data-wp-context='{"clicked":false,"clickCount":0,"isOpen":true}'>
+		<p
+			data-wp-text="context.clicked"
+			data-testid="multiple handlers clicked"
+		>false</p>
+		<p
+			data-wp-text="context.clickCount"
+			data-testid="multiple handlers clickCount"
+		>0</p>
+		<p
+			data-wp-text="context.isOpen"
+			data-testid="multiple handlers isOpen"
+		>true</p>
+		<button
+			data-testid="multiple handlers button"
+			data-wp-on--click="actions.setClicked"
+			data-wp-on--click--counter="actions.countClick"
+			data-wp-on--click--toggle="actions.toggle"
+		>Click me!</button>
+	</div>
 </div>

packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js

@@ -26,5 +26,17 @@ const { state } = store( 'directive-on', {
 			const context = getContext();
 			context.customEvents += 1;
 		},
+		setClicked: () => {
+			const context = getContext();
+			context.clicked = true;
+		},
+		countClick: () => {
+			const context = getContext();
+			context.clickCount += 1;
+		},
+		toggle: () => {
+			const context = getContext();
+			context.isOpen = ! context.isOpen;
+		},
 	},
 } );

packages/edit-post/src/store/selectors.js

@@ -577,36 +577,55 @@ export function areMetaBoxesInitialized( state ) {
  */
 export const getEditedPostTemplate = createRegistrySelector(
 	( select ) => () => {
+		const {
+			id: postId,
+			type: postType,
+			slug,
+		} = select( editorStore ).getCurrentPost();
+		const { getSite, getEditedEntityRecord, getEntityRecords } =
+			select( coreStore );
+		const siteSettings = getSite();
+		// First check if the current page is set as the posts page.
+		const isPostsPage = +postId === siteSettings?.page_for_posts;
+		if ( isPostsPage ) {
+			const defaultTemplateId = select( coreStore ).getDefaultTemplateId(
+				{ slug: 'home' }
+			);
+			return getEditedEntityRecord(
+				'postType',
+				'wp_template',
+				defaultTemplateId
+			);
+		}
 		const currentTemplate =
 			select( editorStore ).getEditedPostAttribute( 'template' );
 		if ( currentTemplate ) {
-			const templateWithSameSlug = select( coreStore )
-				.getEntityRecords( 'postType', 'wp_template', { per_page: -1 } )
-				?.find( ( template ) => template.slug === currentTemplate );
+			const templateWithSameSlug = getEntityRecords(
+				'postType',
+				'wp_template',
+				{ per_page: -1 }
+			)?.find( ( template ) => template.slug === currentTemplate );
 			if ( ! templateWithSameSlug ) {
 				return templateWithSameSlug;
 			}
-			return select( coreStore ).getEditedEntityRecord(
+			return getEditedEntityRecord(
 				'postType',
 				'wp_template',
 				templateWithSameSlug.id
 			);
 		}
-
-		const post = select( editorStore ).getCurrentPost();
 		let slugToCheck;
 		// In `draft` status we might not have a slug available, so we use the `single`
 		// post type templates slug(ex page, single-post, single-product etc..).
 		// Pages do not need the `single` prefix in the slug to be prioritized
 		// through template hierarchy.
-		if ( post.slug ) {
+		if ( slug ) {
 			slugToCheck =
-				post.type === 'page'
-					? `${ post.type }-${ post.slug }`
-					: `single-${ post.type }-${ post.slug }`;
+				postType === 'page'
+					? `${ postType }-${ slug }`
+					: `single-${ postType }-${ slug }`;
 		} else {
-			slugToCheck =
-				post.type === 'page' ? 'page' : `single-${ post.type }`;
+			slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
 		}
 		const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
 			slug: slugToCheck,

packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -181,7 +181,6 @@ function InstalledFonts() {
 							) ) }
 						</>
 					) }
-					<Spacer margin={ 16 } />
 				</NavigatorScreen>
 
 				<NavigatorScreen path="/fontFamily">

packages/edit-site/src/components/global-styles/font-library-modal/style.scss

@@ -1,3 +1,7 @@
+// Fixed height for the modal footer.
+// Ensures that the footer is always visible when the modal content is scrollable.
+$footer-height: 70px;
+
 .font-library-modal {
 	// @todo: If a new prop is added to the Modal component that constrains
 	// the content width, we should use that prop instead of this style.
@@ -15,6 +19,7 @@
 
 	.components-modal__content {
 		padding-top: 0;
+		margin-bottom: $footer-height;
 	}
 
 	.font-library-modal__subtitle {
@@ -40,6 +45,7 @@
 		position: absolute;
 		bottom: $grid-unit-40;
 		width: 100%;
+		height: $footer-height;
 		background-color: $white;
 	}
 }