@wordpress/block-library 8.10.0 → 8.11.0

package/build-module/utils/interactivity/portals.js

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { createElement, render } from 'preact';
+/**
+ * @param {import('../../src/index').RenderableProps<{ context: any }>} props
+ */
+
+function ContextProvider(props) {
+  this.getChildContext = () => props.context;
+
+  return props.children;
+}
+/**
+ * Portal component
+ *
+ * @this {import('./internal').Component}
+ * @param {object | null | undefined} props
+ *
+ *                                          TODO: use createRoot() instead of fake root
+ */
+
+
+function Portal(props) {
+  const _this = this;
+
+  const container = props._container;
+
+  _this.componentWillUnmount = function () {
+    render(null, _this._temp);
+    _this._temp = null;
+    _this._container = null;
+  }; // When we change container we should clear our old container and
+  // indicate a new mount.
+
+
+  if (_this._container && _this._container !== container) {
+    _this.componentWillUnmount();
+  } // When props.vnode is undefined/false/null we are dealing with some kind of
+  // conditional vnode. This should not trigger a render.
+
+
+  if (props._vnode) {
+    if (!_this._temp) {
+      _this._container = container; // Create a fake DOM parent node that manages a subset of `container`'s children:
+
+      _this._temp = {
+        nodeType: 1,
+        parentNode: container,
+        childNodes: [],
+
+        appendChild(child) {
+          this.childNodes.push(child);
+
+          _this._container.appendChild(child);
+        },
+
+        insertBefore(child) {
+          this.childNodes.push(child);
+
+          _this._container.appendChild(child);
+        },
+
+        removeChild(child) {
+          this.childNodes.splice( // eslint-disable-next-line no-bitwise
+          this.childNodes.indexOf(child) >>> 1, 1);
+
+          _this._container.removeChild(child);
+        }
+
+      };
+    } // Render our wrapping element into temp.
+
+
+    render(createElement(ContextProvider, {
+      context: _this.context
+    }, props._vnode), _this._temp);
+  } // When we come from a conditional render, on a mounted
+  // portal we should clear the DOM.
+  else if (_this._temp) {
+    _this.componentWillUnmount();
+  }
+}
+/**
+ * Create a `Portal` to continue rendering the vnode tree at a different DOM node
+ *
+ * @param {import('./internal').VNode}         vnode     The vnode to render
+ * @param {import('./internal').PreactElement} container The DOM node to continue rendering in to.
+ */
+
+
+export function createPortal(vnode, container) {
+  const el = createElement(Portal, {
+    _vnode: vnode,
+    _container: container
+  });
+  el.containerInfo = container;
+  return el;
+}
+//# sourceMappingURL=portals.js.map

