Add mechanism to convert media queries into "element" queries

packages/block-editor/README.md

@@ -407,6 +407,16 @@ _Type_
 
 -   `Object` 
 
+<a name="transformMediaQueries" href="#transformMediaQueries">#</a> **transformMediaQueries**
+
+Applies a series of CSS rule transforms to convert simple media queries into element queries handled by css-element-queries package.
+Initializes css-element-queries mechanism.
+
+_Parameters_
+
+-   _elementQuerySelectors_ `Array`: CSS selector whose element query dimensions will depend on.
+-   _partialPaths_ `Array`: CSS rules.
+
 <a name="transformStyles" href="#transformStyles">#</a> **transformStyles**
 
 Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.

packages/block-editor/package.json

@@ -43,6 +43,7 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",
+		"css-element-queries": "^1.2.1",
 		"diff": "^3.5.0",
 		"dom-scroll-into-view": "^1.2.1",
 		"inherits": "^2.0.3",

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

@@ -47,7 +47,9 @@
 	}
 
 	// Don't add side padding for nested blocks.
-	.block-editor-block-list__block & {
+	// When the previous breakpoint is converted into an element query its specificity increases.
+	// We need hight specificity selector to make sure the rule applies
+	.block-editor-block-list__block.block-editor-block-list__block.block-editor-block-list__block.block-editor-block-list__block & {
 		// Compensate for side UI.
 		padding-left: 0;
 		padding-right: 0;

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

@@ -105,7 +105,6 @@
 	}
 
 	@include break-medium {
-		position: relative;
 
 		.block-editor-block-switcher__preview {
 			border-left: $border-width solid $light-gray-500;

packages/block-editor/src/components/default-block-appender/style.scss

@@ -43,7 +43,7 @@
 
 // Quick shortcuts, left and right.
 .block-editor-block-list__empty-block-inserter, // Empty paragraph
-.block-editor-default-block-appender .block-editor-inserter, // Empty appender
+.block-editor-block-list__layout .wp-block.block-editor-default-block-appender .block-editor-inserter, // Empty appender
 .block-editor-inserter-with-shortcuts { // Right side quick shortcuts
 	position: absolute;
 	top: 0;

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

@@ -1 +1,2 @@
 export { default as transformStyles } from './transform-styles';
+export { default as transformMediaQueries } from './transform-media-queries';

packages/block-editor/src/utils/transform-media-queries/index.js

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import {
+	filter,
+	get,
+	map,
+	some,
+} from 'lodash';
+import ElementQueries from 'css-element-queries/src/ElementQueries';
+
+/**
+ * Internal dependencies
+ */
+import traverse from '../transform-styles/traverse';
+import wrap from '../transform-styles/transforms/wrap';
+
+function parseMediaQueryRule( rule ) {
+	// Make sure there are no multiple media rules.
+	if ( ! rule.media || rule.media.length !== 1 ) {
+		return null;
+	}
+
+	const mediaQueryCondition = rule.media[ 0 ];
+	// Verify if it is a simple media query that could be transformed into an element query.
+	const mediaMatches = mediaQueryCondition.match( /^\(((min|max)-(width|height)):([^\(]*?)\)$/ );
+	if ( ! mediaMatches || ! mediaMatches[ 1 ] || ! mediaMatches[ 4 ] ) {
+		return null;
+	}
+	return {
+		property: mediaMatches[ 1 ].trim(),
+		value: mediaMatches[ 4 ].trim(),
+	};
+}
+
+function getStyleSheetsThatMatchPaths( partialPaths ) {
+	return filter(
+		get( window, [ 'document', 'styleSheets' ], [] ),
+		( styleSheet ) => {
+			return (
+				styleSheet.href &&
+				some(
+					partialPaths,
+					( partialPath ) => {
+						return styleSheet.href.includes( partialPath );
+					}
+				)
+			);
+		}
+	);
+}
+
+function getMediaQueryInnerText( rule ) {
+	return map(
+		rule.cssRules,
+		( { cssText } ) => ( cssText )
+	).join( '\n' );
+}
+
+function getTransformedMediaQuery( elementQuerySelectors, rule ) {
+	const parsedMediaQuery = parseMediaQueryRule( rule );
+	if ( ! parsedMediaQuery ) {
+		return;
+	}
+	const mediaQueryText = getMediaQueryInnerText( rule );
+	return map(
+		elementQuerySelectors,
+		( selector ) => traverse(
+			mediaQueryText,
+			wrap( `${ selector }[${ parsedMediaQuery.property }~="${ parsedMediaQuery.value }"]` )
+		)
+	).join( '\n' );
+}
+
+/**
+ * Applies a series of CSS rule transforms to convert simple media queries into element queries handled by css-element-queries package.
+ * Initializes css-element-queries mechanism.
+ *
+ * @param {Array} elementQuerySelectors CSS selector whose element query dimensions will depend on.
+ * @param {Array}  partialPaths         CSS rules.
+ */
+export default function transformMediaQueries( elementQuerySelectors, partialPaths ) {
+	if ( ! window || ! window.document ) {
+		return;
+	}
+
+	const styleSheets = getStyleSheetsThatMatchPaths( partialPaths );
+
+	const rulesToProcess = [];
+
+	styleSheets.forEach(
+		( styleSheet ) => {
+			for ( let i = 0; i < styleSheet.rules.length; ) {
+				const rule = styleSheet.rules[ i ];
+				const transformedMediaQuery = getTransformedMediaQuery( elementQuerySelectors, rule );
+				if ( transformedMediaQuery ) {
+					rulesToProcess.push( transformedMediaQuery );
+					// Remove the rule.
+					styleSheet.removeRule( i );
+				} else {
+					++i;
+				}
+			}
+		}
+	);
+	if ( ! rulesToProcess.length ) {
+		return;
+	}
+
+	const elementQueriesCode = rulesToProcess.join( '\n' );
+	const node = document.createElement( 'style' );
+	node.innerHTML = elementQueriesCode;
+	document.body.appendChild( node );
+	ElementQueries.listen();
+	ElementQueries.init();
+}

packages/components/src/popover/index.js

@@ -448,6 +448,6 @@ const Popover = ( {
 
 const PopoverContainer = Popover;
 
-PopoverContainer.Slot = () => <Slot bubblesVirtually name={ SLOT_NAME } />;
+PopoverContainer.Slot = ( { className } ) => <Slot className={ className } bubblesVirtually name={ SLOT_NAME } />;
 
 export default PopoverContainer;

packages/e2e-test-utils/src/set-browser-viewport.js

@@ -10,6 +10,7 @@ import { waitForWindowDimensions } from './wait-for-window-dimensions';
  */
 export async function setBrowserViewport( type ) {
 	const allowedDimensions = {
+		wide: { width: 1280, height: 700 },
 		large: { width: 960, height: 700 },
 		small: { width: 600, height: 700 },
 	};

packages/e2e-tests/config/setup-test-framework.js

@@ -46,7 +46,7 @@ jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
 
 async function setupBrowser() {
 	await clearLocalStorage();
-	await setBrowserViewport( 'large' );
+	await setBrowserViewport( 'wide' );
 }
 
 /**

packages/e2e-tests/specs/post-visibility.test.js

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Post visibility', () => {
-	[ 'large', 'small' ].forEach( ( viewport ) => {
+	[ 'wide', 'large', 'small' ].forEach( ( viewport ) => {
 		it( `can be changed when the viewport is ${ viewport }`, async () => {
 			await setBrowserViewport( viewport );
 

packages/e2e-tests/specs/publishing.test.js

@@ -97,7 +97,7 @@ describe( 'Publishing', () => {
 			} );
 
 			afterEach( async () => {
-				await setBrowserViewport( 'large' );
+				await setBrowserViewport( 'wide' );
 				if ( werePrePublishChecksEnabled ) {
 					await enablePrePublishChecks();
 				}

packages/e2e-tests/specs/sidebar.test.js

@@ -20,7 +20,7 @@ describe( 'Sidebar', () => {
 	} );
 
 	it( 'should have sidebar visible at the start with document sidebar active on desktop', async () => {
-		await setBrowserViewport( 'large' );
+		await setBrowserViewport( 'wide' );
 		await createNewPost();
 		const { nodesCount, content, height, width } = await page.$$eval( ACTIVE_SIDEBAR_TAB_SELECTOR, ( nodes ) => {
 			const firstNode = nodes[ 0 ];
@@ -51,7 +51,7 @@ describe( 'Sidebar', () => {
 	} );
 
 	it( 'should close the sidebar when resizing from desktop to mobile', async () => {
-		await setBrowserViewport( 'large' );
+		await setBrowserViewport( 'wide' );
 		await createNewPost();
 
 		const sidebars = await page.$$( SIDEBAR_SELECTOR );
@@ -65,14 +65,14 @@ describe( 'Sidebar', () => {
 	} );
 
 	it( 'should reopen sidebar the sidebar when resizing from mobile to desktop if the sidebar was closed automatically', async () => {
-		await setBrowserViewport( 'large' );
+		await setBrowserViewport( 'wide' );
 		await createNewPost();
 		await setBrowserViewport( 'small' );
 
 		const sidebarsMobile = await page.$$( SIDEBAR_SELECTOR );
 		expect( sidebarsMobile ).toHaveLength( 0 );
 
-		await setBrowserViewport( 'large' );
+		await setBrowserViewport( 'wide' );
 
 		const sidebarsDesktop = await page.$$( SIDEBAR_SELECTOR );
 		expect( sidebarsDesktop ).toHaveLength( 1 );

packages/edit-post/src/components/layout/index.js

@@ -128,7 +128,7 @@ function Layout( {
 					}
 				</>
 			) }
-			<Popover.Slot />
+			<Popover.Slot className="edit-post-popover-slot" />
 			<PluginArea />
 		</FocusReturnProvider>
 	);

packages/edit-widgets/src/components/customizer-edit-widgets-initializer/index.js

@@ -26,7 +26,7 @@ function CustomizerEditWidgetsInitializer( { settings } ) {
 			>
 				<WidgetAreas blockEditorSettings={ settings } />
 			</div>
-			<Popover.Slot />
+			<Popover.Slot className="edit-widgets-popover-slot" />
 		</SlotFillProvider>
 	);
 }

packages/edit-widgets/src/components/layout/index.js

@@ -32,7 +32,7 @@ function Layout( { blockEditorSettings } ) {
 					blockEditorSettings={ blockEditorSettings }
 				/>
 			</div>
-			<Popover.Slot />
+			<Popover.Slot className="edit-widgets-popover-slot" />
 		</SlotFillProvider>
 	);
 }

packages/edit-widgets/src/components/widget-areas/index.js

@@ -1,16 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
+import { transformMediaQueries } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import WidgetArea from '../widget-area';
 
 function WidgetAreas( { areas, blockEditorSettings } ) {
+	useEffect( () => {
+		// Todo: The partial paths should be a setting that includes styles added by the plugins.
+		transformMediaQueries( [
+			'.edit-widgets-widget-areas',
+			'.edit-widgets-popover-slot',
+		], [
+			'block-editor/style.css',
+			'block-library/style.css',
+			'block-library/theme.css',
+			'block-library/editor.css',
+			'format-library/style.css',
+		] );
+	}, [] );
 	const [ selectedArea, setSelectedArea ] = useState( 0 );
 	const onBlockSelectedInArea = useMemo(
 		() => areas.map( ( value, index ) => ( () => {
@@ -19,16 +33,20 @@ function WidgetAreas( { areas, blockEditorSettings } ) {
 		[ areas, setSelectedArea ]
 	);
 
-	return areas.map( ( { id }, index ) => (
-		<WidgetArea
-			isSelectedArea={ index === selectedArea }
-			onBlockSelected={ onBlockSelectedInArea[ index ] }
-			blockEditorSettings={ blockEditorSettings }
-			key={ id }
-			id={ id }
-			initialOpen={ index === 0 }
-		/>
-	) );
+	return (
+		<div className="edit-widgets-widget-areas">
+			{ areas.map( ( { id }, index ) => (
+				<WidgetArea
+					isSelectedArea={ index === selectedArea }
+					onBlockSelected={ onBlockSelectedInArea[ index ] }
+					blockEditorSettings={ blockEditorSettings }
+					key={ id }
+					id={ id }
+					initialOpen={ index === 0 }
+				/>
+			) ) }
+		</div>
+	);
 }
 
 export default compose( [

packages/editor/src/components/provider/index.js

@@ -11,7 +11,11 @@ import { compose } from '@wordpress/compose';
 import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { BlockEditorProvider, transformStyles } from '@wordpress/block-editor';
+import {
+	BlockEditorProvider,
+	transformMediaQueries,
+	transformStyles,
+} from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -116,6 +120,17 @@ class EditorProvider extends Component {
 			return;
 		}
 
+		// Todo: The partial paths should be a setting that includes styles added by the plugins.
+		transformMediaQueries( [
+			'.editor-styles-wrapper',
+			'.edit-post-popover-slot',
+		], [
+			'block-editor/style.css',
+			'block-library/style.css',
+			'block-library/theme.css',
+			'block-library/editor.css',
+			'format-library/style.css',
+		] );
 		const updatedStyles = transformStyles( this.props.settings.styles, '.editor-styles-wrapper' );
 
 		map( updatedStyles, ( updatedCSS ) => {