wip: Hide overflowing navigation menu items

gutenberg.php

@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 5.3
  * Requires PHP: 5.6
- * Version: 9.8.2
+ * Version: 9.9.2
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *

lib/class-wp-theme-json.php

@@ -991,7 +991,7 @@ private function get_block_styles() {
 
 		$metadata = $this->get_blocks_metadata();
 		foreach ( $metadata as $block_selector => $metadata ) {
-			if ( empty( $metadata['selector'] ) || empty( $metadata['supports'] ) ) {
+			if ( empty( $metadata['selector'] ) ) {
 				continue;
 			}
 

package.json

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

packages/block-editor/package.json

@@ -60,7 +60,6 @@
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"react-merge-refs": "^1.0.0",
 		"react-spring": "^8.0.19",
 		"redux-multi": "^0.1.12",
 		"rememo": "^3.0.0",

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

@@ -1,62 +1,57 @@
 /**
  * External dependencies
  */
-import { compact, map } from 'lodash';
 import tinycolor from 'tinycolor2';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import transformStyles from '../../utils/transform-styles';
 
-function syncDarkThemeBodyClassname( node ) {
-	const backgroundColor = window
-		.getComputedStyle( node, null )
-		.getPropertyValue( 'background-color' );
-
-	const { ownerDocument } = node;
-	const body = ownerDocument.getElementsByTagName( 'body' )[ 0 ];
-
-	if ( tinycolor( backgroundColor ).getLuminance() > 0.5 ) {
-		body.classList.remove( 'is-dark-theme' );
-	} else {
-		body.classList.add( 'is-dark-theme' );
-	}
-}
-
-export default function useEditorStyles( styles ) {
-	const nodes = useRef( [] );
+const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
 
+function useDarkThemeBodyClassName( styles ) {
 	return useCallback(
 		( node ) => {
 			if ( ! node ) {
-				nodes.current.forEach( ( styleElement ) =>
-					styleElement.ownerDocument.body.removeChild( styleElement )
-				);
 				return;
 			}
 
-			const updatedStyles = transformStyles(
-				styles,
-				'.editor-styles-wrapper'
-			);
-
 			const { ownerDocument } = node;
-			nodes.current = map( compact( updatedStyles ), ( updatedCSS ) => {
-				const styleElement = ownerDocument.createElement( 'style' );
-				styleElement.innerHTML = updatedCSS;
-				ownerDocument.body.appendChild( styleElement );
-
-				return styleElement;
-			} );
-
-			syncDarkThemeBodyClassname( node );
+			const { defaultView, body } = ownerDocument;
+			const canvas = ownerDocument.querySelector(
+				EDITOR_STYLES_SELECTOR
+			);
+			const backgroundColor = defaultView
+				.getComputedStyle( canvas, null )
+				.getPropertyValue( 'background-color' );
+
+			if ( tinycolor( backgroundColor ).getLuminance() > 0.5 ) {
+				body.classList.remove( 'is-dark-theme' );
+			} else {
+				body.classList.add( 'is-dark-theme' );
+			}
 		},
 		[ styles ]
 	);
 }
+
+export default function EditorStyles( { styles } ) {
+	return (
+		<>
+			{ /* Use an empty style element to have a document reference,
+			     but this could be any element. */ }
+			<style ref={ useDarkThemeBodyClassName( styles ) } />
+			{ transformStyles( styles, EDITOR_STYLES_SELECTOR ).map(
+				( css, index ) => (
+					<style key={ index }>{ css }</style>
+				)
+			) }
+		</>
+	);
+}

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import mergeRefs from 'react-merge-refs';
-
 /**
  * WordPress dependencies
  */
@@ -13,6 +8,7 @@ import {
 	forwardRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useMergeRefs } from '@wordpress/compose';
 
 const BODY_CLASS_NAME = 'editor-styles-wrapper';
 const BLOCK_PREFIX = 'wp-block';
@@ -136,7 +132,7 @@ function setHead( doc, head ) {
 		'<style>body{margin:0}</style>' + head;
 }
 
-function Iframe( { contentRef, children, head, ...props }, ref ) {
+function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
 	const [ iframeDocument, setIframeDocument ] = useState();
 
 	const setRef = useCallback( ( node ) => {
@@ -146,19 +142,24 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 
 		function setDocumentIfReady() {
 			const { contentDocument } = node;
-			const { readyState } = contentDocument;
+			const { readyState, body } = contentDocument;
 
 			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
 				return false;
 			}
 
-			contentRef.current = contentDocument.body;
-			setIframeDocument( contentDocument );
-			setHead( contentDocument, head );
+			if ( typeof contentRef === 'function' ) {
+				contentRef( body );
+			} else if ( contentRef ) {
+				contentRef.current = body;
+			}
+
+			setHead( contentDocument, headHTML );
 			setBodyClassName( contentDocument );
 			styleSheetsCompat( contentDocument );
 			bubbleEvents( contentDocument );
 			setBodyClassName( contentDocument );
+			setIframeDocument( contentDocument );
 
 			return true;
 		}
@@ -176,12 +177,13 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 	return (
 		<iframe
 			{ ...props }
-			ref={ useCallback( mergeRefs( [ ref, setRef ] ), [] ) }
+			ref={ useMergeRefs( [ ref, setRef ] ) }
 			tabIndex="0"
 			title={ __( 'Editor canvas' ) }
 			name="editor-canvas"
 		>
 			{ iframeDocument && createPortal( children, iframeDocument.body ) }
+			{ iframeDocument && createPortal( head, iframeDocument.head ) }
 		</iframe>
 	);
 }

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

@@ -95,7 +95,7 @@ export {
 	useClipboardHandler as __unstableUseClipboardHandler,
 } from './copy-handler';
 export { default as DefaultBlockAppender } from './default-block-appender';
-export { default as __unstableUseEditorStyles } from './editor-styles';
+export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
 export { default as __experimentalSearchForm } from './inserter/search-form';

packages/block-library/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 - Allow setting the `crossOrigin` attribute so the `useTransformImage` hook can use cross-origin sources ([#28255](https://github.com/WordPress/gutenberg/pull/28255/)).
 
+### Bug Fixes
+
+- Fix a regression where the Cover block migration would not work with custom units for `minHeight` ([#28627](https://github.com/WordPress/gutenberg/pull/28627))
+
 ## 2.27.0 (2020-12-17)
 
 ### Enhancement

packages/block-library/package.json

@@ -61,6 +61,7 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"react-easy-crop": "^3.0.0",
+		"react-merge-refs": "^1.1.0",
 		"tinycolor2": "^1.4.2"
 	},
 	"publishConfig": {

packages/block-library/src/cover/deprecated.js

@@ -79,13 +79,19 @@ const deprecated = [
 			minHeight: {
 				type: 'number',
 			},
+			minHeightUnit: {
+				type: 'string',
+			},
 			gradient: {
 				type: 'string',
 			},
 			customGradient: {
 				type: 'string',
 			},
 		},
+		supports: {
+			align: true,
+		},
 		save( { attributes } ) {
 			const {
 				backgroundType,
@@ -216,6 +222,9 @@ const deprecated = [
 				type: 'string',
 			},
 		},
+		supports: {
+			align: true,
+		},
 		save( { attributes } ) {
 			const {
 				backgroundType,
@@ -319,6 +328,9 @@ const deprecated = [
 				type: 'string',
 			},
 		},
+		supports: {
+			align: true,
+		},
 		save( { attributes } ) {
 			const {
 				backgroundType,

packages/block-library/src/embed/style.scss

@@ -13,6 +13,12 @@
 	}
 }
 
+// Supply a min-width when inside a cover block, to prevent it from collapsing.
+.wp-block-cover .wp-block-embed {
+	min-width: 320px;
+	min-height: 240px;
+}
+
 .wp-block-embed {
 	// Supply caption styles to embeds, even if the theme hasn't opted in.
 	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,