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

package/build-module/store/utils.mjs

@@ -7,7 +7,7 @@ import { STORE_NAME } from "./constants.mjs";
 import { getSectionRootClientId, isSectionBlock } from "./private-selectors.mjs";
 import { getBlockEditingMode } from "./selectors.mjs";
 import { INSERTER_PATTERN_TYPES } from "../components/inserter/block-patterns-tab/utils.mjs";
-var isFiltered = Symbol("isFiltered");
+var isFiltered = /* @__PURE__ */ Symbol("isFiltered");
 var parsedPatternCache = /* @__PURE__ */ new WeakMap();
 var grammarMapCache = /* @__PURE__ */ new WeakMap();
 function mapUserPattern(userPattern, __experimentalUserPatternCategories = []) {

package/build-module/store/utils.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/store/utils.js"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { parse } from '@wordpress/blocks';\nimport { parse as grammarParse } from '@wordpress/block-serialization-default-parser';\n\n/**\n * Internal dependencies\n */\nimport { selectBlockPatternsKey } from './private-keys';\nimport { unlock } from '../lock-unlock';\nimport { STORE_NAME } from './constants';\nimport { getSectionRootClientId, isSectionBlock } from './private-selectors';\nimport { getBlockEditingMode } from './selectors';\nimport { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';\n\nexport const isFiltered = Symbol( 'isFiltered' );\nconst parsedPatternCache = new WeakMap();\nconst grammarMapCache = new WeakMap();\n\nexport function mapUserPattern(\n\tuserPattern,\n\t__experimentalUserPatternCategories = []\n) {\n\treturn {\n\t\tname: `core/block/${ userPattern.id }`,\n\t\tid: userPattern.id,\n\t\ttype: INSERTER_PATTERN_TYPES.user,\n\t\ttitle: userPattern.title?.raw,\n\t\tcategories: userPattern.wp_pattern_category?.map( ( catId ) => {\n\t\t\tconst category = __experimentalUserPatternCategories.find(\n\t\t\t\t( { id } ) => id === catId\n\t\t\t);\n\t\t\treturn category ? category.slug : catId;\n\t\t} ),\n\t\tcontent: userPattern.content?.raw,\n\t\tsyncStatus: userPattern.wp_pattern_sync_status,\n\t};\n}\n\nfunction parsePattern( pattern ) {\n\tconst blocks = parse( pattern.content, {\n\t\t__unstableSkipMigrationLogs: true,\n\t} );\n\tif ( blocks.length === 1 ) {\n\t\tblocks[ 0 ].attributes = {\n\t\t\t...blocks[ 0 ].attributes,\n\t\t\tmetadata: {\n\t\t\t\t...( blocks[ 0 ].attributes.metadata || {} ),\n\t\t\t\tcategories: pattern.categories,\n\t\t\t\tpatternName: pattern.name,\n\t\t\t\tname: blocks[ 0 ].attributes.metadata?.name || pattern.title,\n\t\t\t},\n\t\t};\n\t}\n\treturn {\n\t\t...pattern,\n\t\tblocks,\n\t};\n}\n\nexport function getParsedPattern( pattern ) {\n\tlet parsedPattern = parsedPatternCache.get( pattern );\n\tif ( ! parsedPattern ) {\n\t\tparsedPattern = parsePattern( pattern );\n\t\tparsedPatternCache.set( pattern, parsedPattern );\n\t}\n\treturn parsedPattern;\n}\n\nexport function getGrammar( pattern ) {\n\tlet grammarMap = grammarMapCache.get( pattern );\n\tif ( ! grammarMap ) {\n\t\tgrammarMap = grammarParse( pattern.content );\n\t\t// Block names are null only at the top level for whitespace.\n\t\tgrammarMap = grammarMap.filter( ( block ) => block.blockName !== null );\n\t\tgrammarMapCache.set( pattern, grammarMap );\n\t}\n\treturn grammarMap;\n}\n\nexport const checkAllowList = ( list, item, defaultResult = null ) => {\n\tif ( typeof list === 'boolean' ) {\n\t\treturn list;\n\t}\n\tif ( Array.isArray( list ) ) {\n\t\t// TODO: when there is a canonical way to detect that we are editing a post\n\t\t// the following check should be changed to something like:\n\t\t// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )\n\t\tif ( list.includes( 'core/post-content' ) && item === null ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn list.includes( item );\n\t}\n\treturn defaultResult;\n};\n\nexport const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {\n\tif ( typeof allowedBlockTypes === 'boolean' ) {\n\t\treturn allowedBlockTypes;\n\t}\n\n\tconst blocksQueue = [ ...blocks ];\n\twhile ( blocksQueue.length > 0 ) {\n\t\tconst block = blocksQueue.shift();\n\n\t\tconst isAllowed = checkAllowList(\n\t\t\tallowedBlockTypes,\n\t\t\tblock.name || block.blockName,\n\t\t\ttrue\n\t\t);\n\t\tif ( ! isAllowed ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tblock.innerBlocks?.forEach( ( innerBlock ) => {\n\t\t\tblocksQueue.push( innerBlock );\n\t\t} );\n\t}\n\n\treturn true;\n};\n\nexport const getAllPatternsDependants = ( select ) => ( state ) => {\n\treturn [\n\t\tstate.settings.__experimentalBlockPatterns,\n\t\tstate.settings.__experimentalUserPatternCategories,\n\t\tstate.settings.__experimentalReusableBlocks,\n\t\tstate.settings[ selectBlockPatternsKey ]?.( select ),\n\t\tstate.blockPatterns,\n\t\tunlock( select( STORE_NAME ) ).getReusableBlocks(),\n\t];\n};\n\nexport const getInsertBlockTypeDependants = () => ( state, rootClientId ) => {\n\treturn [\n\t\tstate.blockListSettings[ rootClientId ],\n\t\tstate.blocks.byClientId.get( rootClientId ),\n\t\tstate.settings.allowedBlockTypes,\n\t\tstate.settings.templateLock,\n\t\tgetBlockEditingMode( state, rootClientId ),\n\t\tgetSectionRootClientId( state ),\n\t\tisSectionBlock( state, rootClientId ),\n\t];\n};\n"],
-  "mappings": "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",
+  "mappings": ";AAGA,SAAS,aAAa;AACtB,SAAS,SAAS,oBAAoB;AAKtC,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB,sBAAsB;AACvD,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AAEhC,IAAM,aAAa,uBAAQ,YAAa;AAC/C,IAAM,qBAAqB,oBAAI,QAAQ;AACvC,IAAM,kBAAkB,oBAAI,QAAQ;AAE7B,SAAS,eACf,aACA,sCAAsC,CAAC,GACtC;AACD,SAAO;AAAA,IACN,MAAM,cAAe,YAAY,EAAG;AAAA,IACpC,IAAI,YAAY;AAAA,IAChB,MAAM,uBAAuB;AAAA,IAC7B,OAAO,YAAY,OAAO;AAAA,IAC1B,YAAY,YAAY,qBAAqB,IAAK,CAAE,UAAW;AAC9D,YAAM,WAAW,oCAAoC;AAAA,QACpD,CAAE,EAAE,GAAG,MAAO,OAAO;AAAA,MACtB;AACA,aAAO,WAAW,SAAS,OAAO;AAAA,IACnC,CAAE;AAAA,IACF,SAAS,YAAY,SAAS;AAAA,IAC9B,YAAY,YAAY;AAAA,EACzB;AACD;AAEA,SAAS,aAAc,SAAU;AAChC,QAAM,SAAS,MAAO,QAAQ,SAAS;AAAA,IACtC,6BAA6B;AAAA,EAC9B,CAAE;AACF,MAAK,OAAO,WAAW,GAAI;AAC1B,WAAQ,CAAE,EAAE,aAAa;AAAA,MACxB,GAAG,OAAQ,CAAE,EAAE;AAAA,MACf,UAAU;AAAA,QACT,GAAK,OAAQ,CAAE,EAAE,WAAW,YAAY,CAAC;AAAA,QACzC,YAAY,QAAQ;AAAA,QACpB,aAAa,QAAQ;AAAA,QACrB,MAAM,OAAQ,CAAE,EAAE,WAAW,UAAU,QAAQ,QAAQ;AAAA,MACxD;AAAA,IACD;AAAA,EACD;AACA,SAAO;AAAA,IACN,GAAG;AAAA,IACH;AAAA,EACD;AACD;AAEO,SAAS,iBAAkB,SAAU;AAC3C,MAAI,gBAAgB,mBAAmB,IAAK,OAAQ;AACpD,MAAK,CAAE,eAAgB;AACtB,oBAAgB,aAAc,OAAQ;AACtC,uBAAmB,IAAK,SAAS,aAAc;AAAA,EAChD;AACA,SAAO;AACR;AAEO,SAAS,WAAY,SAAU;AACrC,MAAI,aAAa,gBAAgB,IAAK,OAAQ;AAC9C,MAAK,CAAE,YAAa;AACnB,iBAAa,aAAc,QAAQ,OAAQ;AAE3C,iBAAa,WAAW,OAAQ,CAAE,UAAW,MAAM,cAAc,IAAK;AACtE,oBAAgB,IAAK,SAAS,UAAW;AAAA,EAC1C;AACA,SAAO;AACR;AAEO,IAAM,iBAAiB,CAAE,MAAM,MAAM,gBAAgB,SAAU;AACrE,MAAK,OAAO,SAAS,WAAY;AAChC,WAAO;AAAA,EACR;AACA,MAAK,MAAM,QAAS,IAAK,GAAI;AAI5B,QAAK,KAAK,SAAU,mBAAoB,KAAK,SAAS,MAAO;AAC5D,aAAO;AAAA,IACR;AACA,WAAO,KAAK,SAAU,IAAK;AAAA,EAC5B;AACA,SAAO;AACR;AAEO,IAAM,0BAA0B,CAAE,QAAQ,sBAAuB;AACvE,MAAK,OAAO,sBAAsB,WAAY;AAC7C,WAAO;AAAA,EACR;AAEA,QAAM,cAAc,CAAE,GAAG,MAAO;AAChC,SAAQ,YAAY,SAAS,GAAI;AAChC,UAAM,QAAQ,YAAY,MAAM;AAEhC,UAAM,YAAY;AAAA,MACjB;AAAA,MACA,MAAM,QAAQ,MAAM;AAAA,MACpB;AAAA,IACD;AACA,QAAK,CAAE,WAAY;AAClB,aAAO;AAAA,IACR;AAEA,UAAM,aAAa,QAAS,CAAE,eAAgB;AAC7C,kBAAY,KAAM,UAAW;AAAA,IAC9B,CAAE;AAAA,EACH;AAEA,SAAO;AACR;AAEO,IAAM,2BAA2B,CAAE,WAAY,CAAE,UAAW;AAClE,SAAO;AAAA,IACN,MAAM,SAAS;AAAA,IACf,MAAM,SAAS;AAAA,IACf,MAAM,SAAS;AAAA,IACf,MAAM,SAAU,sBAAuB,IAAK,MAAO;AAAA,IACnD,MAAM;AAAA,IACN,OAAQ,OAAQ,UAAW,CAAE,EAAE,kBAAkB;AAAA,EAClD;AACD;AAEO,IAAM,+BAA+B,MAAM,CAAE,OAAO,iBAAkB;AAC5E,SAAO;AAAA,IACN,MAAM,kBAAmB,YAAa;AAAA,IACtC,MAAM,OAAO,WAAW,IAAK,YAAa;AAAA,IAC1C,MAAM,SAAS;AAAA,IACf,MAAM,SAAS;AAAA,IACf,oBAAqB,OAAO,YAAa;AAAA,IACzC,uBAAwB,KAAM;AAAA,IAC9B,eAAgB,OAAO,YAAa;AAAA,EACrC;AACD;",
   "names": []
 }

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