package/build-module/utils/interactivity/portals.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/utils/interactivity/portals.js"],"names":["createElement","render","ContextProvider","props","getChildContext","context","children","Portal","_this","container","_container","componentWillUnmount","_temp","_vnode","nodeType","parentNode","childNodes","appendChild","child","push","insertBefore","removeChild","splice","indexOf","createPortal","vnode","el","containerInfo"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,MAAxB,QAAsC,QAAtC;AAEA;AACA;AACA;;AACA,SAASC,eAAT,CAA0BC,KAA1B,EAAkC;AACjC,OAAKC,eAAL,GAAuB,MAAMD,KAAK,CAACE,OAAnC;;AACA,SAAOF,KAAK,CAACG,QAAb;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,MAAT,CAAiBJ,KAAjB,EAAyB;AACxB,QAAMK,KAAK,GAAG,IAAd;;AACA,QAAMC,SAAS,GAAGN,KAAK,CAACO,UAAxB;;AAEAF,EAAAA,KAAK,CAACG,oBAAN,GAA6B,YAAY;AACxCV,IAAAA,MAAM,CAAE,IAAF,EAAQO,KAAK,CAACI,KAAd,CAAN;AACAJ,IAAAA,KAAK,CAACI,KAAN,GAAc,IAAd;AACAJ,IAAAA,KAAK,CAACE,UAAN,GAAmB,IAAnB;AACA,GAJD,CAJwB,CAUxB;AACA;;;AACA,MAAKF,KAAK,CAACE,UAAN,IAAoBF,KAAK,CAACE,UAAN,KAAqBD,SAA9C,EAA0D;AACzDD,IAAAA,KAAK,CAACG,oBAAN;AACA,GAduB,CAgBxB;AACA;;;AACA,MAAKR,KAAK,CAACU,MAAX,EAAoB;AACnB,QAAK,CAAEL,KAAK,CAACI,KAAb,EAAqB;AACpBJ,MAAAA,KAAK,CAACE,UAAN,GAAmBD,SAAnB,CADoB,CAGpB;;AACAD,MAAAA,KAAK,CAACI,KAAN,GAAc;AACbE,QAAAA,QAAQ,EAAE,CADG;AAEbC,QAAAA,UAAU,EAAEN,SAFC;AAGbO,QAAAA,UAAU,EAAE,EAHC;;AAIbC,QAAAA,WAAW,CAAEC,KAAF,EAAU;AACpB,eAAKF,UAAL,CAAgBG,IAAhB,CAAsBD,KAAtB;;AACAV,UAAAA,KAAK,CAACE,UAAN,CAAiBO,WAAjB,CAA8BC,KAA9B;AACA,SAPY;;AAQbE,QAAAA,YAAY,CAAEF,KAAF,EAAU;AACrB,eAAKF,UAAL,CAAgBG,IAAhB,CAAsBD,KAAtB;;AACAV,UAAAA,KAAK,CAACE,UAAN,CAAiBO,WAAjB,CAA8BC,KAA9B;AACA,SAXY;;AAYbG,QAAAA,WAAW,CAAEH,KAAF,EAAU;AACpB,eAAKF,UAAL,CAAgBM,MAAhB,EACC;AACA,eAAKN,UAAL,CAAgBO,OAAhB,CAAyBL,KAAzB,MAAqC,CAFtC,EAGC,CAHD;;AAKAV,UAAAA,KAAK,CAACE,UAAN,CAAiBW,WAAjB,CAA8BH,KAA9B;AACA;;AAnBY,OAAd;AAqBA,KA1BkB,CA4BnB;;;AACAjB,IAAAA,MAAM,CACLD,aAAa,CACZE,eADY,EAEZ;AAAEG,MAAAA,OAAO,EAAEG,KAAK,CAACH;AAAjB,KAFY,EAGZF,KAAK,CAACU,MAHM,CADR,EAMLL,KAAK,CAACI,KAND,CAAN;AAQA,GArCD,CAsCA;AACA;AAvCA,OAwCK,IAAKJ,KAAK,CAACI,KAAX,EAAmB;AACvBJ,IAAAA,KAAK,CAACG,oBAAN;AACA;AACD;AAED;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASa,YAAT,CAAuBC,KAAvB,EAA8BhB,SAA9B,EAA0C;AAChD,QAAMiB,EAAE,GAAG1B,aAAa,CAAEO,MAAF,EAAU;AACjCM,IAAAA,MAAM,EAAEY,KADyB;AAEjCf,IAAAA,UAAU,EAAED;AAFqB,GAAV,CAAxB;AAIAiB,EAAAA,EAAE,CAACC,aAAH,GAAmBlB,SAAnB;AACA,SAAOiB,EAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { createElement, render } from 'preact';\n\n/**\n * @param {import('../../src/index').RenderableProps<{ context: any }>} props\n */\nfunction ContextProvider( props ) {\n\tthis.getChildContext = () => props.context;\n\treturn props.children;\n}\n\n/**\n * Portal component\n *\n * @this {import('./internal').Component}\n * @param {object | null | undefined} props\n *\n *                                          TODO: use createRoot() instead of fake root\n */\nfunction Portal( props ) {\n\tconst _this = this;\n\tconst container = props._container;\n\n\t_this.componentWillUnmount = function () {\n\t\trender( null, _this._temp );\n\t\t_this._temp = null;\n\t\t_this._container = null;\n\t};\n\n\t// When we change container we should clear our old container and\n\t// indicate a new mount.\n\tif ( _this._container && _this._container !== container ) {\n\t\t_this.componentWillUnmount();\n\t}\n\n\t// When props.vnode is undefined/false/null we are dealing with some kind of\n\t// conditional vnode. This should not trigger a render.\n\tif ( props._vnode ) {\n\t\tif ( ! _this._temp ) {\n\t\t\t_this._container = container;\n\n\t\t\t// Create a fake DOM parent node that manages a subset of `container`'s children:\n\t\t\t_this._temp = {\n\t\t\t\tnodeType: 1,\n\t\t\t\tparentNode: container,\n\t\t\t\tchildNodes: [],\n\t\t\t\tappendChild( child ) {\n\t\t\t\t\tthis.childNodes.push( child );\n\t\t\t\t\t_this._container.appendChild( child );\n\t\t\t\t},\n\t\t\t\tinsertBefore( child ) {\n\t\t\t\t\tthis.childNodes.push( child );\n\t\t\t\t\t_this._container.appendChild( child );\n\t\t\t\t},\n\t\t\t\tremoveChild( child ) {\n\t\t\t\t\tthis.childNodes.splice(\n\t\t\t\t\t\t// eslint-disable-next-line no-bitwise\n\t\t\t\t\t\tthis.childNodes.indexOf( child ) >>> 1,\n\t\t\t\t\t\t1\n\t\t\t\t\t);\n\t\t\t\t\t_this._container.removeChild( child );\n\t\t\t\t},\n\t\t\t};\n\t\t}\n\n\t\t// Render our wrapping element into temp.\n\t\trender(\n\t\t\tcreateElement(\n\t\t\t\tContextProvider,\n\t\t\t\t{ context: _this.context },\n\t\t\t\tprops._vnode\n\t\t\t),\n\t\t\t_this._temp\n\t\t);\n\t}\n\t// When we come from a conditional render, on a mounted\n\t// portal we should clear the DOM.\n\telse if ( _this._temp ) {\n\t\t_this.componentWillUnmount();\n\t}\n}\n\n/**\n * Create a `Portal` to continue rendering the vnode tree at a different DOM node\n *\n * @param {import('./internal').VNode}         vnode     The vnode to render\n * @param {import('./internal').PreactElement} container The DOM node to continue rendering in to.\n */\nexport function createPortal( vnode, container ) {\n\tconst el = createElement( Portal, {\n\t\t_vnode: vnode,\n\t\t_container: container,\n\t} );\n\tel.containerInfo = container;\n\treturn el;\n}\n"]}

