@wordpress/block-library 8.15.0 → 8.16.0

package/build-module/navigation/view-modal.js

@@ -1,11 +1,19 @@
+/*eslint-env browser*/
+
 /**
  * External dependencies
  */
 import MicroModal from 'micromodal'; // Responsive navigation toggle.
 
-function navigationToggleModal(modal) {
+/**
+ * Toggles responsive navigation.
+ *
+ * @param {HTMLDivElement} modal
+ * @param {boolean}        isHidden
+ */
+
+function navigationToggleModal(modal, isHidden) {
   const dialogContainer = modal.querySelector(`.wp-block-navigation__responsive-dialog`);
-  const isHidden = 'true' === modal.getAttribute('aria-hidden');
   modal.classList.toggle('has-modal-open', !isHidden);
   dialogContainer.toggleAttribute('aria-modal', !isHidden);
 
@@ -18,41 +26,95 @@ function navigationToggleModal(modal) {
   } // Add a class to indicate the modal is open.
 
 
-  const htmlElement = document.documentElement;
-  htmlElement.classList.toggle('has-modal-open');
+  document.documentElement.classList.toggle('has-modal-open');
 }
+/**
+ * Checks whether the provided link is an anchor on the current page.
+ *
+ * @param {HTMLAnchorElement} node
+ * @return {boolean} Is anchor.
+ */
+
 
 function isLinkToAnchorOnCurrentPage(node) {
   return node.hash && node.protocol === window.location.protocol && node.host === window.location.host && node.pathname === window.location.pathname && node.search === window.location.search;
 }
+/**
+ * Handles effects after opening the modal.
+ *
+ * @param {HTMLDivElement} modal
+ */
 
-window.addEventListener('load', () => {
-  MicroModal.init({
-    onShow: navigationToggleModal,
-    onClose: navigationToggleModal,
-    openClass: 'is-menu-open'
-  }); // Close modal automatically on clicking anchor links inside modal.
-
-  const navigationLinks = document.querySelectorAll('.wp-block-navigation-item__content');
-  navigationLinks.forEach(function (link) {
-    // Ignore non-anchor links and anchor links which open on a new tab.
-    if (!isLinkToAnchorOnCurrentPage(link) || link.attributes?.target === '_blank') {
-      return;
-    } // Find the specific parent modal for this link
-    // since .close() won't work without an ID if there are
-    // multiple navigation menus in a post/page.
-
-
-    const modal = link.closest('.wp-block-navigation__responsive-container');
-    const modalId = modal?.getAttribute('id');
-    link.addEventListener('click', () => {
-      // check if modal exists and is open before trying to close it
-      // otherwise Micromodal will toggle the `has-modal-open` class
-      // on the html tag which prevents scrolling
-      if (modalId && modal.classList.contains('has-modal-open')) {
-        MicroModal.close(modalId);
-      }
-    });
+
+function onShow(modal) {
+  navigationToggleModal(modal, false);
+  modal.addEventListener('click', handleAnchorLinkClicksInsideModal, {
+    passive: true
+  });
+}
+/**
+ * Handles effects after closing the modal.
+ *
+ * @param {HTMLDivElement} modal
+ */
+
+
+function onClose(modal) {
+  navigationToggleModal(modal, true);
+  modal.removeEventListener('click', handleAnchorLinkClicksInsideModal, {
+    passive: true
   });
+}
+/**
+ * Handle clicks to anchor links in modal using event delegation by closing modal automatically
+ *
+ * @param {UIEvent} event
+ */
+
+
+function handleAnchorLinkClicksInsideModal(event) {
+  const link = event.target.closest('.wp-block-navigation-item__content');
+
+  if (!(link instanceof HTMLAnchorElement)) {
+    return;
+  } // Ignore non-anchor links and anchor links which open on a new tab.
+
+
+  if (!isLinkToAnchorOnCurrentPage(link) || link.attributes?.target === '_blank') {
+    return;
+  } // Find the specific parent modal for this link
+  // since .close() won't work without an ID if there are
+  // multiple navigation menus in a post/page.
+
+
+  const modal = link.closest('.wp-block-navigation__responsive-container');
+  const modalId = modal?.getAttribute('id');
+
+  if (!modalId) {
+    return;
+  } // check if modal exists and is open before trying to close it
+  // otherwise Micromodal will toggle the `has-modal-open` class
+  // on the html tag which prevents scrolling
+
+
+  if (modalId && modal.classList.contains('has-modal-open')) {
+    MicroModal.close(modalId);
+  }
+} // MicroModal.init() does not support event delegation for the open trigger, so here MicroModal.show() is called manually.
+
+
+document.addEventListener('click', event => {
+  /** @type {HTMLElement} */
+  const target = event.target;
+
+  if (target.dataset.micromodalTrigger) {
+    MicroModal.show(target.dataset.micromodalTrigger, {
+      onShow,
+      onClose,
+      openClass: 'is-menu-open'
+    });
+  }
+}, {
+  passive: true
 });
 //# sourceMappingURL=view-modal.js.map

package/build-module/navigation/view-modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation/view-modal.js"],"names":["MicroModal","navigationToggleModal","modal","dialogContainer","querySelector","isHidden","getAttribute","classList","toggle","toggleAttribute","removeAttribute","setAttribute","htmlElement","document","documentElement","isLinkToAnchorOnCurrentPage","node","hash","protocol","window","location","host","pathname","search","addEventListener","init","onShow","onClose","openClass","navigationLinks","querySelectorAll","forEach","link","attributes","target","closest","modalId","contains","close"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB,C,CAEA;;AACA,SAASC,qBAAT,CAAgCC,KAAhC,EAAwC;AACvC,QAAMC,eAAe,GAAGD,KAAK,CAACE,aAAN,CACtB,yCADsB,CAAxB;AAIA,QAAMC,QAAQ,GAAG,WAAWH,KAAK,CAACI,YAAN,CAAoB,aAApB,CAA5B;AAEAJ,EAAAA,KAAK,CAACK,SAAN,CAAgBC,MAAhB,CAAwB,gBAAxB,EAA0C,CAAEH,QAA5C;AACAF,EAAAA,eAAe,CAACM,eAAhB,CAAiC,YAAjC,EAA+C,CAAEJ,QAAjD;;AAEA,MAAKA,QAAL,EAAgB;AACfF,IAAAA,eAAe,CAACO,eAAhB,CAAiC,MAAjC;AACAP,IAAAA,eAAe,CAACO,eAAhB,CAAiC,YAAjC;AACA,GAHD,MAGO;AACNP,IAAAA,eAAe,CAACQ,YAAhB,CAA8B,MAA9B,EAAsC,QAAtC;AACAR,IAAAA,eAAe,CAACQ,YAAhB,CAA8B,YAA9B,EAA4C,MAA5C;AACA,GAhBsC,CAkBvC;;;AACA,QAAMC,WAAW,GAAGC,QAAQ,CAACC,eAA7B;AACAF,EAAAA,WAAW,CAACL,SAAZ,CAAsBC,MAAtB,CAA8B,gBAA9B;AACA;;AAED,SAASO,2BAAT,CAAsCC,IAAtC,EAA6C;AAC5C,SACCA,IAAI,CAACC,IAAL,IACAD,IAAI,CAACE,QAAL,KAAkBC,MAAM,CAACC,QAAP,CAAgBF,QADlC,IAEAF,IAAI,CAACK,IAAL,KAAcF,MAAM,CAACC,QAAP,CAAgBC,IAF9B,IAGAL,IAAI,CAACM,QAAL,KAAkBH,MAAM,CAACC,QAAP,CAAgBE,QAHlC,IAIAN,IAAI,CAACO,MAAL,KAAgBJ,MAAM,CAACC,QAAP,CAAgBG,MALjC;AAOA;;AAEDJ,MAAM,CAACK,gBAAP,CAAyB,MAAzB,EAAiC,MAAM;AACtCxB,EAAAA,UAAU,CAACyB,IAAX,CAAiB;AAChBC,IAAAA,MAAM,EAAEzB,qBADQ;AAEhB0B,IAAAA,OAAO,EAAE1B,qBAFO;AAGhB2B,IAAAA,SAAS,EAAE;AAHK,GAAjB,EADsC,CAOtC;;AACA,QAAMC,eAAe,GAAGhB,QAAQ,CAACiB,gBAAT,CACvB,oCADuB,CAAxB;AAIAD,EAAAA,eAAe,CAACE,OAAhB,CAAyB,UAAWC,IAAX,EAAkB;AAC1C;AACA,QACC,CAAEjB,2BAA2B,CAAEiB,IAAF,CAA7B,IACAA,IAAI,CAACC,UAAL,EAAiBC,MAAjB,KAA4B,QAF7B,EAGE;AACD;AACA,KAPyC,CAS1C;AACA;AACA;;;AACA,UAAMhC,KAAK,GAAG8B,IAAI,CAACG,OAAL,CACb,4CADa,CAAd;AAGA,UAAMC,OAAO,GAAGlC,KAAK,EAAEI,YAAP,CAAqB,IAArB,CAAhB;AAEA0B,IAAAA,IAAI,CAACR,gBAAL,CAAuB,OAAvB,EAAgC,MAAM;AACrC;AACA;AACA;AACA,UAAKY,OAAO,IAAIlC,KAAK,CAACK,SAAN,CAAgB8B,QAAhB,CAA0B,gBAA1B,CAAhB,EAA+D;AAC9DrC,QAAAA,UAAU,CAACsC,KAAX,CAAkBF,OAAlB;AACA;AACD,KAPD;AAQA,GAzBD;AA0BA,CAtCD","sourcesContent":["/**\n * External dependencies\n */\nimport MicroModal from 'micromodal';\n\n// Responsive navigation toggle.\nfunction navigationToggleModal( modal ) {\n\tconst dialogContainer = modal.querySelector(\n\t\t`.wp-block-navigation__responsive-dialog`\n\t);\n\n\tconst isHidden = 'true' === modal.getAttribute( 'aria-hidden' );\n\n\tmodal.classList.toggle( 'has-modal-open', ! isHidden );\n\tdialogContainer.toggleAttribute( 'aria-modal', ! isHidden );\n\n\tif ( isHidden ) {\n\t\tdialogContainer.removeAttribute( 'role' );\n\t\tdialogContainer.removeAttribute( 'aria-modal' );\n\t} else {\n\t\tdialogContainer.setAttribute( 'role', 'dialog' );\n\t\tdialogContainer.setAttribute( 'aria-modal', 'true' );\n\t}\n\n\t// Add a class to indicate the modal is open.\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.toggle( 'has-modal-open' );\n}\n\nfunction isLinkToAnchorOnCurrentPage( node ) {\n\treturn (\n\t\tnode.hash &&\n\t\tnode.protocol === window.location.protocol &&\n\t\tnode.host === window.location.host &&\n\t\tnode.pathname === window.location.pathname &&\n\t\tnode.search === window.location.search\n\t);\n}\n\nwindow.addEventListener( 'load', () => {\n\tMicroModal.init( {\n\t\tonShow: navigationToggleModal,\n\t\tonClose: navigationToggleModal,\n\t\topenClass: 'is-menu-open',\n\t} );\n\n\t// Close modal automatically on clicking anchor links inside modal.\n\tconst navigationLinks = document.querySelectorAll(\n\t\t'.wp-block-navigation-item__content'\n\t);\n\n\tnavigationLinks.forEach( function ( link ) {\n\t\t// Ignore non-anchor links and anchor links which open on a new tab.\n\t\tif (\n\t\t\t! isLinkToAnchorOnCurrentPage( link ) ||\n\t\t\tlink.attributes?.target === '_blank'\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the specific parent modal for this link\n\t\t// since .close() won't work without an ID if there are\n\t\t// multiple navigation menus in a post/page.\n\t\tconst modal = link.closest(\n\t\t\t'.wp-block-navigation__responsive-container'\n\t\t);\n\t\tconst modalId = modal?.getAttribute( 'id' );\n\n\t\tlink.addEventListener( 'click', () => {\n\t\t\t// check if modal exists and is open before trying to close it\n\t\t\t// otherwise Micromodal will toggle the `has-modal-open` class\n\t\t\t// on the html tag which prevents scrolling\n\t\t\tif ( modalId && modal.classList.contains( 'has-modal-open' ) ) {\n\t\t\t\tMicroModal.close( modalId );\n\t\t\t}\n\t\t} );\n\t} );\n} );\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/navigation/view-modal.js"],"names":["MicroModal","navigationToggleModal","modal","isHidden","dialogContainer","querySelector","classList","toggle","toggleAttribute","removeAttribute","setAttribute","document","documentElement","isLinkToAnchorOnCurrentPage","node","hash","protocol","window","location","host","pathname","search","onShow","addEventListener","handleAnchorLinkClicksInsideModal","passive","onClose","removeEventListener","event","link","target","closest","HTMLAnchorElement","attributes","modalId","getAttribute","contains","close","dataset","micromodalTrigger","show","openClass"],"mappings":"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","sourcesContent":["/*eslint-env browser*/\n/**\n * External dependencies\n */\nimport MicroModal from 'micromodal';\n\n// Responsive navigation toggle.\n\n/**\n * Toggles responsive navigation.\n *\n * @param {HTMLDivElement} modal\n * @param {boolean}        isHidden\n */\nfunction navigationToggleModal( modal, isHidden ) {\n\tconst dialogContainer = modal.querySelector(\n\t\t`.wp-block-navigation__responsive-dialog`\n\t);\n\n\tmodal.classList.toggle( 'has-modal-open', ! isHidden );\n\tdialogContainer.toggleAttribute( 'aria-modal', ! isHidden );\n\n\tif ( isHidden ) {\n\t\tdialogContainer.removeAttribute( 'role' );\n\t\tdialogContainer.removeAttribute( 'aria-modal' );\n\t} else {\n\t\tdialogContainer.setAttribute( 'role', 'dialog' );\n\t\tdialogContainer.setAttribute( 'aria-modal', 'true' );\n\t}\n\n\t// Add a class to indicate the modal is open.\n\tdocument.documentElement.classList.toggle( 'has-modal-open' );\n}\n\n/**\n * Checks whether the provided link is an anchor on the current page.\n *\n * @param {HTMLAnchorElement} node\n * @return {boolean} Is anchor.\n */\nfunction isLinkToAnchorOnCurrentPage( node ) {\n\treturn (\n\t\tnode.hash &&\n\t\tnode.protocol === window.location.protocol &&\n\t\tnode.host === window.location.host &&\n\t\tnode.pathname === window.location.pathname &&\n\t\tnode.search === window.location.search\n\t);\n}\n\n/**\n * Handles effects after opening the modal.\n *\n * @param {HTMLDivElement} modal\n */\nfunction onShow( modal ) {\n\tnavigationToggleModal( modal, false );\n\tmodal.addEventListener( 'click', handleAnchorLinkClicksInsideModal, {\n\t\tpassive: true,\n\t} );\n}\n\n/**\n * Handles effects after closing the modal.\n *\n * @param {HTMLDivElement} modal\n */\nfunction onClose( modal ) {\n\tnavigationToggleModal( modal, true );\n\tmodal.removeEventListener( 'click', handleAnchorLinkClicksInsideModal, {\n\t\tpassive: true,\n\t} );\n}\n\n/**\n * Handle clicks to anchor links in modal using event delegation by closing modal automatically\n *\n * @param {UIEvent} event\n */\nfunction handleAnchorLinkClicksInsideModal( event ) {\n\tconst link = event.target.closest( '.wp-block-navigation-item__content' );\n\tif ( ! ( link instanceof HTMLAnchorElement ) ) {\n\t\treturn;\n\t}\n\n\t// Ignore non-anchor links and anchor links which open on a new tab.\n\tif (\n\t\t! isLinkToAnchorOnCurrentPage( link ) ||\n\t\tlink.attributes?.target === '_blank'\n\t) {\n\t\treturn;\n\t}\n\n\t// Find the specific parent modal for this link\n\t// since .close() won't work without an ID if there are\n\t// multiple navigation menus in a post/page.\n\tconst modal = link.closest( '.wp-block-navigation__responsive-container' );\n\tconst modalId = modal?.getAttribute( 'id' );\n\tif ( ! modalId ) {\n\t\treturn;\n\t}\n\n\t// check if modal exists and is open before trying to close it\n\t// otherwise Micromodal will toggle the `has-modal-open` class\n\t// on the html tag which prevents scrolling\n\tif ( modalId && modal.classList.contains( 'has-modal-open' ) ) {\n\t\tMicroModal.close( modalId );\n\t}\n}\n\n// MicroModal.init() does not support event delegation for the open trigger, so here MicroModal.show() is called manually.\ndocument.addEventListener(\n\t'click',\n\t( event ) => {\n\t\t/** @type {HTMLElement} */\n\t\tconst target = event.target;\n\n\t\tif ( target.dataset.micromodalTrigger ) {\n\t\t\tMicroModal.show( target.dataset.micromodalTrigger, {\n\t\t\t\tonShow,\n\t\t\t\tonClose,\n\t\t\t\topenClass: 'is-menu-open',\n\t\t\t} );\n\t\t}\n\t},\n\t{ passive: true }\n);\n"]}

package/build-module/navigation/view.js

@@ -1,59 +1,91 @@
+/*eslint-env browser*/
 // Open on click functionality.
-function closeSubmenus(element) {
-  element.querySelectorAll('[aria-expanded="true"]').forEach(function (toggle) {
+
+/**
+ * Keep track of whether a submenu is open to short-circuit delegated event listeners.
+ *
+ * @type {boolean}
+ */
+let hasOpenSubmenu = false;
+/**
+ * Close submenu items for a navigation item.
+ *
+ * @param {HTMLElement} navigationItem - Either a NAV or LI element.
+ */
+
+function closeSubmenus(navigationItem) {
+  navigationItem.querySelectorAll('[aria-expanded="true"]').forEach(function (toggle) {
     toggle.setAttribute('aria-expanded', 'false');
   });
+  hasOpenSubmenu = false;
 }
+/**
+ * Toggle submenu on click.
+ *
+ * @param {HTMLButtonElement} buttonToggle
+ */
+
 
-function toggleSubmenuOnClick(event) {
-  const buttonToggle = event.target.closest('[aria-expanded]');
-  const isSubmenuOpen = buttonToggle.getAttribute('aria-expanded');
+function toggleSubmenuOnClick(buttonToggle) {
+  const isSubmenuOpen = buttonToggle.getAttribute('aria-expanded') === 'true';
+  const navigationItem = buttonToggle.closest('.wp-block-navigation-item');
 
-  if (isSubmenuOpen === 'true') {
-    closeSubmenus(buttonToggle.closest('.wp-block-navigation-item'));
+  if (isSubmenuOpen) {
+    closeSubmenus(navigationItem);
   } else {
     // Close all sibling submenus.
-    const parentElement = buttonToggle.closest('.wp-block-navigation-item');
     const navigationParent = buttonToggle.closest('.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list');
-    navigationParent.querySelectorAll('.wp-block-navigation-item').forEach(function (child) {
-      if (child !== parentElement) {
+    navigationParent.querySelectorAll('.wp-block-navigation-item').forEach(child => {
+      if (child !== navigationItem) {
         closeSubmenus(child);
       }
     }); // Open submenu.
 
     buttonToggle.setAttribute('aria-expanded', 'true');
+    hasOpenSubmenu = true;
   }
-} // Necessary for some themes such as TT1 Blocks, where
-// scripts could be loaded before the body.
+} // Open on button click or close on click outside.
 
 
-window.addEventListener('load', () => {
-  const submenuButtons = document.querySelectorAll('.wp-block-navigation-submenu__toggle');
-  submenuButtons.forEach(function (button) {
-    button.addEventListener('click', toggleSubmenuOnClick);
-  }); // Close on click outside.
+document.addEventListener('click', function (event) {
+  const target = event.target;
+  const button = target.closest('.wp-block-navigation-submenu__toggle'); // Close any other open submenus.
 
-  document.addEventListener('click', function (event) {
+  if (hasOpenSubmenu) {
     const navigationBlocks = document.querySelectorAll('.wp-block-navigation');
     navigationBlocks.forEach(function (block) {
-      if (!block.contains(event.target)) {
+      if (!block.contains(target)) {
         closeSubmenus(block);
       }
     });
-  }); // Close on focus outside or escape key.
+  } // Now open the submenu if one was clicked.
 
-  document.addEventListener('keyup', function (event) {
-    const submenuBlocks = document.querySelectorAll('.wp-block-navigation-item.has-child');
-    submenuBlocks.forEach(function (block) {
-      if (!block.contains(event.target)) {
-        closeSubmenus(block);
-      } else if (event.key === 'Escape') {
-        const toggle = block.querySelector('[aria-expanded="true"]');
-        closeSubmenus(block); // Focus the submenu trigger so focus does not get trapped in the closed submenu.
 
-        toggle?.focus();
-      }
-    });
+  if (button instanceof HTMLButtonElement) {
+    toggleSubmenuOnClick(button);
+  }
+}, {
+  passive: true
+}); // Close on focus outside or escape key.
+
+document.addEventListener('keyup', function (event) {
+  // Abort if there aren't any submenus open anyway.
+  if (!hasOpenSubmenu) {
+    return;
+  }
+
+  const submenuBlocks = document.querySelectorAll('.wp-block-navigation-item.has-child');
+  submenuBlocks.forEach(function (block) {
+    if (!block.contains(event.target)) {
+      closeSubmenus(block);
+    } else if (event.key === 'Escape') {
+      const toggle = block.querySelector('[aria-expanded="true"]');
+      closeSubmenus(block); // Focus the submenu trigger so focus does not get trapped in the closed submenu.
+
+      toggle?.focus();
+    }
   });
+}, {
+  passive: true
 });
 //# sourceMappingURL=view.js.map

package/build-module/navigation/view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation/view.js"],"names":["closeSubmenus","element","querySelectorAll","forEach","toggle","setAttribute","toggleSubmenuOnClick","event","buttonToggle","target","closest","isSubmenuOpen","getAttribute","parentElement","navigationParent","child","window","addEventListener","submenuButtons","document","button","navigationBlocks","block","contains","submenuBlocks","key","querySelector","focus"],"mappings":"AAAA;AACA,SAASA,aAAT,CAAwBC,OAAxB,EAAkC;AACjCA,EAAAA,OAAO,CACLC,gBADF,CACoB,wBADpB,EAEEC,OAFF,CAEW,UAAWC,MAAX,EAAoB;AAC7BA,IAAAA,MAAM,CAACC,YAAP,CAAqB,eAArB,EAAsC,OAAtC;AACA,GAJF;AAKA;;AAED,SAASC,oBAAT,CAA+BC,KAA/B,EAAuC;AACtC,QAAMC,YAAY,GAAGD,KAAK,CAACE,MAAN,CAAaC,OAAb,CAAsB,iBAAtB,CAArB;AACA,QAAMC,aAAa,GAAGH,YAAY,CAACI,YAAb,CAA2B,eAA3B,CAAtB;;AAEA,MAAKD,aAAa,KAAK,MAAvB,EAAgC;AAC/BX,IAAAA,aAAa,CAAEQ,YAAY,CAACE,OAAb,CAAsB,2BAAtB,CAAF,CAAb;AACA,GAFD,MAEO;AACN;AACA,UAAMG,aAAa,GAAGL,YAAY,CAACE,OAAb,CACrB,2BADqB,CAAtB;AAGA,UAAMI,gBAAgB,GAAGN,YAAY,CAACE,OAAb,CACxB,+FADwB,CAAzB;AAGAI,IAAAA,gBAAgB,CACdZ,gBADF,CACoB,2BADpB,EAEEC,OAFF,CAEW,UAAWY,KAAX,EAAmB;AAC5B,UAAKA,KAAK,KAAKF,aAAf,EAA+B;AAC9Bb,QAAAA,aAAa,CAAEe,KAAF,CAAb;AACA;AACD,KANF,EARM,CAeN;;AACAP,IAAAA,YAAY,CAACH,YAAb,CAA2B,eAA3B,EAA4C,MAA5C;AACA;AACD,C,CAED;AACA;;;AACAW,MAAM,CAACC,gBAAP,CAAyB,MAAzB,EAAiC,MAAM;AACtC,QAAMC,cAAc,GAAGC,QAAQ,CAACjB,gBAAT,CACtB,sCADsB,CAAvB;AAIAgB,EAAAA,cAAc,CAACf,OAAf,CAAwB,UAAWiB,MAAX,EAAoB;AAC3CA,IAAAA,MAAM,CAACH,gBAAP,CAAyB,OAAzB,EAAkCX,oBAAlC;AACA,GAFD,EALsC,CAStC;;AACAa,EAAAA,QAAQ,CAACF,gBAAT,CAA2B,OAA3B,EAAoC,UAAWV,KAAX,EAAmB;AACtD,UAAMc,gBAAgB,GAAGF,QAAQ,CAACjB,gBAAT,CACxB,sBADwB,CAAzB;AAGAmB,IAAAA,gBAAgB,CAAClB,OAAjB,CAA0B,UAAWmB,KAAX,EAAmB;AAC5C,UAAK,CAAEA,KAAK,CAACC,QAAN,CAAgBhB,KAAK,CAACE,MAAtB,CAAP,EAAwC;AACvCT,QAAAA,aAAa,CAAEsB,KAAF,CAAb;AACA;AACD,KAJD;AAKA,GATD,EAVsC,CAoBtC;;AACAH,EAAAA,QAAQ,CAACF,gBAAT,CAA2B,OAA3B,EAAoC,UAAWV,KAAX,EAAmB;AACtD,UAAMiB,aAAa,GAAGL,QAAQ,CAACjB,gBAAT,CACrB,qCADqB,CAAtB;AAGAsB,IAAAA,aAAa,CAACrB,OAAd,CAAuB,UAAWmB,KAAX,EAAmB;AACzC,UAAK,CAAEA,KAAK,CAACC,QAAN,CAAgBhB,KAAK,CAACE,MAAtB,CAAP,EAAwC;AACvCT,QAAAA,aAAa,CAAEsB,KAAF,CAAb;AACA,OAFD,MAEO,IAAKf,KAAK,CAACkB,GAAN,KAAc,QAAnB,EAA8B;AACpC,cAAMrB,MAAM,GAAGkB,KAAK,CAACI,aAAN,CAAqB,wBAArB,CAAf;AACA1B,QAAAA,aAAa,CAAEsB,KAAF,CAAb,CAFoC,CAGpC;;AACAlB,QAAAA,MAAM,EAAEuB,KAAR;AACA;AACD,KATD;AAUA,GAdD;AAeA,CApCD","sourcesContent":["// Open on click functionality.\nfunction closeSubmenus( element ) {\n\telement\n\t\t.querySelectorAll( '[aria-expanded=\"true\"]' )\n\t\t.forEach( function ( toggle ) {\n\t\t\ttoggle.setAttribute( 'aria-expanded', 'false' );\n\t\t} );\n}\n\nfunction toggleSubmenuOnClick( event ) {\n\tconst buttonToggle = event.target.closest( '[aria-expanded]' );\n\tconst isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );\n\n\tif ( isSubmenuOpen === 'true' ) {\n\t\tcloseSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );\n\t} else {\n\t\t// Close all sibling submenus.\n\t\tconst parentElement = buttonToggle.closest(\n\t\t\t'.wp-block-navigation-item'\n\t\t);\n\t\tconst navigationParent = buttonToggle.closest(\n\t\t\t'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'\n\t\t);\n\t\tnavigationParent\n\t\t\t.querySelectorAll( '.wp-block-navigation-item' )\n\t\t\t.forEach( function ( child ) {\n\t\t\t\tif ( child !== parentElement ) {\n\t\t\t\t\tcloseSubmenus( child );\n\t\t\t\t}\n\t\t\t} );\n\t\t// Open submenu.\n\t\tbuttonToggle.setAttribute( 'aria-expanded', 'true' );\n\t}\n}\n\n// Necessary for some themes such as TT1 Blocks, where\n// scripts could be loaded before the body.\nwindow.addEventListener( 'load', () => {\n\tconst submenuButtons = document.querySelectorAll(\n\t\t'.wp-block-navigation-submenu__toggle'\n\t);\n\n\tsubmenuButtons.forEach( function ( button ) {\n\t\tbutton.addEventListener( 'click', toggleSubmenuOnClick );\n\t} );\n\n\t// Close on click outside.\n\tdocument.addEventListener( 'click', function ( event ) {\n\t\tconst navigationBlocks = document.querySelectorAll(\n\t\t\t'.wp-block-navigation'\n\t\t);\n\t\tnavigationBlocks.forEach( function ( block ) {\n\t\t\tif ( ! block.contains( event.target ) ) {\n\t\t\t\tcloseSubmenus( block );\n\t\t\t}\n\t\t} );\n\t} );\n\t// Close on focus outside or escape key.\n\tdocument.addEventListener( 'keyup', function ( event ) {\n\t\tconst submenuBlocks = document.querySelectorAll(\n\t\t\t'.wp-block-navigation-item.has-child'\n\t\t);\n\t\tsubmenuBlocks.forEach( function ( block ) {\n\t\t\tif ( ! block.contains( event.target ) ) {\n\t\t\t\tcloseSubmenus( block );\n\t\t\t} else if ( event.key === 'Escape' ) {\n\t\t\t\tconst toggle = block.querySelector( '[aria-expanded=\"true\"]' );\n\t\t\t\tcloseSubmenus( block );\n\t\t\t\t// Focus the submenu trigger so focus does not get trapped in the closed submenu.\n\t\t\t\ttoggle?.focus();\n\t\t\t}\n\t\t} );\n\t} );\n} );\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/navigation/view.js"],"names":["hasOpenSubmenu","closeSubmenus","navigationItem","querySelectorAll","forEach","toggle","setAttribute","toggleSubmenuOnClick","buttonToggle","isSubmenuOpen","getAttribute","closest","navigationParent","child","document","addEventListener","event","target","button","navigationBlocks","block","contains","HTMLButtonElement","passive","submenuBlocks","key","querySelector","focus"],"mappings":"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","sourcesContent":["/*eslint-env browser*/\n// Open on click functionality.\n\n/**\n * Keep track of whether a submenu is open to short-circuit delegated event listeners.\n *\n * @type {boolean}\n */\nlet hasOpenSubmenu = false;\n\n/**\n * Close submenu items for a navigation item.\n *\n * @param {HTMLElement} navigationItem - Either a NAV or LI element.\n */\nfunction closeSubmenus( navigationItem ) {\n\tnavigationItem\n\t\t.querySelectorAll( '[aria-expanded=\"true\"]' )\n\t\t.forEach( function ( toggle ) {\n\t\t\ttoggle.setAttribute( 'aria-expanded', 'false' );\n\t\t} );\n\thasOpenSubmenu = false;\n}\n\n/**\n * Toggle submenu on click.\n *\n * @param {HTMLButtonElement} buttonToggle\n */\nfunction toggleSubmenuOnClick( buttonToggle ) {\n\tconst isSubmenuOpen =\n\t\tbuttonToggle.getAttribute( 'aria-expanded' ) === 'true';\n\tconst navigationItem = buttonToggle.closest( '.wp-block-navigation-item' );\n\n\tif ( isSubmenuOpen ) {\n\t\tcloseSubmenus( navigationItem );\n\t} else {\n\t\t// Close all sibling submenus.\n\t\tconst navigationParent = buttonToggle.closest(\n\t\t\t'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'\n\t\t);\n\t\tnavigationParent\n\t\t\t.querySelectorAll( '.wp-block-navigation-item' )\n\t\t\t.forEach( ( child ) => {\n\t\t\t\tif ( child !== navigationItem ) {\n\t\t\t\t\tcloseSubmenus( child );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t// Open submenu.\n\t\tbuttonToggle.setAttribute( 'aria-expanded', 'true' );\n\t\thasOpenSubmenu = true;\n\t}\n}\n\n// Open on button click or close on click outside.\ndocument.addEventListener(\n\t'click',\n\tfunction ( event ) {\n\t\tconst target = event.target;\n\t\tconst button = target.closest( '.wp-block-navigation-submenu__toggle' );\n\n\t\t// Close any other open submenus.\n\t\tif ( hasOpenSubmenu ) {\n\t\t\tconst navigationBlocks = document.querySelectorAll(\n\t\t\t\t'.wp-block-navigation'\n\t\t\t);\n\t\t\tnavigationBlocks.forEach( function ( block ) {\n\t\t\t\tif ( ! block.contains( target ) ) {\n\t\t\t\t\tcloseSubmenus( block );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Now open the submenu if one was clicked.\n\t\tif ( button instanceof HTMLButtonElement ) {\n\t\t\ttoggleSubmenuOnClick( button );\n\t\t}\n\t},\n\t{ passive: true }\n);\n\n// Close on focus outside or escape key.\ndocument.addEventListener(\n\t'keyup',\n\tfunction ( event ) {\n\t\t// Abort if there aren't any submenus open anyway.\n\t\tif ( ! hasOpenSubmenu ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst submenuBlocks = document.querySelectorAll(\n\t\t\t'.wp-block-navigation-item.has-child'\n\t\t);\n\t\tsubmenuBlocks.forEach( function ( block ) {\n\t\t\tif ( ! block.contains( event.target ) ) {\n\t\t\t\tcloseSubmenus( block );\n\t\t\t} else if ( event.key === 'Escape' ) {\n\t\t\t\tconst toggle = block.querySelector( '[aria-expanded=\"true\"]' );\n\t\t\t\tcloseSubmenus( block );\n\t\t\t\t// Focus the submenu trigger so focus does not get trapped in the closed submenu.\n\t\t\t\ttoggle?.focus();\n\t\t\t}\n\t\t} );\n\t},\n\t{ passive: true }\n);\n"]}

package/build-module/pattern/edit.js

@@ -7,6 +7,11 @@ import { cloneBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { store as blockEditorStore, useBlockProps } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../lock-unlock';
 
 const PatternEdit = ({
   attributes,
@@ -16,7 +21,14 @@ const PatternEdit = ({
   const {
     replaceBlocks,
     __unstableMarkNextChangeAsNotPersistent
-  } = useDispatch(blockEditorStore); // Run this effect when the component loads.
+  } = useDispatch(blockEditorStore);
+  const {
+    setBlockEditingMode
+  } = unlock(useDispatch(blockEditorStore));
+  const {
+    getBlockRootClientId,
+    getBlockEditingMode
+  } = unlock(useSelect(blockEditorStore)); // Run this effect when the component loads.
   // This adds the Pattern's contents to the post.
   // This change won't be saved.
   // It will continue to pull from the pattern file unless changes are made to its respective template part.
@@ -29,16 +41,27 @@ const PatternEdit = ({
       // because nested pattern blocks cannot be inserted if the parent block supports
       // inner blocks but doesn't have blockSettings in the state.
       window.queueMicrotask(() => {
-        // Clone blocks from the pattern before insertion to ensure they receive
+        const rootClientId = getBlockRootClientId(clientId); // Clone blocks from the pattern before insertion to ensure they receive
         // distinct client ids. See https://github.com/WordPress/gutenberg/issues/50628.
+
         const clonedBlocks = selectedPattern.blocks.map(block => cloneBlock(block));
+        const rootEditingMode = getBlockEditingMode(rootClientId); // Temporarily set the root block to default mode to allow replacing the pattern.
+        // This could happen when the page is disabling edits of non-content blocks.
+
+        __unstableMarkNextChangeAsNotPersistent();
+
+        setBlockEditingMode(rootClientId, 'default');
+
+        __unstableMarkNextChangeAsNotPersistent();
+
+        replaceBlocks(clientId, clonedBlocks); // Restore the root block's original mode.
 
         __unstableMarkNextChangeAsNotPersistent();
 
-        replaceBlocks(clientId, clonedBlocks);
+        setBlockEditingMode(rootClientId, rootEditingMode);
       });
     }
-  }, [clientId, selectedPattern?.blocks, __unstableMarkNextChangeAsNotPersistent, replaceBlocks]);
+  }, [clientId, selectedPattern?.blocks, __unstableMarkNextChangeAsNotPersistent, replaceBlocks, getBlockEditingMode, setBlockEditingMode, getBlockRootClientId]);
   const props = useBlockProps();
   return createElement("div", { ...props
   });

package/build-module/pattern/edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/pattern/edit.js"],"names":["cloneBlock","useSelect","useDispatch","useEffect","store","blockEditorStore","useBlockProps","PatternEdit","attributes","clientId","selectedPattern","select","__experimentalGetParsedPattern","slug","replaceBlocks","__unstableMarkNextChangeAsNotPersistent","blocks","window","queueMicrotask","clonedBlocks","map","block","props"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,mBAA3B;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SACCC,KAAK,IAAIC,gBADV,EAECC,aAFD,QAGO,yBAHP;;AAKA,MAAMC,WAAW,GAAG,CAAE;AAAEC,EAAAA,UAAF;AAAcC,EAAAA;AAAd,CAAF,KAAgC;AACnD,QAAMC,eAAe,GAAGT,SAAS,CAC9BU,MAAF,IACCA,MAAM,CAAEN,gBAAF,CAAN,CAA2BO,8BAA3B,CACCJ,UAAU,CAACK,IADZ,CAF+B,EAKhC,CAAEL,UAAU,CAACK,IAAb,CALgC,CAAjC;AAQA,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,MACLb,WAAW,CAAEG,gBAAF,CADZ,CATmD,CAYnD;AACA;AACA;AACA;;AACAF,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKO,eAAe,EAAEM,MAAtB,EAA+B;AAC9B;AACA;AACA;AACA;AACA;AACAC,MAAAA,MAAM,CAACC,cAAP,CAAuB,MAAM;AAC5B;AACA;AACA,cAAMC,YAAY,GAAGT,eAAe,CAACM,MAAhB,CAAuBI,GAAvB,CAA8BC,KAAF,IAChDrB,UAAU,CAAEqB,KAAF,CADU,CAArB;;AAGAN,QAAAA,uCAAuC;;AACvCD,QAAAA,aAAa,CAAEL,QAAF,EAAYU,YAAZ,CAAb;AACA,OARD;AASA;AACD,GAjBQ,EAiBN,CACFV,QADE,EAEFC,eAAe,EAAEM,MAFf,EAGFD,uCAHE,EAIFD,aAJE,CAjBM,CAAT;AAwBA,QAAMQ,KAAK,GAAGhB,aAAa,EAA3B;AAEA,SAAO,0BAAUgB;AAAV,IAAP;AACA,CA3CD;;AA6CA,eAAef,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { cloneBlock } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\n\nconst PatternEdit = ( { attributes, clientId } ) => {\n\tconst selectedPattern = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).__experimentalGetParsedPattern(\n\t\t\t\tattributes.slug\n\t\t\t),\n\t\t[ attributes.slug ]\n\t);\n\n\tconst { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Run this effect when the component loads.\n\t// This adds the Pattern's contents to the post.\n\t// This change won't be saved.\n\t// It will continue to pull from the pattern file unless changes are made to its respective template part.\n\tuseEffect( () => {\n\t\tif ( selectedPattern?.blocks ) {\n\t\t\t// We batch updates to block list settings to avoid triggering cascading renders\n\t\t\t// for each container block included in a tree and optimize initial render.\n\t\t\t// Since the above uses microtasks, we need to use a microtask here as well,\n\t\t\t// because nested pattern blocks cannot be inserted if the parent block supports\n\t\t\t// inner blocks but doesn't have blockSettings in the state.\n\t\t\twindow.queueMicrotask( () => {\n\t\t\t\t// Clone blocks from the pattern before insertion to ensure they receive\n\t\t\t\t// distinct client ids. See https://github.com/WordPress/gutenberg/issues/50628.\n\t\t\t\tconst clonedBlocks = selectedPattern.blocks.map( ( block ) =>\n\t\t\t\t\tcloneBlock( block )\n\t\t\t\t);\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\treplaceBlocks( clientId, clonedBlocks );\n\t\t\t} );\n\t\t}\n\t}, [\n\t\tclientId,\n\t\tselectedPattern?.blocks,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\treplaceBlocks,\n\t] );\n\n\tconst props = useBlockProps();\n\n\treturn <div { ...props } />;\n};\n\nexport default PatternEdit;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/pattern/edit.js"],"names":["cloneBlock","useSelect","useDispatch","useEffect","store","blockEditorStore","useBlockProps","unlock","PatternEdit","attributes","clientId","selectedPattern","select","__experimentalGetParsedPattern","slug","replaceBlocks","__unstableMarkNextChangeAsNotPersistent","setBlockEditingMode","getBlockRootClientId","getBlockEditingMode","blocks","window","queueMicrotask","rootClientId","clonedBlocks","map","block","rootEditingMode","props"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,mBAA3B;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SACCC,KAAK,IAAIC,gBADV,EAECC,aAFD,QAGO,yBAHP;AAKA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,gBAAvB;;AAEA,MAAMC,WAAW,GAAG,CAAE;AAAEC,EAAAA,UAAF;AAAcC,EAAAA;AAAd,CAAF,KAAgC;AACnD,QAAMC,eAAe,GAAGV,SAAS,CAC9BW,MAAF,IACCA,MAAM,CAAEP,gBAAF,CAAN,CAA2BQ,8BAA3B,CACCJ,UAAU,CAACK,IADZ,CAF+B,EAKhC,CAAEL,UAAU,CAACK,IAAb,CALgC,CAAjC;AAQA,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,MACLd,WAAW,CAAEG,gBAAF,CADZ;AAEA,QAAM;AAAEY,IAAAA;AAAF,MAA0BV,MAAM,CAAEL,WAAW,CAAEG,gBAAF,CAAb,CAAtC;AACA,QAAM;AAAEa,IAAAA,oBAAF;AAAwBC,IAAAA;AAAxB,MAAgDZ,MAAM,CAC3DN,SAAS,CAAEI,gBAAF,CADkD,CAA5D,CAZmD,CAgBnD;AACA;AACA;AACA;;AACAF,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKQ,eAAe,EAAES,MAAtB,EAA+B;AAC9B;AACA;AACA;AACA;AACA;AACAC,MAAAA,MAAM,CAACC,cAAP,CAAuB,MAAM;AAC5B,cAAMC,YAAY,GAAGL,oBAAoB,CAAER,QAAF,CAAzC,CAD4B,CAE5B;AACA;;AACA,cAAMc,YAAY,GAAGb,eAAe,CAACS,MAAhB,CAAuBK,GAAvB,CAA8BC,KAAF,IAChD1B,UAAU,CAAE0B,KAAF,CADU,CAArB;AAGA,cAAMC,eAAe,GAAGR,mBAAmB,CAAEI,YAAF,CAA3C,CAP4B,CAQ5B;AACA;;AACAP,QAAAA,uCAAuC;;AACvCC,QAAAA,mBAAmB,CAAEM,YAAF,EAAgB,SAAhB,CAAnB;;AACAP,QAAAA,uCAAuC;;AACvCD,QAAAA,aAAa,CAAEL,QAAF,EAAYc,YAAZ,CAAb,CAb4B,CAc5B;;AACAR,QAAAA,uCAAuC;;AACvCC,QAAAA,mBAAmB,CAAEM,YAAF,EAAgBI,eAAhB,CAAnB;AACA,OAjBD;AAkBA;AACD,GA1BQ,EA0BN,CACFjB,QADE,EAEFC,eAAe,EAAES,MAFf,EAGFJ,uCAHE,EAIFD,aAJE,EAKFI,mBALE,EAMFF,mBANE,EAOFC,oBAPE,CA1BM,CAAT;AAoCA,QAAMU,KAAK,GAAGtB,aAAa,EAA3B;AAEA,SAAO,0BAAUsB;AAAV,IAAP;AACA,CA3DD;;AA6DA,eAAepB,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { cloneBlock } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\nconst PatternEdit = ( { attributes, clientId } ) => {\n\tconst selectedPattern = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).__experimentalGetParsedPattern(\n\t\t\t\tattributes.slug\n\t\t\t),\n\t\t[ attributes.slug ]\n\t);\n\n\tconst { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst { setBlockEditingMode } = unlock( useDispatch( blockEditorStore ) );\n\tconst { getBlockRootClientId, getBlockEditingMode } = unlock(\n\t\tuseSelect( blockEditorStore )\n\t);\n\n\t// Run this effect when the component loads.\n\t// This adds the Pattern's contents to the post.\n\t// This change won't be saved.\n\t// It will continue to pull from the pattern file unless changes are made to its respective template part.\n\tuseEffect( () => {\n\t\tif ( selectedPattern?.blocks ) {\n\t\t\t// We batch updates to block list settings to avoid triggering cascading renders\n\t\t\t// for each container block included in a tree and optimize initial render.\n\t\t\t// Since the above uses microtasks, we need to use a microtask here as well,\n\t\t\t// because nested pattern blocks cannot be inserted if the parent block supports\n\t\t\t// inner blocks but doesn't have blockSettings in the state.\n\t\t\twindow.queueMicrotask( () => {\n\t\t\t\tconst rootClientId = getBlockRootClientId( clientId );\n\t\t\t\t// Clone blocks from the pattern before insertion to ensure they receive\n\t\t\t\t// distinct client ids. See https://github.com/WordPress/gutenberg/issues/50628.\n\t\t\t\tconst clonedBlocks = selectedPattern.blocks.map( ( block ) =>\n\t\t\t\t\tcloneBlock( block )\n\t\t\t\t);\n\t\t\t\tconst rootEditingMode = getBlockEditingMode( rootClientId );\n\t\t\t\t// Temporarily set the root block to default mode to allow replacing the pattern.\n\t\t\t\t// This could happen when the page is disabling edits of non-content blocks.\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tsetBlockEditingMode( rootClientId, 'default' );\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\treplaceBlocks( clientId, clonedBlocks );\n\t\t\t\t// Restore the root block's original mode.\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tsetBlockEditingMode( rootClientId, rootEditingMode );\n\t\t\t} );\n\t\t}\n\t}, [\n\t\tclientId,\n\t\tselectedPattern?.blocks,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\treplaceBlocks,\n\t\tgetBlockEditingMode,\n\t\tsetBlockEditingMode,\n\t\tgetBlockRootClientId,\n\t] );\n\n\tconst props = useBlockProps();\n\n\treturn <div { ...props } />;\n};\n\nexport default PatternEdit;\n"]}

package/build-module/preformatted/index.js

@@ -36,6 +36,10 @@ const metadata = {
         text: true
       }
     },
+    spacing: {
+      padding: true,
+      margin: true
+    },
     typography: {
       fontSize: true,
       lineHeight: true,

package/build-module/preformatted/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/preformatted/index.js"],"names":["__","preformatted","icon","initBlock","edit","save","transforms","name","metadata","settings","example","attributes","content","merge","attributesToMerge","init"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAY,IAAIC,IAAzB,QAAqC,kBAArC;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,qBAAtB;AACA,OAAOC,IAAP,MAAiB,QAAjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAWC,QAAjB;AAEA,SAASA,QAAT,EAAmBD,IAAnB;AAEA,OAAO,MAAME,QAAQ,GAAG;AACvBP,EAAAA,IADuB;AAEvBQ,EAAAA,OAAO,EAAE;AACRC,IAAAA,UAAU,EAAE;AACX;AACA;AACAC,MAAAA,OAAO,EAAEZ,EAAE,CACV,wQADU;AAGX;;AANW;AADJ,GAFc;AAYvBM,EAAAA,UAZuB;AAavBF,EAAAA,IAbuB;AAcvBC,EAAAA,IAduB;;AAevBQ,EAAAA,KAAK,CAAEF,UAAF,EAAcG,iBAAd,EAAkC;AACtC,WAAO;AACNF,MAAAA,OAAO,EAAED,UAAU,CAACC,OAAX,GAAqBE,iBAAiB,CAACF;AAD1C,KAAP;AAGA;;AAnBsB,CAAjB;AAsBP,OAAO,MAAMG,IAAI,GAAG,MAAMZ,SAAS,CAAE;AAAEI,EAAAA,IAAF;AAAQC,EAAAA,QAAR;AAAkBC,EAAAA;AAAlB,CAAF,CAA5B","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { preformatted as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tattributes: {\n\t\t\t/* eslint-disable @wordpress/i18n-no-collapsible-whitespace */\n\t\t\t// translators: Sample content for the Preformatted block. Can be replaced with a more locale-adequate work.\n\t\t\tcontent: __(\n\t\t\t\t'EXT. XANADU - FAINT DAWN - 1940 (MINIATURE)\\nWindow, very small in the distance, illuminated.\\nAll around this is an almost totally black screen. Now, as the camera moves slowly towards the window which is almost a postage stamp in the frame, other forms appear;'\n\t\t\t),\n\t\t\t/* eslint-enable @wordpress/i18n-no-collapsible-whitespace */\n\t\t},\n\t},\n\ttransforms,\n\tedit,\n\tsave,\n\tmerge( attributes, attributesToMerge ) {\n\t\treturn {\n\t\t\tcontent: attributes.content + attributesToMerge.content,\n\t\t};\n\t},\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/preformatted/index.js"],"names":["__","preformatted","icon","initBlock","edit","save","transforms","name","metadata","settings","example","attributes","content","merge","attributesToMerge","init"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAY,IAAIC,IAAzB,QAAqC,kBAArC;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,qBAAtB;AACA,OAAOC,IAAP,MAAiB,QAAjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAWC,QAAjB;AAEA,SAASA,QAAT,EAAmBD,IAAnB;AAEA,OAAO,MAAME,QAAQ,GAAG;AACvBP,EAAAA,IADuB;AAEvBQ,EAAAA,OAAO,EAAE;AACRC,IAAAA,UAAU,EAAE;AACX;AACA;AACAC,MAAAA,OAAO,EAAEZ,EAAE,CACV,wQADU;AAGX;;AANW;AADJ,GAFc;AAYvBM,EAAAA,UAZuB;AAavBF,EAAAA,IAbuB;AAcvBC,EAAAA,IAduB;;AAevBQ,EAAAA,KAAK,CAAEF,UAAF,EAAcG,iBAAd,EAAkC;AACtC,WAAO;AACNF,MAAAA,OAAO,EAAED,UAAU,CAACC,OAAX,GAAqBE,iBAAiB,CAACF;AAD1C,KAAP;AAGA;;AAnBsB,CAAjB;AAsBP,OAAO,MAAMG,IAAI,GAAG,MAAMZ,SAAS,CAAE;AAAEI,EAAAA,IAAF;AAAQC,EAAAA,QAAR;AAAkBC,EAAAA;AAAlB,CAAF,CAA5B","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { preformatted as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tattributes: {\n\t\t\t/* eslint-disable @wordpress/i18n-no-collapsible-whitespace */\n\t\t\t// translators: Sample content for the Preformatted block. Can be replaced with a more locale-adequate work.\n\t\t\tcontent: __(\n\t\t\t\t'EXT. XANADU - FAINT DAWN - 1940 (MINIATURE)\\nWindow, very small in the distance, illuminated.\\nAll around this is an almost totally black screen. Now, as the camera moves slowly towards the window which is almost a postage stamp in the frame, other forms appear;'\n\t\t\t),\n\t\t\t/* eslint-enable @wordpress/i18n-no-collapsible-whitespace */\n\t\t},\n\t},\n\ttransforms,\n\tedit,\n\tsave,\n\tmerge( attributes, attributesToMerge ) {\n\t\treturn {\n\t\t\tcontent: attributes.content + attributesToMerge.content,\n\t\t};\n\t},\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"]}