@@ -503,6 +503,9 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before {
   content: "";
 }
+.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after {
+  display: none;
+}
 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
   border: 1px solid #1e1e1e;
   padding-left: 6px;
@@ -518,6 +521,9 @@ iframe[name=editor-canvas] {
   right: auto;
   margin-right: -1px;
 }
+.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after {
+  display: inline-flex;
+}
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-mover__move-button-container,
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   border-right: 1px solid #1e1e1e;
@@ -3563,6 +3569,7 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-fields__header-title {
   flex: 1;
+  margin: 0 !important;
 }
 
 .block-editor-hooks__block-hooks {
@@ -3786,7 +3793,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   display: inline-flex;
   height: 2px;
   position: absolute;
-  left: 0;
   top: 15px;
   width: 2px;
 }
@@ -4519,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

@@ -503,6 +503,9 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before {
   content: "";
 }
+.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after {
+  display: none;
+}
 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
   border: 1px solid #1e1e1e;
   padding-right: 6px;
@@ -518,6 +521,9 @@ iframe[name=editor-canvas] {
   left: auto;
   margin-left: -1px;
 }
+.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after {
+  display: inline-flex;
+}
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-mover__move-button-container,
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   border-left: 1px solid #1e1e1e;
@@ -3565,6 +3571,7 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-fields__header-title {
   flex: 1;
+  margin: 0 !important;
 }
 
 .block-editor-hooks__block-hooks {
@@ -3788,7 +3795,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   display: inline-flex;
   height: 2px;
   position: absolute;
-  right: 0;
   top: 15px;
   width: 2px;
 }