package/build-style/common-rtl.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }

package/build-style/common.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }

package/build-style/cover/style-rtl.css

@@ -396,8 +396,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;

package/build-style/cover/style.css

@@ -398,8 +398,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;

package/build-style/editor-rtl.css

@@ -644,6 +644,9 @@ html :where(.wp-block-column) {
 .wp-block-file a {
   min-width: 1em;
 }
+.wp-block-file a:not(.wp-block-file__button) {
+  display: inline-block;
+}
 .wp-block-file .wp-block-file__button-richtext-wrapper {
   display: inline-block;
   margin-right: 0.75em;
@@ -973,6 +976,35 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   display: block;
 }
 
+@media (min-width: 960px) {
+  .block-editor-freeform-modal .components-modal__frame {
+    height: 9999rem;
+  }
+  .block-editor-freeform-modal .components-modal__frame .components-modal__header + div {
+    height: 100%;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-tinymce {
+    height: calc(100% - 36px - 16px);
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-container-body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-edit-area {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-edit-area iframe {
+    flex-grow: 1;
+    height: 10px !important;
+  }
+}
+.block-editor-freeform-modal__actions {
+  margin-top: 16px;
+}
+
 figure.wp-block-gallery {
   display: block;
 }
@@ -1998,6 +2030,42 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   opacity: 1;
 }
 
+.wp-block-navigation__menu-inspector-controls {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.wp-block-navigation__menu-inspector-controls:hover::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.wp-block-navigation__menu-inspector-controls:hover, .wp-block-navigation__menu-inspector-controls:focus, .wp-block-navigation__menu-inspector-controls:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .wp-block-navigation__menu-inspector-controls {
+    scrollbar-color: #949494 transparent;
+  }
+}
+
+.wp-block-navigation__menu-inspector-controls__empty-message {
+  margin-right: 24px;
+}
+
 /**
  * Appender
  */

package/build-style/editor.css

@@ -648,6 +648,9 @@ html :where(.wp-block-column) {
 .wp-block-file a {
   min-width: 1em;
 }
+.wp-block-file a:not(.wp-block-file__button) {
+  display: inline-block;
+}
 .wp-block-file .wp-block-file__button-richtext-wrapper {
   display: inline-block;
   margin-left: 0.75em;
@@ -981,6 +984,35 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   display: block;
 }
 
+@media (min-width: 960px) {
+  .block-editor-freeform-modal .components-modal__frame {
+    height: 9999rem;
+  }
+  .block-editor-freeform-modal .components-modal__frame .components-modal__header + div {
+    height: 100%;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-tinymce {
+    height: calc(100% - 36px - 16px);
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-container-body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-edit-area {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-edit-area iframe {
+    flex-grow: 1;
+    height: 10px !important;
+  }
+}
+.block-editor-freeform-modal__actions {
+  margin-top: 16px;
+}
+
 figure.wp-block-gallery {
   display: block;
 }
@@ -2006,6 +2038,42 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   opacity: 1;
 }
 
+.wp-block-navigation__menu-inspector-controls {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.wp-block-navigation__menu-inspector-controls:hover::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.wp-block-navigation__menu-inspector-controls:hover, .wp-block-navigation__menu-inspector-controls:focus, .wp-block-navigation__menu-inspector-controls:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .wp-block-navigation__menu-inspector-controls {
+    scrollbar-color: #949494 transparent;
+  }
+}
+
+.wp-block-navigation__menu-inspector-controls__empty-message {
+  margin-left: 24px;
+}
+
 /**
  * Appender
  */

package/build-style/file/editor-rtl.css

@@ -117,6 +117,9 @@
 .wp-block-file a {
   min-width: 1em;
 }
+.wp-block-file a:not(.wp-block-file__button) {
+  display: inline-block;
+}
 .wp-block-file .wp-block-file__button-richtext-wrapper {
   display: inline-block;
   margin-right: 0.75em;

package/build-style/file/editor.css

@@ -117,6 +117,9 @@
 .wp-block-file a {
   min-width: 1em;
 }
+.wp-block-file a:not(.wp-block-file__button) {
+  display: inline-block;
+}
 .wp-block-file .wp-block-file__button-richtext-wrapper {
   display: inline-block;
   margin-left: 0.75em;

package/build-style/freeform/editor-rtl.css

@@ -408,4 +408,33 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
 }
 .block-library-classic__toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar {
   display: block;
+}
+
+@media (min-width: 960px) {
+  .block-editor-freeform-modal .components-modal__frame {
+    height: 9999rem;
+  }
+  .block-editor-freeform-modal .components-modal__frame .components-modal__header + div {
+    height: 100%;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-tinymce {
+    height: calc(100% - 36px - 16px);
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-container-body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-edit-area {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-edit-area iframe {
+    flex-grow: 1;
+    height: 10px !important;
+  }
+}
+.block-editor-freeform-modal__actions {
+  margin-top: 16px;
 }

package/build-style/freeform/editor.css

@@ -412,4 +412,33 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
 }
 .block-library-classic__toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar {
   display: block;
+}
+
+@media (min-width: 960px) {
+  .block-editor-freeform-modal .components-modal__frame {
+    height: 9999rem;
+  }
+  .block-editor-freeform-modal .components-modal__frame .components-modal__header + div {
+    height: 100%;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-tinymce {
+    height: calc(100% - 36px - 16px);
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-container-body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-edit-area {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .block-editor-freeform-modal .components-modal__frame .mce-edit-area iframe {
+    flex-grow: 1;
+    height: 10px !important;
+  }
+}
+.block-editor-freeform-modal__actions {
+  margin-top: 16px;
 }

package/build-style/gallery/style-rtl.css

@@ -169,8 +169,7 @@
   width: 100%;
   height: 100%;
   flex: 1;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
@@ -364,8 +363,7 @@ figure.wp-block-gallery.has-nested-images {
   width: 100%;
   flex: 1 0 0%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
   width: 100%;

package/build-style/gallery/style.css

@@ -169,8 +169,7 @@
   width: 100%;
   height: 100%;
   flex: 1;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
@@ -364,8 +363,7 @@ figure.wp-block-gallery.has-nested-images {
   width: 100%;
   flex: 1 0 0%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
   width: 100%;

package/build-style/image/style-rtl.css

@@ -197,4 +197,102 @@
 
 .wp-block-image figure {
   margin: 0;
+}
+
+.wp-lightbox-container .img-container {
+  position: relative;
+}
+.wp-lightbox-container button {
+  border: none;
+  background: none;
+  cursor: zoom-in;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+}
+.wp-lightbox-container button:focus-visible {
+  outline: 5px auto #212121;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: 5px;
+}
+
+.wp-lightbox-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 100000;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  visibility: hidden;
+}
+.wp-lightbox-overlay .close-button {
+  font-size: 40px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  cursor: pointer;
+  z-index: 5000000;
+}
+.wp-lightbox-overlay .wp-block-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 3000000;
+  position: absolute;
+  flex-direction: column;
+}
+.wp-lightbox-overlay button {
+  border: none;
+  background: none;
+}
+.wp-lightbox-overlay .scrim {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2000000;
+  background-color: white;
+  opacity: 0.9;
+}
+.wp-lightbox-overlay.initialized {
+  animation: both turn-off-visibility 300ms;
+}
+.wp-lightbox-overlay.initialized img {
+  animation: both turn-off-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active {
+  visibility: visible;
+  animation: both turn-on-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active img {
+  animation: both turn-on-visibility 300ms;
+}
+
+@keyframes turn-on-visibility {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes turn-off-visibility {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  99% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+html.has-lightbox-open {
+  overflow: hidden;
 }

package/build-style/image/style.css

@@ -203,4 +203,102 @@
 
 .wp-block-image figure {
   margin: 0;
+}
+
+.wp-lightbox-container .img-container {
+  position: relative;
+}
+.wp-lightbox-container button {
+  border: none;
+  background: none;
+  cursor: zoom-in;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+}
+.wp-lightbox-container button:focus-visible {
+  outline: 5px auto #212121;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: 5px;
+}
+
+.wp-lightbox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  visibility: hidden;
+}
+.wp-lightbox-overlay .close-button {
+  font-size: 40px;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+  z-index: 5000000;
+}
+.wp-lightbox-overlay .wp-block-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 3000000;
+  position: absolute;
+  flex-direction: column;
+}
+.wp-lightbox-overlay button {
+  border: none;
+  background: none;
+}
+.wp-lightbox-overlay .scrim {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2000000;
+  background-color: white;
+  opacity: 0.9;
+}
+.wp-lightbox-overlay.initialized {
+  animation: both turn-off-visibility 300ms;
+}
+.wp-lightbox-overlay.initialized img {
+  animation: both turn-off-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active {
+  visibility: visible;
+  animation: both turn-on-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active img {
+  animation: both turn-on-visibility 300ms;
+}
+
+@keyframes turn-on-visibility {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes turn-off-visibility {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  99% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+html.has-lightbox-open {
+  overflow: hidden;
 }