@wordpress/block-library 8.9.0 → 8.10.0

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

@@ -0,0 +1,193 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { useContext, useMemo, useEffect } from 'preact/hooks';
+import { deepSignal, peek } from 'deepsignal';
+/**
+ * Internal dependencies
+ */
+
+import { useSignalEffect } from './utils';
+import { directive } from './hooks';
+
+const isObject = item => item && typeof item === 'object' && !Array.isArray(item);
+
+const mergeDeepSignals = (target, source) => {
+  for (const k in source) {
+    if (typeof peek(target, k) === 'undefined') {
+      target[`$${k}`] = source[`$${k}`];
+    } else if (isObject(peek(target, k)) && isObject(peek(source, k))) {
+      mergeDeepSignals(target[`$${k}`].peek(), source[`$${k}`].peek());
+    }
+  }
+};
+
+export default (() => {
+  // data-wp-context
+  directive('context', _ref => {
+    let {
+      directives: {
+        context: {
+          default: context
+        }
+      },
+      props: {
+        children
+      },
+      context: inherited
+    } = _ref;
+    const {
+      Provider
+    } = inherited;
+    const inheritedValue = useContext(inherited);
+    const value = useMemo(() => {
+      const localValue = deepSignal(context);
+      mergeDeepSignals(localValue, inheritedValue);
+      return localValue;
+    }, [context, inheritedValue]);
+    return createElement(Provider, {
+      value: value
+    }, children);
+  }); // data-wp-effect.[name]
+
+  directive('effect', _ref2 => {
+    let {
+      directives: {
+        effect
+      },
+      context,
+      evaluate
+    } = _ref2;
+    const contextValue = useContext(context);
+    Object.values(effect).forEach(path => {
+      useSignalEffect(() => {
+        return evaluate(path, {
+          context: contextValue
+        });
+      });
+    });
+  }); // data-wp-init.[name]
+
+  directive('init', _ref3 => {
+    let {
+      directives: {
+        init
+      },
+      context,
+      evaluate
+    } = _ref3;
+    const contextValue = useContext(context);
+    Object.values(init).forEach(path => {
+      useEffect(() => {
+        return evaluate(path, {
+          context: contextValue
+        });
+      }, []);
+    });
+  }); // data-wp-on.[event]
+
+  directive('on', _ref4 => {
+    let {
+      directives: {
+        on
+      },
+      element,
+      evaluate,
+      context
+    } = _ref4;
+    const contextValue = useContext(context);
+    Object.entries(on).forEach(_ref5 => {
+      let [name, path] = _ref5;
+
+      element.props[`on${name}`] = event => {
+        evaluate(path, {
+          event,
+          context: contextValue
+        });
+      };
+    });
+  }); // data-wp-class.[classname]
+
+  directive('class', _ref6 => {
+    let {
+      directives: {
+        class: className
+      },
+      element,
+      evaluate,
+      context
+    } = _ref6;
+    const contextValue = useContext(context);
+    Object.keys(className).filter(n => n !== 'default').forEach(name => {
+      const result = evaluate(className[name], {
+        className: name,
+        context: contextValue
+      });
+      const currentClass = element.props.class || '';
+      const classFinder = new RegExp(`(^|\\s)${name}(\\s|$)`, 'g');
+      if (!result) element.props.class = currentClass.replace(classFinder, ' ').trim();else if (!classFinder.test(currentClass)) element.props.class = currentClass ? `${currentClass} ${name}` : name;
+      useEffect(() => {
+        // This seems necessary because Preact doesn't change the class
+        // names on the hydration, so we have to do it manually. It doesn't
+        // need deps because it only needs to do it the first time.
+        if (!result) {
+          element.ref.current.classList.remove(name);
+        } else {
+          element.ref.current.classList.add(name);
+        }
+      }, []);
+    });
+  }); // data-wp-bind.[attribute]
+
+  directive('bind', _ref7 => {
+    let {
+      directives: {
+        bind
+      },
+      element,
+      context,
+      evaluate
+    } = _ref7;
+    const contextValue = useContext(context);
+    Object.entries(bind).filter(n => n !== 'default').forEach(_ref8 => {
+      let [attribute, path] = _ref8;
+      const result = evaluate(path, {
+        context: contextValue
+      });
+      element.props[attribute] = result;
+      useEffect(() => {
+        // This seems necessary because Preact doesn't change the attributes
+        // on the hydration, so we have to do it manually. It doesn't need
+        // deps because it only needs to do it the first time.
+        if (result === false) {
+          element.ref.current.removeAttribute(attribute);
+        } else {
+          element.ref.current.setAttribute(attribute, result === true ? '' : result);
+        }
+      }, []);
+    });
+  }); // data-wp-ignore
+
+  directive('ignore', _ref9 => {
+    let {
+      element: {
+        type: Type,
+        props: {
+          innerHTML,
+          ...rest
+        }
+      }
+    } = _ref9;
+    // Preserve the initial inner HTML.
+    const cached = useMemo(() => innerHTML, []);
+    return createElement(Type, _extends({
+      dangerouslySetInnerHTML: {
+        __html: cached
+      }
+    }, rest));
+  });
+});
+//# sourceMappingURL=directives.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/utils/interactivity/directives.js"],"names":["useContext","useMemo","useEffect","deepSignal","peek","useSignalEffect","directive","isObject","item","Array","isArray","mergeDeepSignals","target","source","k","directives","context","default","props","children","inherited","Provider","inheritedValue","value","localValue","effect","evaluate","contextValue","Object","values","forEach","path","init","on","element","entries","name","event","class","className","keys","filter","n","result","currentClass","classFinder","RegExp","replace","trim","test","ref","current","classList","remove","add","bind","attribute","removeAttribute","setAttribute","type","Type","innerHTML","rest","cached","__html"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useContext, useMemo, useEffect } from 'preact/hooks';\nimport { deepSignal, peek } from 'deepsignal';\n\n/**\n * Internal dependencies\n */\nimport { useSignalEffect } from './utils';\nimport { directive } from './hooks';\n\nconst isObject = ( item ) =>\n\titem && typeof item === 'object' && ! Array.isArray( item );\n\nconst mergeDeepSignals = ( target, source ) => {\n\tfor ( const k in source ) {\n\t\tif ( typeof peek( target, k ) === 'undefined' ) {\n\t\t\ttarget[ `$${ k }` ] = source[ `$${ k }` ];\n\t\t} else if (\n\t\t\tisObject( peek( target, k ) ) &&\n\t\t\tisObject( peek( source, k ) )\n\t\t) {\n\t\t\tmergeDeepSignals(\n\t\t\t\ttarget[ `$${ k }` ].peek(),\n\t\t\t\tsource[ `$${ k }` ].peek()\n\t\t\t);\n\t\t}\n\t}\n};\n\nexport default () => {\n\t// data-wp-context\n\tdirective(\n\t\t'context',\n\t\t( {\n\t\t\tdirectives: {\n\t\t\t\tcontext: { default: context },\n\t\t\t},\n\t\t\tprops: { children },\n\t\t\tcontext: inherited,\n\t\t} ) => {\n\t\t\tconst { Provider } = inherited;\n\t\t\tconst inheritedValue = useContext( inherited );\n\t\t\tconst value = useMemo( () => {\n\t\t\t\tconst localValue = deepSignal( context );\n\t\t\t\tmergeDeepSignals( localValue, inheritedValue );\n\t\t\t\treturn localValue;\n\t\t\t}, [ context, inheritedValue ] );\n\n\t\t\treturn <Provider value={ value }>{ children }</Provider>;\n\t\t}\n\t);\n\n\t// data-wp-effect.[name]\n\tdirective( 'effect', ( { directives: { effect }, context, evaluate } ) => {\n\t\tconst contextValue = useContext( context );\n\t\tObject.values( effect ).forEach( ( path ) => {\n\t\t\tuseSignalEffect( () => {\n\t\t\t\treturn evaluate( path, { context: contextValue } );\n\t\t\t} );\n\t\t} );\n\t} );\n\n\t// data-wp-init.[name]\n\tdirective( 'init', ( { directives: { init }, context, evaluate } ) => {\n\t\tconst contextValue = useContext( context );\n\t\tObject.values( init ).forEach( ( path ) => {\n\t\t\tuseEffect( () => {\n\t\t\t\treturn evaluate( path, { context: contextValue } );\n\t\t\t}, [] );\n\t\t} );\n\t} );\n\n\t// data-wp-on.[event]\n\tdirective( 'on', ( { directives: { on }, element, evaluate, context } ) => {\n\t\tconst contextValue = useContext( context );\n\t\tObject.entries( on ).forEach( ( [ name, path ] ) => {\n\t\t\telement.props[ `on${ name }` ] = ( event ) => {\n\t\t\t\tevaluate( path, { event, context: contextValue } );\n\t\t\t};\n\t\t} );\n\t} );\n\n\t// data-wp-class.[classname]\n\tdirective(\n\t\t'class',\n\t\t( {\n\t\t\tdirectives: { class: className },\n\t\t\telement,\n\t\t\tevaluate,\n\t\t\tcontext,\n\t\t} ) => {\n\t\t\tconst contextValue = useContext( context );\n\t\t\tObject.keys( className )\n\t\t\t\t.filter( ( n ) => n !== 'default' )\n\t\t\t\t.forEach( ( name ) => {\n\t\t\t\t\tconst result = evaluate( className[ name ], {\n\t\t\t\t\t\tclassName: name,\n\t\t\t\t\t\tcontext: contextValue,\n\t\t\t\t\t} );\n\t\t\t\t\tconst currentClass = element.props.class || '';\n\t\t\t\t\tconst classFinder = new RegExp(\n\t\t\t\t\t\t`(^|\\\\s)${ name }(\\\\s|$)`,\n\t\t\t\t\t\t'g'\n\t\t\t\t\t);\n\t\t\t\t\tif ( ! result )\n\t\t\t\t\t\telement.props.class = currentClass\n\t\t\t\t\t\t\t.replace( classFinder, ' ' )\n\t\t\t\t\t\t\t.trim();\n\t\t\t\t\telse if ( ! classFinder.test( currentClass ) )\n\t\t\t\t\t\telement.props.class = currentClass\n\t\t\t\t\t\t\t? `${ currentClass } ${ name }`\n\t\t\t\t\t\t\t: name;\n\n\t\t\t\t\tuseEffect( () => {\n\t\t\t\t\t\t// This seems necessary because Preact doesn't change the class\n\t\t\t\t\t\t// names on the hydration, so we have to do it manually. It doesn't\n\t\t\t\t\t\t// need deps because it only needs to do it the first time.\n\t\t\t\t\t\tif ( ! result ) {\n\t\t\t\t\t\t\telement.ref.current.classList.remove( name );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\telement.ref.current.classList.add( name );\n\t\t\t\t\t\t}\n\t\t\t\t\t}, [] );\n\t\t\t\t} );\n\t\t}\n\t);\n\n\t// data-wp-bind.[attribute]\n\tdirective(\n\t\t'bind',\n\t\t( { directives: { bind }, element, context, evaluate } ) => {\n\t\t\tconst contextValue = useContext( context );\n\t\t\tObject.entries( bind )\n\t\t\t\t.filter( ( n ) => n !== 'default' )\n\t\t\t\t.forEach( ( [ attribute, path ] ) => {\n\t\t\t\t\tconst result = evaluate( path, {\n\t\t\t\t\t\tcontext: contextValue,\n\t\t\t\t\t} );\n\t\t\t\t\telement.props[ attribute ] = result;\n\n\t\t\t\t\tuseEffect( () => {\n\t\t\t\t\t\t// This seems necessary because Preact doesn't change the attributes\n\t\t\t\t\t\t// on the hydration, so we have to do it manually. It doesn't need\n\t\t\t\t\t\t// deps because it only needs to do it the first time.\n\t\t\t\t\t\tif ( result === false ) {\n\t\t\t\t\t\t\telement.ref.current.removeAttribute( attribute );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\telement.ref.current.setAttribute(\n\t\t\t\t\t\t\t\tattribute,\n\t\t\t\t\t\t\t\tresult === true ? '' : result\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t}, [] );\n\t\t\t\t} );\n\t\t}\n\t);\n\n\t// data-wp-ignore\n\tdirective(\n\t\t'ignore',\n\t\t( {\n\t\t\telement: {\n\t\t\t\ttype: Type,\n\t\t\t\tprops: { innerHTML, ...rest },\n\t\t\t},\n\t\t} ) => {\n\t\t\t// Preserve the initial inner HTML.\n\t\t\tconst cached = useMemo( () => innerHTML, [] );\n\t\t\treturn (\n\t\t\t\t<Type\n\t\t\t\t\tdangerouslySetInnerHTML={ { __html: cached } }\n\t\t\t\t\t{ ...rest }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n};\n"]}

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

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { h, options, createContext } from 'preact';
+import { useRef, useMemo } from 'preact/hooks';
+/**
+ * Internal dependencies
+ */
+
+import { rawStore as store } from './store'; // Main context.
+
+const context = createContext({}); // WordPress Directives.
+
+const directiveMap = {};
+export const directive = (name, cb) => {
+  directiveMap[name] = cb;
+}; // Resolve the path to some property of the store object.
+
+const resolve = (path, ctx) => {
+  // If path starts with !, remove it and save a flag.
+  const hasNegationOperator = path[0] === '!' && !!(path = path.slice(1));
+  let current = { ...store,
+    context: ctx
+  };
+  path.split('.').forEach(p => current = current[p]);
+  return hasNegationOperator ? !current : current;
+}; // Generate the evaluate function.
+
+
+const getEvaluate = function () {
+  let {
+    ref
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function (path) {
+    let extraArgs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const value = resolve(path, extraArgs.context);
+    return typeof value === 'function' ? value({
+      ref: ref.current,
+      ...store,
+      ...extraArgs
+    }) : value;
+  };
+}; // Directive wrapper.
+
+
+const Directive = _ref => {
+  let {
+    type,
+    directives,
+    props: originalProps
+  } = _ref;
+  const ref = useRef(null);
+  const element = h(type, { ...originalProps,
+    ref
+  });
+  const props = { ...originalProps,
+    children: element
+  };
+  const evaluate = useMemo(() => getEvaluate({
+    ref
+  }), []);
+  const directiveArgs = {
+    directives,
+    props,
+    element,
+    context,
+    evaluate
+  };
+
+  for (const d in directives) {
+    var _directiveMap$d;
+
+    const wrapper = (_directiveMap$d = directiveMap[d]) === null || _directiveMap$d === void 0 ? void 0 : _directiveMap$d.call(directiveMap, directiveArgs);
+    if (wrapper !== undefined) props.children = wrapper;
+  }
+
+  return props.children;
+}; // Preact Options Hook called each time a vnode is created.
+
+
+const old = options.vnode;
+
+options.vnode = vnode => {
+  if (vnode.props.__directives) {
+    const props = vnode.props;
+    const directives = props.__directives;
+    delete props.__directives;
+    vnode.props = {
+      type: vnode.type,
+      directives,
+      props
+    };
+    vnode.type = Directive;
+  }
+
+  if (old) old(vnode);
+};
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/utils/interactivity/hooks.js"],"names":["h","options","createContext","useRef","useMemo","rawStore","store","context","directiveMap","directive","name","cb","resolve","path","ctx","hasNegationOperator","slice","current","split","forEach","p","getEvaluate","ref","extraArgs","value","Directive","type","directives","props","originalProps","element","children","evaluate","directiveArgs","d","wrapper","undefined","old","vnode","__directives"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { h, options, createContext } from 'preact';\nimport { useRef, useMemo } from 'preact/hooks';\n/**\n * Internal dependencies\n */\nimport { rawStore as store } from './store';\n\n// Main context.\nconst context = createContext( {} );\n\n// WordPress Directives.\nconst directiveMap = {};\nexport const directive = ( name, cb ) => {\n\tdirectiveMap[ name ] = cb;\n};\n\n// Resolve the path to some property of the store object.\nconst resolve = ( path, ctx ) => {\n\t// If path starts with !, remove it and save a flag.\n\tconst hasNegationOperator =\n\t\tpath[ 0 ] === '!' && !! ( path = path.slice( 1 ) );\n\tlet current = { ...store, context: ctx };\n\tpath.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );\n\treturn hasNegationOperator ? ! current : current;\n};\n\n// Generate the evaluate function.\nconst getEvaluate =\n\t( { ref } = {} ) =>\n\t( path, extraArgs = {} ) => {\n\t\tconst value = resolve( path, extraArgs.context );\n\t\treturn typeof value === 'function'\n\t\t\t? value( {\n\t\t\t\t\tref: ref.current,\n\t\t\t\t\t...store,\n\t\t\t\t\t...extraArgs,\n\t\t\t  } )\n\t\t\t: value;\n\t};\n\n// Directive wrapper.\nconst Directive = ( { type, directives, props: originalProps } ) => {\n\tconst ref = useRef( null );\n\tconst element = h( type, { ...originalProps, ref } );\n\tconst props = { ...originalProps, children: element };\n\tconst evaluate = useMemo( () => getEvaluate( { ref } ), [] );\n\tconst directiveArgs = { directives, props, element, context, evaluate };\n\n\tfor ( const d in directives ) {\n\t\tconst wrapper = directiveMap[ d ]?.( directiveArgs );\n\t\tif ( wrapper !== undefined ) props.children = wrapper;\n\t}\n\n\treturn props.children;\n};\n\n// Preact Options Hook called each time a vnode is created.\nconst old = options.vnode;\noptions.vnode = ( vnode ) => {\n\tif ( vnode.props.__directives ) {\n\t\tconst props = vnode.props;\n\t\tconst directives = props.__directives;\n\t\tdelete props.__directives;\n\t\tvnode.props = {\n\t\t\ttype: vnode.type,\n\t\t\tdirectives,\n\t\t\tprops,\n\t\t};\n\t\tvnode.type = Directive;\n\t}\n\n\tif ( old ) old( vnode );\n};\n"]}

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

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { hydrate } from 'preact';
+/**
+ * Internal dependencies
+ */
+
+import { toVdom, hydratedIslands } from './vdom';
+import { createRootFragment } from './utils';
+import { directivePrefix } from './constants';
+export const init = async () => {
+  document.querySelectorAll(`[${directivePrefix}island]`).forEach(node => {
+    if (!hydratedIslands.has(node)) {
+      const fragment = createRootFragment(node.parentNode, node);
+      const vdom = toVdom(node);
+      hydrate(vdom, fragment);
+    }
+  });
+};
+//# sourceMappingURL=hydration.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/utils/interactivity/hydration.js"],"names":["hydrate","toVdom","hydratedIslands","createRootFragment","directivePrefix","init","document","querySelectorAll","forEach","node","has","fragment","parentNode","vdom"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,QAAxB;AACA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,eAAjB,QAAwC,QAAxC;AACA,SAASC,kBAAT,QAAmC,SAAnC;AACA,SAASC,eAAT,QAAgC,aAAhC;AAEA,OAAO,MAAMC,IAAI,GAAG,YAAY;AAC/BC,EAAAA,QAAQ,CACNC,gBADF,CACqB,IAAIH,eAAiB,SAD1C,EAEEI,OAFF,CAEaC,IAAF,IAAY;AACrB,QAAK,CAAEP,eAAe,CAACQ,GAAhB,CAAqBD,IAArB,CAAP,EAAqC;AACpC,YAAME,QAAQ,GAAGR,kBAAkB,CAAEM,IAAI,CAACG,UAAP,EAAmBH,IAAnB,CAAnC;AACA,YAAMI,IAAI,GAAGZ,MAAM,CAAEQ,IAAF,CAAnB;AACAT,MAAAA,OAAO,CAAEa,IAAF,EAAQF,QAAR,CAAP;AACA;AACD,GARF;AASA,CAVM","sourcesContent":["/**\n * External dependencies\n */\nimport { hydrate } from 'preact';\n/**\n * Internal dependencies\n */\nimport { toVdom, hydratedIslands } from './vdom';\nimport { createRootFragment } from './utils';\nimport { directivePrefix } from './constants';\n\nexport const init = async () => {\n\tdocument\n\t\t.querySelectorAll( `[${ directivePrefix }island]` )\n\t\t.forEach( ( node ) => {\n\t\t\tif ( ! hydratedIslands.has( node ) ) {\n\t\t\t\tconst fragment = createRootFragment( node.parentNode, node );\n\t\t\t\tconst vdom = toVdom( node );\n\t\t\t\thydrate( vdom, fragment );\n\t\t\t}\n\t\t} );\n};\n"]}

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

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import registerDirectives from './directives';
+import { init } from './hydration';
+export { store } from './store';
+/**
+ * Initialize the Interactivity API.
+ */
+
+registerDirectives();
+document.addEventListener('DOMContentLoaded', async () => {
+  await init(); // eslint-disable-next-line no-console
+
+  console.log('Interactivity API started');
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/utils/interactivity/index.js"],"names":["registerDirectives","init","store","document","addEventListener","console","log"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,kBAAP,MAA+B,cAA/B;AACA,SAASC,IAAT,QAAqB,aAArB;AACA,SAASC,KAAT,QAAsB,SAAtB;AAEA;AACA;AACA;;AACAF,kBAAkB;AAElBG,QAAQ,CAACC,gBAAT,CAA2B,kBAA3B,EAA+C,YAAY;AAC1D,QAAMH,IAAI,EAAV,CAD0D,CAE1D;;AACAI,EAAAA,OAAO,CAACC,GAAR,CAAa,2BAAb;AACA,CAJD","sourcesContent":["/**\n * Internal dependencies\n */\nimport registerDirectives from './directives';\nimport { init } from './hydration';\nexport { store } from './store';\n\n/**\n * Initialize the Interactivity API.\n */\nregisterDirectives();\n\ndocument.addEventListener( 'DOMContentLoaded', async () => {\n\tawait init();\n\t// eslint-disable-next-line no-console\n\tconsole.log( 'Interactivity API started' );\n} );\n"]}

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

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { deepSignal } from 'deepsignal';
+
+const isObject = item => item && typeof item === 'object' && !Array.isArray(item);
+
+const deepMerge = (target, source) => {
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, {
+          [key]: {}
+        });
+        deepMerge(target[key], source[key]);
+      } else {
+        Object.assign(target, {
+          [key]: source[key]
+        });
+      }
+    }
+  }
+};
+
+const getSerializedState = () => {
+  // TODO: change the store tag ID for a better one.
+  const storeTag = document.querySelector(`script[type="application/json"]#store`);
+  if (!storeTag) return {};
+
+  try {
+    const {
+      state
+    } = JSON.parse(storeTag.textContent);
+    if (isObject(state)) return state;
+    throw Error('Parsed state is not an object');
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log(e);
+  }
+
+  return {};
+};
+
+const rawState = getSerializedState();
+export const rawStore = {
+  state: deepSignal(rawState)
+};
+export const store = _ref => {
+  let {
+    state,
+    ...block
+  } = _ref;
+  deepMerge(rawStore, block);
+  deepMerge(rawState, state);
+};
+//# sourceMappingURL=store.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/utils/interactivity/store.js"],"names":["deepSignal","isObject","item","Array","isArray","deepMerge","target","source","key","Object","assign","getSerializedState","storeTag","document","querySelector","state","JSON","parse","textContent","Error","e","console","log","rawState","rawStore","store","block"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,YAA3B;;AAEA,MAAMC,QAAQ,GAAKC,IAAF,IAChBA,IAAI,IAAI,OAAOA,IAAP,KAAgB,QAAxB,IAAoC,CAAEC,KAAK,CAACC,OAAN,CAAeF,IAAf,CADvC;;AAGA,MAAMG,SAAS,GAAG,CAAEC,MAAF,EAAUC,MAAV,KAAsB;AACvC,MAAKN,QAAQ,CAAEK,MAAF,CAAR,IAAsBL,QAAQ,CAAEM,MAAF,CAAnC,EAAgD;AAC/C,SAAM,MAAMC,GAAZ,IAAmBD,MAAnB,EAA4B;AAC3B,UAAKN,QAAQ,CAAEM,MAAM,CAAEC,GAAF,CAAR,CAAb,EAAiC;AAChC,YAAK,CAAEF,MAAM,CAAEE,GAAF,CAAb,EAAuBC,MAAM,CAACC,MAAP,CAAeJ,MAAf,EAAuB;AAAE,WAAEE,GAAF,GAAS;AAAX,SAAvB;AACvBH,QAAAA,SAAS,CAAEC,MAAM,CAAEE,GAAF,CAAR,EAAiBD,MAAM,CAAEC,GAAF,CAAvB,CAAT;AACA,OAHD,MAGO;AACNC,QAAAA,MAAM,CAACC,MAAP,CAAeJ,MAAf,EAAuB;AAAE,WAAEE,GAAF,GAASD,MAAM,CAAEC,GAAF;AAAjB,SAAvB;AACA;AACD;AACD;AACD,CAXD;;AAaA,MAAMG,kBAAkB,GAAG,MAAM;AAChC;AACA,QAAMC,QAAQ,GAAGC,QAAQ,CAACC,aAAT,CACf,uCADe,CAAjB;AAGA,MAAK,CAAEF,QAAP,EAAkB,OAAO,EAAP;;AAClB,MAAI;AACH,UAAM;AAAEG,MAAAA;AAAF,QAAYC,IAAI,CAACC,KAAL,CAAYL,QAAQ,CAACM,WAArB,CAAlB;AACA,QAAKjB,QAAQ,CAAEc,KAAF,CAAb,EAAyB,OAAOA,KAAP;AACzB,UAAMI,KAAK,CAAE,+BAAF,CAAX;AACA,GAJD,CAIE,OAAQC,CAAR,EAAY;AACb;AACAC,IAAAA,OAAO,CAACC,GAAR,CAAaF,CAAb;AACA;;AACD,SAAO,EAAP;AACA,CAfD;;AAiBA,MAAMG,QAAQ,GAAGZ,kBAAkB,EAAnC;AACA,OAAO,MAAMa,QAAQ,GAAG;AAAET,EAAAA,KAAK,EAAEf,UAAU,CAAEuB,QAAF;AAAnB,CAAjB;AAEP,OAAO,MAAME,KAAK,GAAG,QAA2B;AAAA,MAAzB;AAAEV,IAAAA,KAAF;AAAS,OAAGW;AAAZ,GAAyB;AAC/CrB,EAAAA,SAAS,CAAEmB,QAAF,EAAYE,KAAZ,CAAT;AACArB,EAAAA,SAAS,CAAEkB,QAAF,EAAYR,KAAZ,CAAT;AACA,CAHM","sourcesContent":["/**\n * External dependencies\n */\nimport { deepSignal } from 'deepsignal';\n\nconst isObject = ( item ) =>\n\titem && typeof item === 'object' && ! Array.isArray( item );\n\nconst deepMerge = ( target, source ) => {\n\tif ( isObject( target ) && isObject( source ) ) {\n\t\tfor ( const key in source ) {\n\t\t\tif ( isObject( source[ key ] ) ) {\n\t\t\t\tif ( ! target[ key ] ) Object.assign( target, { [ key ]: {} } );\n\t\t\t\tdeepMerge( target[ key ], source[ key ] );\n\t\t\t} else {\n\t\t\t\tObject.assign( target, { [ key ]: source[ key ] } );\n\t\t\t}\n\t\t}\n\t}\n};\n\nconst getSerializedState = () => {\n\t// TODO: change the store tag ID for a better one.\n\tconst storeTag = document.querySelector(\n\t\t`script[type=\"application/json\"]#store`\n\t);\n\tif ( ! storeTag ) return {};\n\ttry {\n\t\tconst { state } = JSON.parse( storeTag.textContent );\n\t\tif ( isObject( state ) ) return state;\n\t\tthrow Error( 'Parsed state is not an object' );\n\t} catch ( e ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.log( e );\n\t}\n\treturn {};\n};\n\nconst rawState = getSerializedState();\nexport const rawStore = { state: deepSignal( rawState ) };\n\nexport const store = ( { state, ...block } ) => {\n\tdeepMerge( rawStore, block );\n\tdeepMerge( rawState, state );\n};\n"]}

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

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { useRef, useEffect } from 'preact/hooks';
+import { effect } from '@preact/signals';
+
+function afterNextFrame(callback) {
+  const done = () => {
+    window.cancelAnimationFrame(raf);
+    setTimeout(callback);
+  };
+
+  const raf = window.requestAnimationFrame(done);
+} // Using the mangled properties:
+// this.c: this._callback
+// this.x: this._compute
+// https://github.com/preactjs/signals/blob/main/mangle.json
+
+
+function createFlusher(compute, notify) {
+  let flush;
+  const dispose = effect(function () {
+    flush = this.c.bind(this);
+    this.x = compute;
+    this.c = notify;
+    return compute();
+  });
+  return {
+    flush,
+    dispose
+  };
+} // Version of `useSignalEffect` with a `useEffect`-like execution. This hook
+// implementation comes from this PR:
+// https://github.com/preactjs/signals/pull/290.
+//
+// We need to include it here in this repo until the mentioned PR is merged.
+
+
+export function useSignalEffect(cb) {
+  const callback = useRef(cb);
+  callback.current = cb;
+  useEffect(() => {
+    const execute = () => callback.current();
+
+    const notify = () => afterNextFrame(eff.flush);
+
+    const eff = createFlusher(execute, notify);
+    return eff.dispose;
+  }, []);
+} // For wrapperless hydration.
+// See https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c
+
+export const createRootFragment = (parent, replaceNode) => {
+  replaceNode = [].concat(replaceNode);
+  const s = replaceNode[replaceNode.length - 1].nextSibling;
+
+  function insert(c, r) {
+    parent.insertBefore(c, r || s);
+  }
+
+  return parent.__k = {
+    nodeType: 1,
+    parentNode: parent,
+    firstChild: replaceNode[0],
+    childNodes: replaceNode,
+    insertBefore: insert,
+    appendChild: insert,
+
+    removeChild(c) {
+      parent.removeChild(c);
+    }
+
+  };
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/utils/interactivity/utils.js"],"names":["useRef","useEffect","effect","afterNextFrame","callback","done","window","cancelAnimationFrame","raf","setTimeout","requestAnimationFrame","createFlusher","compute","notify","flush","dispose","c","bind","x","useSignalEffect","cb","current","execute","eff","createRootFragment","parent","replaceNode","concat","s","length","nextSibling","insert","r","insertBefore","__k","nodeType","parentNode","firstChild","childNodes","appendChild","removeChild"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,QAAkC,cAAlC;AACA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,SAASC,cAAT,CAAyBC,QAAzB,EAAoC;AACnC,QAAMC,IAAI,GAAG,MAAM;AAClBC,IAAAA,MAAM,CAACC,oBAAP,CAA6BC,GAA7B;AACAC,IAAAA,UAAU,CAAEL,QAAF,CAAV;AACA,GAHD;;AAIA,QAAMI,GAAG,GAAGF,MAAM,CAACI,qBAAP,CAA8BL,IAA9B,CAAZ;AACA,C,CAED;AACA;AACA;AACA;;;AACA,SAASM,aAAT,CAAwBC,OAAxB,EAAiCC,MAAjC,EAA0C;AACzC,MAAIC,KAAJ;AACA,QAAMC,OAAO,GAAGb,MAAM,CAAE,YAAY;AACnCY,IAAAA,KAAK,GAAG,KAAKE,CAAL,CAAOC,IAAP,CAAa,IAAb,CAAR;AACA,SAAKC,CAAL,GAASN,OAAT;AACA,SAAKI,CAAL,GAASH,MAAT;AACA,WAAOD,OAAO,EAAd;AACA,GALqB,CAAtB;AAMA,SAAO;AAAEE,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAP;AACA,C,CAED;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASI,eAAT,CAA0BC,EAA1B,EAA+B;AACrC,QAAMhB,QAAQ,GAAGJ,MAAM,CAAEoB,EAAF,CAAvB;AACAhB,EAAAA,QAAQ,CAACiB,OAAT,GAAmBD,EAAnB;AAEAnB,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMqB,OAAO,GAAG,MAAMlB,QAAQ,CAACiB,OAAT,EAAtB;;AACA,UAAMR,MAAM,GAAG,MAAMV,cAAc,CAAEoB,GAAG,CAACT,KAAN,CAAnC;;AACA,UAAMS,GAAG,GAAGZ,aAAa,CAAEW,OAAF,EAAWT,MAAX,CAAzB;AACA,WAAOU,GAAG,CAACR,OAAX;AACA,GALQ,EAKN,EALM,CAAT;AAMA,C,CAED;AACA;;AACA,OAAO,MAAMS,kBAAkB,GAAG,CAAEC,MAAF,EAAUC,WAAV,KAA2B;AAC5DA,EAAAA,WAAW,GAAG,GAAGC,MAAH,CAAWD,WAAX,CAAd;AACA,QAAME,CAAC,GAAGF,WAAW,CAAEA,WAAW,CAACG,MAAZ,GAAqB,CAAvB,CAAX,CAAsCC,WAAhD;;AACA,WAASC,MAAT,CAAiBf,CAAjB,EAAoBgB,CAApB,EAAwB;AACvBP,IAAAA,MAAM,CAACQ,YAAP,CAAqBjB,CAArB,EAAwBgB,CAAC,IAAIJ,CAA7B;AACA;;AACD,SAASH,MAAM,CAACS,GAAP,GAAa;AACrBC,IAAAA,QAAQ,EAAE,CADW;AAErBC,IAAAA,UAAU,EAAEX,MAFS;AAGrBY,IAAAA,UAAU,EAAEX,WAAW,CAAE,CAAF,CAHF;AAIrBY,IAAAA,UAAU,EAAEZ,WAJS;AAKrBO,IAAAA,YAAY,EAAEF,MALO;AAMrBQ,IAAAA,WAAW,EAAER,MANQ;;AAOrBS,IAAAA,WAAW,CAAExB,CAAF,EAAM;AAChBS,MAAAA,MAAM,CAACe,WAAP,CAAoBxB,CAApB;AACA;;AAToB,GAAtB;AAWA,CAjBM","sourcesContent":["/**\n * External dependencies\n */\nimport { useRef, useEffect } from 'preact/hooks';\nimport { effect } from '@preact/signals';\n\nfunction afterNextFrame( callback ) {\n\tconst done = () => {\n\t\twindow.cancelAnimationFrame( raf );\n\t\tsetTimeout( callback );\n\t};\n\tconst raf = window.requestAnimationFrame( done );\n}\n\n// Using the mangled properties:\n// this.c: this._callback\n// this.x: this._compute\n// https://github.com/preactjs/signals/blob/main/mangle.json\nfunction createFlusher( compute, notify ) {\n\tlet flush;\n\tconst dispose = effect( function () {\n\t\tflush = this.c.bind( this );\n\t\tthis.x = compute;\n\t\tthis.c = notify;\n\t\treturn compute();\n\t} );\n\treturn { flush, dispose };\n}\n\n// Version of `useSignalEffect` with a `useEffect`-like execution. This hook\n// implementation comes from this PR:\n// https://github.com/preactjs/signals/pull/290.\n//\n// We need to include it here in this repo until the mentioned PR is merged.\nexport function useSignalEffect( cb ) {\n\tconst callback = useRef( cb );\n\tcallback.current = cb;\n\n\tuseEffect( () => {\n\t\tconst execute = () => callback.current();\n\t\tconst notify = () => afterNextFrame( eff.flush );\n\t\tconst eff = createFlusher( execute, notify );\n\t\treturn eff.dispose;\n\t}, [] );\n}\n\n// For wrapperless hydration.\n// See https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c\nexport const createRootFragment = ( parent, replaceNode ) => {\n\treplaceNode = [].concat( replaceNode );\n\tconst s = replaceNode[ replaceNode.length - 1 ].nextSibling;\n\tfunction insert( c, r ) {\n\t\tparent.insertBefore( c, r || s );\n\t}\n\treturn ( parent.__k = {\n\t\tnodeType: 1,\n\t\tparentNode: parent,\n\t\tfirstChild: replaceNode[ 0 ],\n\t\tchildNodes: replaceNode,\n\t\tinsertBefore: insert,\n\t\tappendChild: insert,\n\t\tremoveChild( c ) {\n\t\t\tparent.removeChild( c );\n\t\t},\n\t} );\n};\n"]}

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

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import { h } from 'preact';
+/**
+ * Internal dependencies
+ */
+
+import { directivePrefix as p } from './constants';
+const ignoreAttr = `${p}ignore`;
+const islandAttr = `${p}island`;
+const directiveParser = new RegExp(`${p}([^.]+)\.?(.*)$`);
+export const hydratedIslands = new WeakSet(); // Recursive function that transforms a DOM tree into vDOM.
+
+export function toVdom(root) {
+  const treeWalker = document.createTreeWalker(root, 205 // ELEMENT + TEXT + COMMENT + CDATA_SECTION + PROCESSING_INSTRUCTION
+  );
+
+  function walk(node) {
+    const {
+      attributes,
+      nodeType
+    } = node;
+    if (nodeType === 3) return [node.data];
+
+    if (nodeType === 4) {
+      const next = treeWalker.nextSibling();
+      node.replaceWith(new window.Text(node.nodeValue));
+      return [node.nodeValue, next];
+    }
+
+    if (nodeType === 8 || nodeType === 7) {
+      const next = treeWalker.nextSibling();
+      node.remove();
+      return [null, next];
+    }
+
+    const props = {};
+    const children = [];
+    const directives = {};
+    let hasDirectives = false;
+    let ignore = false;
+    let island = false;
+
+    for (let i = 0; i < attributes.length; i++) {
+      const n = attributes[i].name;
+
+      if (n[p.length] && n.slice(0, p.length) === p) {
+        if (n === ignoreAttr) {
+          ignore = true;
+        } else if (n === islandAttr) {
+          island = true;
+        } else {
+          hasDirectives = true;
+          let val = attributes[i].value;
+
+          try {
+            val = JSON.parse(val);
+          } catch (e) {}
+
+          const [, prefix, suffix] = directiveParser.exec(n);
+          directives[prefix] = directives[prefix] || {};
+          directives[prefix][suffix || 'default'] = val;
+        }
+      } else if (n === 'ref') {
+        continue;
+      }
+
+      props[n] = attributes[i].value;
+    }
+
+    if (ignore && !island) return [h(node.localName, { ...props,
+      innerHTML: node.innerHTML,
+      __directives: {
+        ignore: true
+      }
+    })];
+    if (island) hydratedIslands.add(node);
+    if (hasDirectives) props.__directives = directives;
+    let child = treeWalker.firstChild();
+
+    if (child) {
+      while (child) {
+        const [vnode, nextChild] = walk(child);
+        if (vnode) children.push(vnode);
+        child = nextChild || treeWalker.nextSibling();
+      }
+
+      treeWalker.parentNode();
+    }
+
+    return [h(node.localName, props, children)];
+  }
+
+  return walk(treeWalker.currentNode);
+}
+//# sourceMappingURL=vdom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/utils/interactivity/vdom.js"],"names":["h","directivePrefix","p","ignoreAttr","islandAttr","directiveParser","RegExp","hydratedIslands","WeakSet","toVdom","root","treeWalker","document","createTreeWalker","walk","node","attributes","nodeType","data","next","nextSibling","replaceWith","window","Text","nodeValue","remove","props","children","directives","hasDirectives","ignore","island","i","length","n","name","slice","val","value","JSON","parse","e","prefix","suffix","exec","localName","innerHTML","__directives","add","child","firstChild","vnode","nextChild","push","parentNode","currentNode"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { h } from 'preact';\n/**\n * Internal dependencies\n */\nimport { directivePrefix as p } from './constants';\n\nconst ignoreAttr = `${ p }ignore`;\nconst islandAttr = `${ p }island`;\nconst directiveParser = new RegExp( `${ p }([^.]+)\\.?(.*)$` );\n\nexport const hydratedIslands = new WeakSet();\n\n// Recursive function that transforms a DOM tree into vDOM.\nexport function toVdom( root ) {\n\tconst treeWalker = document.createTreeWalker(\n\t\troot,\n\t\t205 // ELEMENT + TEXT + COMMENT + CDATA_SECTION + PROCESSING_INSTRUCTION\n\t);\n\n\tfunction walk( node ) {\n\t\tconst { attributes, nodeType } = node;\n\n\t\tif ( nodeType === 3 ) return [ node.data ];\n\t\tif ( nodeType === 4 ) {\n\t\t\tconst next = treeWalker.nextSibling();\n\t\t\tnode.replaceWith( new window.Text( node.nodeValue ) );\n\t\t\treturn [ node.nodeValue, next ];\n\t\t}\n\t\tif ( nodeType === 8 || nodeType === 7 ) {\n\t\t\tconst next = treeWalker.nextSibling();\n\t\t\tnode.remove();\n\t\t\treturn [ null, next ];\n\t\t}\n\n\t\tconst props = {};\n\t\tconst children = [];\n\t\tconst directives = {};\n\t\tlet hasDirectives = false;\n\t\tlet ignore = false;\n\t\tlet island = false;\n\n\t\tfor ( let i = 0; i < attributes.length; i++ ) {\n\t\t\tconst n = attributes[ i ].name;\n\t\t\tif ( n[ p.length ] && n.slice( 0, p.length ) === p ) {\n\t\t\t\tif ( n === ignoreAttr ) {\n\t\t\t\t\tignore = true;\n\t\t\t\t} else if ( n === islandAttr ) {\n\t\t\t\t\tisland = true;\n\t\t\t\t} else {\n\t\t\t\t\thasDirectives = true;\n\t\t\t\t\tlet val = attributes[ i ].value;\n\t\t\t\t\ttry {\n\t\t\t\t\t\tval = JSON.parse( val );\n\t\t\t\t\t} catch ( e ) {}\n\t\t\t\t\tconst [ , prefix, suffix ] = directiveParser.exec( n );\n\t\t\t\t\tdirectives[ prefix ] = directives[ prefix ] || {};\n\t\t\t\t\tdirectives[ prefix ][ suffix || 'default' ] = val;\n\t\t\t\t}\n\t\t\t} else if ( n === 'ref' ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tprops[ n ] = attributes[ i ].value;\n\t\t}\n\n\t\tif ( ignore && ! island )\n\t\t\treturn [\n\t\t\t\th( node.localName, {\n\t\t\t\t\t...props,\n\t\t\t\t\tinnerHTML: node.innerHTML,\n\t\t\t\t\t__directives: { ignore: true },\n\t\t\t\t} ),\n\t\t\t];\n\t\tif ( island ) hydratedIslands.add( node );\n\n\t\tif ( hasDirectives ) props.__directives = directives;\n\n\t\tlet child = treeWalker.firstChild();\n\t\tif ( child ) {\n\t\t\twhile ( child ) {\n\t\t\t\tconst [ vnode, nextChild ] = walk( child );\n\t\t\t\tif ( vnode ) children.push( vnode );\n\t\t\t\tchild = nextChild || treeWalker.nextSibling();\n\t\t\t}\n\t\t\ttreeWalker.parentNode();\n\t\t}\n\n\t\treturn [ h( node.localName, props, children ) ];\n\t}\n\n\treturn walk( treeWalker.currentNode );\n}\n"]}

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

@@ -95,6 +95,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box; direction: ltr;
   /**
    * Set a default background color for has-background-dim _unless_ it includes another

package/build-style/cover/style.css

@@ -95,6 +95,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box;
   /*rtl:raw: direction: ltr; */
   /**