@@ -4521,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.79a2f3cdd.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.79a2f3cdd.0",
-		"@wordpress/api-fetch": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/base-styles": "^6.13.2-next.79a2f3cdd.0",
-		"@wordpress/blob": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/block-serialization-default-parser": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/blocks": "^15.10.1-next.79a2f3cdd.0",
-		"@wordpress/commands": "^1.37.1-next.79a2f3cdd.0",
-		"@wordpress/components": "^32.0.1-next.79a2f3cdd.0",
-		"@wordpress/compose": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/data": "^10.37.1-next.79a2f3cdd.0",
-		"@wordpress/dataviews": "^11.2.1-next.79a2f3cdd.0",
-		"@wordpress/date": "^5.37.2-next.79a2f3cdd.0",
-		"@wordpress/deprecated": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/dom": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/element": "^6.37.1-next.79a2f3cdd.0",
-		"@wordpress/escape-html": "^3.37.1-next.79a2f3cdd.0",
-		"@wordpress/global-styles-engine": "^1.4.1-next.79a2f3cdd.0",
-		"@wordpress/hooks": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/html-entities": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/i18n": "^6.10.1-next.79a2f3cdd.0",
-		"@wordpress/icons": "^11.4.1-next.79a2f3cdd.0",
-		"@wordpress/image-cropper": "^1.1.1-next.79a2f3cdd.0",
-		"@wordpress/interactivity": "^6.37.1-next.79a2f3cdd.0",
-		"@wordpress/is-shallow-equal": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/keyboard-shortcuts": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/keycodes": "^4.38.1-next.79a2f3cdd.0",
-		"@wordpress/notices": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/preferences": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/priority-queue": "^3.37.1-next.79a2f3cdd.0",
-		"@wordpress/private-apis": "^1.37.1-next.79a2f3cdd.0",
-		"@wordpress/rich-text": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/style-engine": "^2.37.1-next.79a2f3cdd.0",
-		"@wordpress/token-list": "^3.37.1-next.79a2f3cdd.0",
-		"@wordpress/upload-media": "^0.22.1-next.79a2f3cdd.0",
-		"@wordpress/url": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/warning": "^3.37.1-next.79a2f3cdd.0",
-		"@wordpress/wordcount": "^4.37.1-next.79a2f3cdd.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": "6a324496a37d9a333a11d4d7fe5fb93b8152a5ba"
+	"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/block.js

