diff --git a/marquee/build/block.json b/marquee/build/block.json
index 144b7d3..8c1547d 100644
--- a/marquee/build/block.json
+++ b/marquee/build/block.json
@@ -80,9 +80,7 @@
"justifyContent": "left"
}
},
- "interactivity": {
- "clientNavigation": true
- }
+ "interactivity": true
},
"allowedBlocks": [
"core/paragraph",
@@ -103,5 +101,6 @@
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
- "viewScript": "file:./view.js"
+ "render": "file:./render.php",
+ "viewScriptModule": "file:./view.js"
}
\ No newline at end of file
diff --git a/marquee/build/index.asset.php b/marquee/build/index.asset.php
index e146b4e..de9d1b0 100644
--- a/marquee/build/index.asset.php
+++ b/marquee/build/index.asset.php
@@ -1 +1 @@
- array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-element'), 'version' => '4e89a2d734fd7167347a');
+ array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-element'), 'version' => 'c8334640ad7b9b1b92c6');
diff --git a/marquee/build/index.js b/marquee/build/index.js
index 1299dd4..88259d6 100644
--- a/marquee/build/index.js
+++ b/marquee/build/index.js
@@ -63,92 +63,21 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/edit.js");
-/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./save */ "./src/save.js");
-/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
-/**
- * Registers a new block provided a unique name and an object defining its behavior.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
- */
+/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
-/**
- * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
- * All files containing `style` keyword are bundled together. The code used
- * gets applied both to the front of your site and to the editor.
- *
- * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
- */
-
/**
* Internal dependencies
*/
-
-
-/**
- * Every block starts by registering a new block type definition.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
- */
-(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_4__.name, {
- /**
- * @see ./edit.js
- */
- edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"],
- /**
- * @see ./save.js
- */
- save: _save__WEBPACK_IMPORTED_MODULE_3__["default"]
+(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
+ edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"]
});
/***/ }),
-/***/ "./src/save.js":
-/*!*********************!*\
- !*** ./src/save.js ***!
- \*********************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */ "default": () => (/* binding */ save)
-/* harmony export */ });
-/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
-/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);
-
-
-
-const cloneWithProps = (children, newProps) => {
- return _wordpress_element__WEBPACK_IMPORTED_MODULE_1__.Children.map(children, child => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(child, newProps));
-};
-function save() {
- const blockProps = _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save();
- const {
- children,
- ...innerBlocksProps
- } = _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useInnerBlocksProps.save({
- className: "wp-block-wpcomsp-marquee__inner"
- });
- const inner = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
- ...innerBlocksProps,
- children: children
- });
- const innerClone = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(inner);
- return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
- ...blockProps,
- children: [inner, innerClone]
- });
-}
-
-/***/ }),
-
/***/ "./src/editor.scss":
/*!*************************!*\
!*** ./src/editor.scss ***!
@@ -219,7 +148,7 @@ module.exports = window["wp"]["element"];
\************************/
/***/ ((module) => {
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"wpcomsp/marquee","version":"0.1.0","title":"Marquee","category":"widgets","icon":"smiley","description":"A simple marquee block that scrolls text horizontally and accepts a Paragraph, Heading or Image as a child block.","example":{},"supports":{"__experimentalOnEnter":true,"__experimentalOnMerge":true,"__experimentalSettings":true,"align":["wide","full"],"anchor":true,"ariaLabel":true,"html":false,"color":{"gradients":true,"heading":true,"button":true,"link":true,"__experimentalDefaultControls":{"background":true,"text":true}},"shadow":true,"spacing":{"margin":["top","bottom"],"padding":true,"blockGap":true,"__experimentalDefaultControls":{"padding":true,"blockGap":true}},"dimensions":{"minHeight":true},"__experimentalBorder":{"color":true,"radius":true,"style":true,"width":true,"__experimentalDefaultControls":{"color":true,"radius":true,"style":true,"width":true}},"typography":{"fontSize":true,"lineHeight":true,"__experimentalFontFamily":true,"__experimentalFontWeight":true,"__experimentalFontStyle":true,"__experimentalTextTransform":true,"__experimentalTextDecoration":true,"__experimentalLetterSpacing":true,"__experimentalDefaultControls":{"fontSize":true}},"layout":{"allowSizingOnChildren":false,"allowOrientation":false,"default":{"type":"flex","flexWrap":"nowrap","orientation":"horizontal","justifyContent":"left"}},"interactivity":{"clientNavigation":true}},"allowedBlocks":["core/paragraph","core/heading","core/image","core/button"],"attributes":{"tagName":{"type":"string","default":"div"},"allowedBlocks":{"type":"array"}},"textdomain":"marquee","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js"}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"wpcomsp/marquee","version":"0.1.0","title":"Marquee","category":"widgets","icon":"smiley","description":"A simple marquee block that scrolls text horizontally and accepts a Paragraph, Heading or Image as a child block.","example":{},"supports":{"__experimentalOnEnter":true,"__experimentalOnMerge":true,"__experimentalSettings":true,"align":["wide","full"],"anchor":true,"ariaLabel":true,"html":false,"color":{"gradients":true,"heading":true,"button":true,"link":true,"__experimentalDefaultControls":{"background":true,"text":true}},"shadow":true,"spacing":{"margin":["top","bottom"],"padding":true,"blockGap":true,"__experimentalDefaultControls":{"padding":true,"blockGap":true}},"dimensions":{"minHeight":true},"__experimentalBorder":{"color":true,"radius":true,"style":true,"width":true,"__experimentalDefaultControls":{"color":true,"radius":true,"style":true,"width":true}},"typography":{"fontSize":true,"lineHeight":true,"__experimentalFontFamily":true,"__experimentalFontWeight":true,"__experimentalFontStyle":true,"__experimentalTextTransform":true,"__experimentalTextDecoration":true,"__experimentalLetterSpacing":true,"__experimentalDefaultControls":{"fontSize":true}},"layout":{"allowSizingOnChildren":false,"allowOrientation":false,"default":{"type":"flex","flexWrap":"nowrap","orientation":"horizontal","justifyContent":"left"}},"interactivity":true},"allowedBlocks":["core/paragraph","core/heading","core/image","core/button"],"attributes":{"tagName":{"type":"string","default":"div"},"allowedBlocks":{"type":"array"}},"textdomain":"marquee","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","viewScriptModule":"file:./view.js"}');
/***/ })
diff --git a/marquee/build/index.js.map b/marquee/build/index.js.map
index 501edf0..357c8d5 100644
--- a/marquee/build/index.js.map
+++ b/marquee/build/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAC6E;AACjC;AAErB;AAAA;AAER,SAASO,IAAIA,CAAC;EAAEC;AAAW,CAAC,EAAE;EAC5C,MAAM;IAAEC,OAAO,EAAEC,OAAO,GAAG,KAAK;IAAEC;EAAc,CAAC,GAAGH,UAAU;;EAE9D;EACA,MAAMI,GAAG,GAAGV,0DAAM,CAAC,CAAC;EACpB,MAAMW,UAAU,GAAGb,sEAAa,CAAC;IAAEY;EAAI,CAAC,CAAC;EAEzC,MAAME,gBAAgB,GAAGb,4EAAmB,CAACY,UAAU,EAAE;IACxDE,eAAe,EAAEH,GAAG,CAACI,OAAO;IAC5BL;EACD,CAAC,CAAC;EAEF,oBACCP,sDAAA,CAAAE,uDAAA;IAAAW,QAAA,eACCb,sDAAA,CAACM,OAAO;MAAA,GAAKI;IAAgB,CAAG;EAAC,CAChC,CAAC;AAEL;;;;;;;;;;;;;;;;;ACzBA;AACA;AACA;AACA;AACA;AACsD;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACsB;;AAEtB;AACA;AACA;AAC0B;AACA;AACU;;AAEpC;AACA;AACA;AACA;AACA;AACAI,oEAAiB,CAAEE,6CAAa,EAAE;EACjC;AACD;AACA;EACCE,IAAI,EAAEf,6CAAI;EAEV;AACD;AACA;EACCY,IAAIA,+CAAAA;AACL,CAAE,CAAC;;;;;;;;;;;;;;;;;;;;ACtC0E;AACjB;AAAA;AAE5D,MAAMQ,cAAc,GAAGA,CAACV,QAAQ,EAAEW,QAAQ,KAAK;EAC9C,OAAOJ,wDAAQ,CAACK,GAAG,CAACZ,QAAQ,EAAGa,KAAK,IAAKP,gEAAY,CAACO,KAAK,EAAEF,QAAQ,CAAC,CAAC;AACxE,CAAC;AAEc,SAAST,IAAIA,CAAA,EAAG;EAC9B,MAAMN,UAAU,GAAGb,kEAAa,CAACmB,IAAI,CAAC,CAAC;EACvC,MAAM;IAAEF,QAAQ;IAAE,GAAGH;EAAiB,CAAC,GAAGb,wEAAmB,CAACkB,IAAI,CAAC;IAClEY,SAAS,EAAE;EACZ,CAAC,CAAC;EAEF,MAAMC,KAAK,gBAAG5B,sDAAA;IAAA,GAASU,gBAAgB;IAAAG,QAAA,EAAGA;EAAQ,CAAM,CAAC;EACzD,MAAMgB,UAAU,GAAGV,gEAAY,CAACS,KAAK,CAAC;EAEtC,oBACCN,uDAAA;IAAA,GAASb,UAAU;IAAAI,QAAA,GACjBe,KAAK,EACLC,UAAU;EAAA,CACP,CAAC;AAER;;;;;;;;;;;ACtBA;;;;;;;;;;;;ACAA;;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;UCAA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;UAEA;UACA;;;;;WCzBA;WACA;WACA;WACA;WACA,+BAA+B,wCAAwC;WACvE;WACA;WACA;WACA;WACA,iBAAiB,qBAAqB;WACtC;WACA;WACA,kBAAkB,qBAAqB;WACvC;WACA;WACA,KAAK;WACL;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;;;;WC3BA;WACA;WACA;WACA;WACA;WACA,iCAAiC,WAAW;WAC5C;WACA;;;;;WCPA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;;WAEA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,MAAM,qBAAqB;WAC3B;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;WACA;WACA;;;;;UEjDA;UACA;UACA;UACA;UACA","sources":["webpack://marquee/./src/edit.js","webpack://marquee/./src/index.js","webpack://marquee/./src/save.js","webpack://marquee/./src/editor.scss","webpack://marquee/./src/style.scss","webpack://marquee/external window \"ReactJSXRuntime\"","webpack://marquee/external window [\"wp\",\"blockEditor\"]","webpack://marquee/external window [\"wp\",\"blocks\"]","webpack://marquee/external window [\"wp\",\"element\"]","webpack://marquee/webpack/bootstrap","webpack://marquee/webpack/runtime/chunk loaded","webpack://marquee/webpack/runtime/compat get default export","webpack://marquee/webpack/runtime/define property getters","webpack://marquee/webpack/runtime/hasOwnProperty shorthand","webpack://marquee/webpack/runtime/make namespace object","webpack://marquee/webpack/runtime/jsonp chunk loading","webpack://marquee/webpack/before-startup","webpack://marquee/webpack/startup","webpack://marquee/webpack/after-startup"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from \"@wordpress/block-editor\";\nimport { useRef } from \"@wordpress/element\";\n\nimport \"./editor.scss\";\n\nexport default function Edit({ attributes }) {\n\tconst { tagName: TagName = \"div\", allowedBlocks } = attributes;\n\n\t// Hooks.\n\tconst ref = useRef();\n\tconst blockProps = useBlockProps({ ref });\n\n\tconst innerBlocksProps = useInnerBlocksProps(blockProps, {\n\t\tdropZoneElement: ref.current,\n\t\tallowedBlocks,\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\n\t);\n}\n","/**\n * Registers a new block provided a unique name and an object defining its behavior.\n *\n * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/\n */\nimport { registerBlockType } from '@wordpress/blocks';\n\n/**\n * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.\n * All files containing `style` keyword are bundled together. The code used\n * gets applied both to the front of your site and to the editor.\n *\n * @see https://www.npmjs.com/package/@wordpress/scripts#using-css\n */\nimport './style.scss';\n\n/**\n * Internal dependencies\n */\nimport Edit from './edit';\nimport save from './save';\nimport metadata from './block.json';\n\n/**\n * Every block starts by registering a new block type definition.\n *\n * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/\n */\nregisterBlockType( metadata.name, {\n\t/**\n\t * @see ./edit.js\n\t */\n\tedit: Edit,\n\n\t/**\n\t * @see ./save.js\n\t */\n\tsave,\n} );\n","import { useBlockProps, useInnerBlocksProps } from \"@wordpress/block-editor\";\nimport { cloneElement, Children } from \"@wordpress/element\";\n\nconst cloneWithProps = (children, newProps) => {\n\treturn Children.map(children, (child) => cloneElement(child, newProps));\n};\n\nexport default function save() {\n\tconst blockProps = useBlockProps.save();\n\tconst { children, ...innerBlocksProps } = useInnerBlocksProps.save({\n\t\tclassName: \"wp-block-wpcomsp-marquee__inner\",\n\t});\n\n\tconst inner = {children}
;\n\tconst innerClone = cloneElement(inner);\n\n\treturn (\n\t\t\n\t\t\t{inner}\n\t\t\t{innerClone}\n\t\t
\n\t);\n}\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","module.exports = window[\"ReactJSXRuntime\"];","module.exports = window[\"wp\"][\"blockEditor\"];","module.exports = window[\"wp\"][\"blocks\"];","module.exports = window[\"wp\"][\"element\"];","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var deferred = [];\n__webpack_require__.O = (result, chunkIds, fn, priority) => {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar [chunkIds, fn, priority] = deferred[i];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t\"index\": 0,\n\t\"./style-index\": 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar [chunkIds, moreModules, runtime] = data;\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = globalThis[\"webpackChunkmarquee\"] = globalThis[\"webpackChunkmarquee\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [\"./style-index\"], () => (__webpack_require__(\"./src/index.js\")))\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n",""],"names":["useBlockProps","useInnerBlocksProps","useRef","jsx","_jsx","Fragment","_Fragment","Edit","attributes","tagName","TagName","allowedBlocks","ref","blockProps","innerBlocksProps","dropZoneElement","current","children","registerBlockType","save","metadata","name","edit","cloneElement","Children","jsxs","_jsxs","cloneWithProps","newProps","map","child","className","inner","innerClone"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAC6E;AACjC;AAErB;AAAA;AAER,SAASO,IAAIA,CAAC;EAAEC;AAAW,CAAC,EAAE;EAC5C,MAAM;IAAEC,OAAO,EAAEC,OAAO,GAAG,KAAK;IAAEC;EAAc,CAAC,GAAGH,UAAU;;EAE9D;EACA,MAAMI,GAAG,GAAGV,0DAAM,CAAC,CAAC;EACpB,MAAMW,UAAU,GAAGb,sEAAa,CAAC;IAAEY;EAAI,CAAC,CAAC;EAEzC,MAAME,gBAAgB,GAAGb,4EAAmB,CAACY,UAAU,EAAE;IACxDE,eAAe,EAAEH,GAAG,CAACI,OAAO;IAC5BL;EACD,CAAC,CAAC;EAEF,oBACCP,sDAAA,CAAAE,uDAAA;IAAAW,QAAA,eACCb,sDAAA,CAACM,OAAO;MAAA,GAAKI;IAAgB,CAAG;EAAC,CAChC,CAAC;AAEL;;;;;;;;;;;;;;;;ACzBsD;AAEhC;;AAEtB;AACA;AACA;AAC0B;AACU;AAEpCI,oEAAiB,CAACC,6CAAa,EAAE;EAChCE,IAAI,EAAEd,6CAAIA;AACX,CAAC,CAAC;;;;;;;;;;;ACZF;;;;;;;;;;;;ACAA;;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;UCAA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;UAEA;UACA;;;;;WCzBA;WACA;WACA;WACA;WACA,+BAA+B,wCAAwC;WACvE;WACA;WACA;WACA;WACA,iBAAiB,qBAAqB;WACtC;WACA;WACA,kBAAkB,qBAAqB;WACvC;WACA;WACA,KAAK;WACL;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;;;;WC3BA;WACA;WACA;WACA;WACA;WACA,iCAAiC,WAAW;WAC5C;WACA;;;;;WCPA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;;WAEA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,MAAM,qBAAqB;WAC3B;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;WACA;WACA;;;;;UEjDA;UACA;UACA;UACA;UACA","sources":["webpack://marquee/./src/edit.js","webpack://marquee/./src/index.js","webpack://marquee/./src/editor.scss?0339","webpack://marquee/./src/style.scss?75bd","webpack://marquee/external window \"ReactJSXRuntime\"","webpack://marquee/external window [\"wp\",\"blockEditor\"]","webpack://marquee/external window [\"wp\",\"blocks\"]","webpack://marquee/external window [\"wp\",\"element\"]","webpack://marquee/webpack/bootstrap","webpack://marquee/webpack/runtime/chunk loaded","webpack://marquee/webpack/runtime/compat get default export","webpack://marquee/webpack/runtime/define property getters","webpack://marquee/webpack/runtime/hasOwnProperty shorthand","webpack://marquee/webpack/runtime/make namespace object","webpack://marquee/webpack/runtime/jsonp chunk loading","webpack://marquee/webpack/before-startup","webpack://marquee/webpack/startup","webpack://marquee/webpack/after-startup"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from \"@wordpress/block-editor\";\nimport { useRef } from \"@wordpress/element\";\n\nimport \"./editor.scss\";\n\nexport default function Edit({ attributes }) {\n\tconst { tagName: TagName = \"div\", allowedBlocks } = attributes;\n\n\t// Hooks.\n\tconst ref = useRef();\n\tconst blockProps = useBlockProps({ ref });\n\n\tconst innerBlocksProps = useInnerBlocksProps(blockProps, {\n\t\tdropZoneElement: ref.current,\n\t\tallowedBlocks,\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\n\t);\n}\n","import { registerBlockType } from \"@wordpress/blocks\";\n\nimport \"./style.scss\";\n\n/**\n * Internal dependencies\n */\nimport Edit from \"./edit\";\nimport metadata from \"./block.json\";\n\nregisterBlockType(metadata.name, {\n\tedit: Edit,\n});\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","module.exports = window[\"ReactJSXRuntime\"];","module.exports = window[\"wp\"][\"blockEditor\"];","module.exports = window[\"wp\"][\"blocks\"];","module.exports = window[\"wp\"][\"element\"];","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var deferred = [];\n__webpack_require__.O = (result, chunkIds, fn, priority) => {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar [chunkIds, fn, priority] = deferred[i];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t\"index\": 0,\n\t\"./style-index\": 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar [chunkIds, moreModules, runtime] = data;\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = globalThis[\"webpackChunkmarquee\"] = globalThis[\"webpackChunkmarquee\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [\"./style-index\"], () => (__webpack_require__(\"./src/index.js\")))\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n",""],"names":["useBlockProps","useInnerBlocksProps","useRef","jsx","_jsx","Fragment","_Fragment","Edit","attributes","tagName","TagName","allowedBlocks","ref","blockProps","innerBlocksProps","dropZoneElement","current","children","registerBlockType","metadata","name","edit"],"sourceRoot":""}
\ No newline at end of file
diff --git a/marquee/build/render.php b/marquee/build/render.php
new file mode 100644
index 0000000..44c1266
--- /dev/null
+++ b/marquee/build/render.php
@@ -0,0 +1,16 @@
+inner_blocks;
+ $inner_blocks_html = '';
+ foreach ($inner_blocks as $inner_block) {
+ $inner_blocks_html .= $inner_block->render();
+ }
+?>
+
+
+
'wp-block-wpcomsp-marquee__inner')); ?>>
+
+
+
+
'wp-block-wpcomsp-marquee__inner')); ?>>
+
+
+
{children}
;
- const innerClone = cloneElement(inner);
-
- return (
-
- {inner}
- {innerClone}
-
- );
-}
diff --git a/marquee/src/style.scss b/marquee/src/style.scss
index 5940356..57ecf03 100644
--- a/marquee/src/style.scss
+++ b/marquee/src/style.scss
@@ -2,6 +2,7 @@
// This block has customizable padding, border-box makes that more predictable.
box-sizing: border-box;
+ // TODO: This should be a setting of the block.
--speed: 10s;
--direction: normal;
}
@@ -13,6 +14,17 @@
position: relative;
}
+[data-wp-interactive="wpcomsp/marquee"] {
+ overflow: clip;
+ display: flex;
+ flex-direction: row;
+}
+
+.wp-block-wpcomsp-marquee__inner {
+ animation: wpcomsp-marquee var(--speed) linear infinite var(--direction);
+ min-width: 100%;
+}
+
@keyframes wpcomsp-marquee {
0% {
transform: translateX(0);
@@ -21,11 +33,3 @@
transform: translateX(calc(-100%));
}
}
-
-.wp-block-wpcomsp-marquee__inner {
- animation: wpcomsp-marquee var(--speed) linear infinite var(--direction);
-
- display: flex;
- overflow: hidden;
- flex-wrap: nowrap;
-}
diff --git a/marquee/src/view.js b/marquee/src/view.js
index e69de29..3a392ed 100644
--- a/marquee/src/view.js
+++ b/marquee/src/view.js
@@ -0,0 +1,11 @@
+import { store, getElement } from "@wordpress/interactivity";
+
+store("wpcomsp/marquee", {
+ callbacks: {
+ init: () => {
+ const { ref } = getElement();
+ const clonedElement = ref.firstElementChild.cloneNode(true);
+ ref.appendChild(clonedElement);
+ },
+ },
+});