@wordpress/block-editor 15.10.1-next.ba3aee3a2.0 → 15.10.1-next.v.0

package/build-style/content-rtl.css

@@ -208,13 +208,16 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   border: none !important;
   padding: 0 !important;
   opacity: 0;
-  margin: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
 }
 .block-editor-block-list__layout.is-layout-flex:not(.is-vertical) > .is-block-hidden {
   width: 0;
   height: auto;
   align-self: stretch;
   white-space: nowrap !important;
+  margin-right: 0 !important;
+  margin-left: 0 !important;
 }
 .block-editor-block-list__layout [class^=components-] {
   -webkit-user-select: text;

package/build-style/content.css

@@ -208,13 +208,16 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   border: none !important;
   padding: 0 !important;
   opacity: 0;
-  margin: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
 }
 .block-editor-block-list__layout.is-layout-flex:not(.is-vertical) > .is-block-hidden {
   width: 0;
   height: auto;
   align-self: stretch;
   white-space: nowrap !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
 }
 .block-editor-block-list__layout [class^=components-] {
   -webkit-user-select: text;

package/build-style/style-rtl.css

@@ -3569,6 +3569,7 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-fields__header-title {
   flex: 1;
+  margin: 0 !important;
 }
 
 .block-editor-hooks__block-hooks {
@@ -4524,4 +4525,51 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 
 .spacing-sizes-control__wrapper .preset-input-control__icon {
   margin-right: -4px;
+}
+
+.block-editor-block-visibility-modal {
+  z-index: 1000001;
+}
+.block-editor-block-visibility-modal__options {
+  border: 0;
+  padding: 0;
+  list-style: none;
+  margin: 24px 0;
+}
+.block-editor-block-visibility-modal__options-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 16px 0;
+  gap: 24px;
+}
+.block-editor-block-visibility-modal__options-item:last-child {
+  margin: 0;
+}
+.block-editor-block-visibility-modal__options-item--everywhere {
+  flex-direction: column;
+  align-items: start;
+}
+.block-editor-block-visibility-modal__options-checkbox--everywhere {
+  font-weight: 600;
+}
+.block-editor-block-visibility-modal__options-icon--checked {
+  fill: #ddd;
+}
+.block-editor-block-visibility-modal__sub-options {
+  width: 100%;
+  padding-inline-start: 12px;
+}
+.block-editor-block-visibility-modal__description {
+  font-size: 12px;
+  color: #757575;
+}
+
+.block-editor-block-visibility-info {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin: 0 16px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: start;
 }

package/build-style/style.css

@@ -3571,6 +3571,7 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-fields__header-title {
   flex: 1;
+  margin: 0 !important;
 }
 
 .block-editor-hooks__block-hooks {
@@ -4526,4 +4527,51 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 
 .spacing-sizes-control__wrapper .preset-input-control__icon {
   margin-left: -4px;
+}
+
+.block-editor-block-visibility-modal {
+  z-index: 1000001;
+}
+.block-editor-block-visibility-modal__options {
+  border: 0;
+  padding: 0;
+  list-style: none;
+  margin: 24px 0;
+}
+.block-editor-block-visibility-modal__options-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 16px 0;
+  gap: 24px;
+}
+.block-editor-block-visibility-modal__options-item:last-child {
+  margin: 0;
+}
+.block-editor-block-visibility-modal__options-item--everywhere {
+  flex-direction: column;
+  align-items: start;
+}
+.block-editor-block-visibility-modal__options-checkbox--everywhere {
+  font-weight: 600;
+}
+.block-editor-block-visibility-modal__options-icon--checked {
+  fill: #ddd;
+}
+.block-editor-block-visibility-modal__sub-options {
+  width: 100%;
+  padding-inline-start: 12px;
+}
+.block-editor-block-visibility-modal__description {
+  font-size: 12px;
+  color: #757575;
+}
+
+.block-editor-block-visibility-info {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin: 0 16px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: start;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.10.1-next.ba3aee3a2.0",
+	"version": "15.10.1-next.v.0+500f87dd8",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/api-fetch": "^7.37.1-next.ba3aee3a2.0",
-		"@wordpress/base-styles": "^6.13.2-next.ba3aee3a2.0",
-		"@wordpress/blob": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/block-serialization-default-parser": "^5.37.1-next.ba3aee3a2.0",
-		"@wordpress/blocks": "^15.10.1-next.ba3aee3a2.0",
-		"@wordpress/commands": "^1.37.1-next.ba3aee3a2.0",
-		"@wordpress/components": "^32.0.1-next.ba3aee3a2.0",
-		"@wordpress/compose": "^7.37.1-next.ba3aee3a2.0",
-		"@wordpress/data": "^10.37.1-next.ba3aee3a2.0",
-		"@wordpress/dataviews": "^11.2.1-next.ba3aee3a2.0",
-		"@wordpress/date": "^5.37.2-next.ba3aee3a2.0",
-		"@wordpress/deprecated": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/dom": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/element": "^6.37.1-next.ba3aee3a2.0",
-		"@wordpress/escape-html": "^3.37.1-next.ba3aee3a2.0",
-		"@wordpress/global-styles-engine": "^1.4.1-next.ba3aee3a2.0",
-		"@wordpress/hooks": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/html-entities": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/i18n": "^6.10.1-next.ba3aee3a2.0",
-		"@wordpress/icons": "^11.4.1-next.ba3aee3a2.0",
-		"@wordpress/image-cropper": "^1.1.1-next.ba3aee3a2.0",
-		"@wordpress/interactivity": "^6.37.2-next.ba3aee3a2.0",
-		"@wordpress/is-shallow-equal": "^5.37.1-next.ba3aee3a2.0",
-		"@wordpress/keyboard-shortcuts": "^5.37.1-next.ba3aee3a2.0",
-		"@wordpress/keycodes": "^4.38.1-next.ba3aee3a2.0",
-		"@wordpress/notices": "^5.37.1-next.ba3aee3a2.0",
-		"@wordpress/preferences": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/priority-queue": "^3.37.1-next.ba3aee3a2.0",
-		"@wordpress/private-apis": "^1.37.1-next.ba3aee3a2.0",
-		"@wordpress/rich-text": "^7.37.1-next.ba3aee3a2.0",
-		"@wordpress/style-engine": "^2.37.1-next.ba3aee3a2.0",
-		"@wordpress/token-list": "^3.37.1-next.ba3aee3a2.0",
-		"@wordpress/upload-media": "^0.22.1-next.ba3aee3a2.0",
-		"@wordpress/url": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/warning": "^3.37.1-next.ba3aee3a2.0",
-		"@wordpress/wordcount": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/a11y": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/api-fetch": "^7.37.1-next.v.0+500f87dd8",
+		"@wordpress/base-styles": "^6.13.2-next.v.0+500f87dd8",
+		"@wordpress/blob": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/block-serialization-default-parser": "^5.37.1-next.v.0+500f87dd8",
+		"@wordpress/blocks": "^15.10.1-next.v.0+500f87dd8",
+		"@wordpress/commands": "^1.37.1-next.v.0+500f87dd8",
+		"@wordpress/components": "^32.0.1-next.v.0+500f87dd8",
+		"@wordpress/compose": "^7.37.1-next.v.0+500f87dd8",
+		"@wordpress/data": "^10.37.1-next.v.0+500f87dd8",
+		"@wordpress/dataviews": "^11.2.1-next.v.0+500f87dd8",
+		"@wordpress/date": "^5.37.2-next.v.0+500f87dd8",
+		"@wordpress/deprecated": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/dom": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/element": "^6.37.1-next.v.0+500f87dd8",
+		"@wordpress/escape-html": "^3.37.1-next.v.0+500f87dd8",
+		"@wordpress/global-styles-engine": "^1.4.1-next.v.0+500f87dd8",
+		"@wordpress/hooks": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/html-entities": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/i18n": "^6.10.1-next.v.0+500f87dd8",
+		"@wordpress/icons": "^11.4.1-next.v.0+500f87dd8",
+		"@wordpress/image-cropper": "^1.1.1-next.v.0+500f87dd8",
+		"@wordpress/interactivity": "^6.37.2-next.v.0+500f87dd8",
+		"@wordpress/is-shallow-equal": "^5.37.1-next.v.0+500f87dd8",
+		"@wordpress/keyboard-shortcuts": "^5.37.1-next.v.0+500f87dd8",
+		"@wordpress/keycodes": "^4.38.1-next.v.0+500f87dd8",
+		"@wordpress/notices": "^5.38.1-next.v.0+500f87dd8",
+		"@wordpress/preferences": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/priority-queue": "^3.37.1-next.v.0+500f87dd8",
+		"@wordpress/private-apis": "^1.37.1-next.v.0+500f87dd8",
+		"@wordpress/rich-text": "^7.37.1-next.v.0+500f87dd8",
+		"@wordpress/style-engine": "^2.37.1-next.v.0+500f87dd8",
+		"@wordpress/token-list": "^3.37.1-next.v.0+500f87dd8",
+		"@wordpress/upload-media": "^0.22.1-next.v.0+500f87dd8",
+		"@wordpress/url": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/warning": "^3.37.1-next.v.0+500f87dd8",
+		"@wordpress/wordcount": "^4.37.1-next.v.0+500f87dd8",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "67d2e486fcd40c753591cf911ca0659132f519ca"
+	"gitHead": "ca0db0ee8ac2116cd307650136027d26d0cdd9bd"
 }

package/src/components/block-bindings/attribute-control.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 
 /**
  * WordPress dependencies

package/src/components/block-bindings/source-fields-list.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 
 /**
  * WordPress dependencies

package/src/components/block-list/content.scss

@@ -109,7 +109,8 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		border: none !important;
 		padding: 0 !important;
 		opacity: 0;
-		margin: 0 !important;
+		margin-top: 0 !important;
+		margin-bottom: 0 !important;
 	}
 
 	&.is-layout-flex:not(.is-vertical) > .is-block-hidden {
@@ -117,6 +118,8 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		height: auto;
 		align-self: stretch;
 		white-space: nowrap !important;
+		margin-left: 0 !important;
+		margin-right: 0 !important;
 	}
 
 	// Re-enable it on components inside.

package/src/components/block-tools/index.js

@@ -10,11 +10,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { isTextField } from '@wordpress/dom';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
-import { useRef } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import {
 	switchToBlockType,
-	store as blocksStore,
 	hasBlockSupport,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, sprintf, _n } from '@wordpress/i18n';
@@ -33,8 +33,9 @@ import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
-import { cleanEmptyObject } from '../../hooks/utils';
 import usePasteStyles from '../use-paste-styles';
+import { BlockVisibilityModal } from '../block-visibility';
+import { cleanEmptyObject } from '../../hooks/utils';
 
 function selector( select ) {
 	const {
@@ -74,14 +75,14 @@ export default function BlockTools( {
 } ) {
 	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode, isDragging } =
 		useSelect( selector, [] );
-
+	const [ visibilityModalClientIds, setVisibilityModalClientIds ] =
+		useState( null );
 	const isMatch = useShortcutEventMatch();
 	const {
 		getBlocksByClientId,
 		getSelectedBlockClientIds,
 		getBlockRootClientId,
 		isGroupable,
-		getBlockName,
 		getEditedContentOnlySection,
 	} = unlock( useSelect( blockEditorStore ) );
 	const { getGroupingBlockName } = useSelect( blocksStore );
@@ -99,8 +100,8 @@ export default function BlockTools( {
 		moveBlocksUp,
 		moveBlocksDown,
 		expandBlock,
-		updateBlockAttributes,
 		stopEditingContentOnlySection,
+		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
@@ -221,36 +222,41 @@ export default function BlockTools( {
 			if ( clientIds.length ) {
 				event.preventDefault();
 				const blocks = getBlocksByClientId( clientIds );
-				const canToggleBlockVisibility = blocks.every( ( block ) =>
-					hasBlockSupport(
-						getBlockName( block.clientId ),
-						'visibility',
-						true
-					)
+				const supportsBlockVisibility = blocks.every( ( block ) =>
+					hasBlockSupport( block.name, 'visibility', true )
 				);
-				if ( ! canToggleBlockVisibility ) {
+
+				if ( ! supportsBlockVisibility ) {
 					return;
 				}
-				const hasHiddenBlock = blocks.some(
-					( block ) =>
-						block.attributes.metadata?.blockVisibility === false
-				);
-				const attributesByClientId = Object.fromEntries(
-					blocks.map( ( { clientId: mapClientId, attributes } ) => [
-						mapClientId,
-						{
-							metadata: cleanEmptyObject( {
-								...attributes?.metadata,
-								blockVisibility: hasHiddenBlock
-									? undefined
-									: false,
-							} ),
-						},
-					] )
-				);
-				updateBlockAttributes( clientIds, attributesByClientId, {
-					uniqueByBlock: true,
-				} );
+
+				if ( window.__experimentalHideBlocksBasedOnScreenSize ) {
+					// Open the visibility breakpoints modal.
+					setVisibilityModalClientIds( clientIds );
+				} else {
+					const hasHiddenBlock = blocks.some(
+						( block ) =>
+							block.attributes.metadata?.blockVisibility === false
+					);
+					const attributesByClientId = Object.fromEntries(
+						blocks.map(
+							( { clientId: mapClientId, attributes } ) => [
+								mapClientId,
+								{
+									metadata: cleanEmptyObject( {
+										...attributes?.metadata,
+										blockVisibility: hasHiddenBlock
+											? undefined
+											: false,
+									} ),
+								},
+							]
+						)
+					);
+					updateBlockAttributes( clientIds, attributesByClientId, {
+						uniqueByBlock: true,
+					} );
+				}
 			}
 		}
 
@@ -317,6 +323,12 @@ export default function BlockTools( {
 					/>
 				) }
 			</InsertionPointOpenRef.Provider>
+			{ visibilityModalClientIds && (
+				<BlockVisibilityModal
+					clientIds={ visibilityModalClientIds }
+					onClose={ () => setVisibilityModalClientIds( null ) }
+				/>
+			) }
 		</div>
 	);
 }

package/src/components/block-visibility/block-visibility-info.js

@@ -16,7 +16,6 @@ import { unseen } from '@wordpress/icons';
  */
 import { unlock } from '../../lock-unlock';
 import { store as blockEditorStore } from '../../store';
-import './styles.scss';
 
 const { Badge } = unlock( componentsPrivateApis );
 

package/src/components/block-visibility/constants.js

@@ -14,16 +14,20 @@ export const BLOCK_VISIBILITY_VIEWPORTS = {
 	desktop: {
 		label: __( 'Desktop' ),
 		icon: desktop,
-		value: 'desktop',
+		key: 'desktop',
 	},
 	tablet: {
 		label: __( 'Tablet' ),
 		icon: tablet,
-		value: 'tablet',
+		key: 'tablet',
 	},
 	mobile: {
 		label: __( 'Mobile' ),
 		icon: mobile,
-		value: 'mobile',
+		key: 'mobile',
 	},
 };
+
+export const BLOCK_VISIBILITY_VIEWPORT_ENTRIES = Object.entries(
+	BLOCK_VISIBILITY_VIEWPORTS
+);

package/src/components/block-visibility/index.js

@@ -1,3 +1,21 @@
-export { default as BlockVisibilityMenuItem } from './menu-item';
-export { default as BlockVisibilityToolbar } from './toolbar';
-export { useBlockVisibility } from './use-block-visibility';
+export { default as BlockVisibilityModal } from './modal';
+export { default as useBlockVisibility } from './use-block-visibility';
+
+import BlockVisibilityToolbarDefault from './toolbar';
+import BlockVisibilityViewportToolbar from './viewport-toolbar';
+
+import BlockVisibilityMenuItemDefault from './menu-item';
+import BlockVisibilityViewportMenuItem from './viewport-menu-item';
+
+const hasViewportVisibilityExperiment =
+	typeof window !== 'undefined' &&
+	window.__experimentalHideBlocksBasedOnScreenSize;
+
+// Conditionally export the viewport versions when the experimental flag is enabled.
+export const BlockVisibilityMenuItem = hasViewportVisibilityExperiment
+	? BlockVisibilityViewportMenuItem
+	: BlockVisibilityMenuItemDefault;
+
+export const BlockVisibilityToolbar = hasViewportVisibilityExperiment
+	? BlockVisibilityViewportToolbar
+	: BlockVisibilityToolbarDefault;