@@ -38,8 +38,9 @@ import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import { PrivateBlockContext } from './private-block-context';
-
+import { useBlockVisibility } from '../block-visibility/';
 import { unlock } from '../../lock-unlock';
+import { deviceTypeKey } from '../../store/private-keys';
 
 /**
  * Merges wrapper props with special handling for classNames and styles.
@@ -607,16 +608,17 @@ function BlockListBlockProvider( props ) {
 			const attributes = getBlockAttributes( clientId );
 			const { name: blockName, isValid } = blockWithoutAttributes;
 			const blockType = getBlockType( blockName );
+			const settings = getSettings();
 			const {
 				supportsLayout,
 				isPreviewMode,
 				__experimentalBlockBindingsSupportedAttributes,
-			} = getSettings();
-			const { isBlockHidden: _isBlockHidden } = unlock(
-				select( blockEditorStore )
-			);
+			} = settings;
 			const bindableAttributes =
 				__experimentalBlockBindingsSupportedAttributes?.[ blockName ];
+			const blockVisibility = attributes?.metadata?.blockVisibility;
+			const deviceType =
+				settings?.[ deviceTypeKey ]?.toLowerCase() || 'desktop';
 
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const previewContext = {
@@ -635,8 +637,9 @@ function BlockListBlockProvider( props ) {
 					? getBlockDefaultClassName( blockName )
 					: undefined,
 				blockTitle: blockType?.title,
-				isBlockHidden: _isBlockHidden( clientId ),
 				bindableAttributes,
+				blockVisibility,
+				deviceType,
 			};
 
 			// When in preview mode, we can avoid a lot of selection and
@@ -725,6 +728,8 @@ function BlockListBlockProvider( props ) {
 				originalBlockClientId: isInvalid
 					? blocksWithSameName[ 0 ]
 					: false,
+				blockVisibility,
+				deviceType,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -770,10 +775,17 @@ function BlockListBlockProvider( props ) {
 		className,
 		defaultClassName,
 		originalBlockClientId,
-		isBlockHidden,
 		bindableAttributes,
+		blockVisibility,
+		deviceType,
 	} = selectedProps;
 
+	// Use block visibility hook with data from existing useSelect to avoid extra subscription
+	const { isBlockCurrentlyHidden } = useBlockVisibility( {
+		blockVisibility,
+		deviceType,
+	} );
+
 	// Users of the editor.BlockListBlock filter used to be able to
 	// access the block prop.
 	// Ideally these blocks would rely on the clientId prop only.
@@ -823,12 +835,14 @@ function BlockListBlockProvider( props ) {
 		originalBlockClientId,
 		themeSupportsLayout,
 		canMove,
-		isBlockHidden,
+		isBlockCurrentlyHidden,
 		bindableAttributes,
+		blockVisibility,
+		deviceType,
 	};
 
 	if (
-		isBlockHidden &&
+		isBlockCurrentlyHidden &&
 		! isSelected &&
 		! isMultiSelected &&
 		! hasChildSelected

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-list/use-block-props/index.js

@@ -30,6 +30,7 @@ import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
 import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
+import { useBlockVisibility } from '../../block-visibility/';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -102,7 +103,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isSectionBlock,
 		isWithinSectionBlock,
 		canMove,
-		isBlockHidden,
+		blockVisibility,
+		deviceType,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -138,6 +140,12 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		  }
 		: {};
 
+	// Use block visibility hook with data from context to avoid extra subscription.
+	const { isBlockCurrentlyHidden } = useBlockVisibility( {
+		blockVisibility,
+		deviceType,
+	} );
+
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
 		warning(
@@ -185,7 +193,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'has-editable-outline': hasEditableOutline,
 				'has-negative-margin': hasNegativeMargin,
 				'is-editing-content-only-section': isEditingContentOnlySection,
-				'is-block-hidden': isBlockHidden,
+				'is-block-hidden': isBlockCurrentlyHidden,
 			},
 			className,
 			props.className,

package/src/components/block-toolbar/style.scss

@@ -141,7 +141,6 @@
 			display: inline-flex;
 			height: 2px;
 			position: absolute;
-			right: 0;
 			top: $grid-unit-20 - $border-width;
 			width: 2px;
 		}

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>
 	);
 }