diff --git a/marquee/build/block.json b/marquee/build/block.json index 9e5bc21..144b7d3 100644 --- a/marquee/build/block.json +++ b/marquee/build/block.json @@ -72,7 +72,13 @@ }, "layout": { "allowSizingOnChildren": false, - "allowOrientation": false + "allowOrientation": false, + "default": { + "type": "flex", + "flexWrap": "nowrap", + "orientation": "horizontal", + "justifyContent": "left" + } }, "interactivity": { "clientNavigation": true @@ -91,14 +97,6 @@ }, "allowedBlocks": { "type": "array" - }, - "layout": { - "type": "object", - "default": { - "flexWrap": "nowrap", - "type": "flex", - "orientation": "horizontal" - } } }, "textdomain": "marquee", diff --git a/marquee/build/index-rtl.css b/marquee/build/index-rtl.css index 2540be1..cffa1cd 100644 --- a/marquee/build/index-rtl.css +++ b/marquee/build/index-rtl.css @@ -10,20 +10,3 @@ margin-right: 0; margin-left: 0; } - -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child { - gap: inherit; - pointer-events: none; -} -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child, -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-default-block-appender__content, -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter { - display: inherit; - width: 100%; - flex-direction: inherit; - flex: 1; -} -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter, -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-button-block-appender { - pointer-events: all; -} diff --git a/marquee/build/index.asset.php b/marquee/build/index.asset.php index bee145d..e146b4e 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' => 'cdb4606f6ff9cde54c8f'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-element'), 'version' => '4e89a2d734fd7167347a'); diff --git a/marquee/build/index.css b/marquee/build/index.css index 8c6c7a1..81c3787 100644 --- a/marquee/build/index.css +++ b/marquee/build/index.css @@ -11,21 +11,4 @@ margin-right: 0; } -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child { - gap: inherit; - pointer-events: none; -} -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child, -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-default-block-appender__content, -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter { - display: inherit; - width: 100%; - flex-direction: inherit; - flex: 1; -} -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter, -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-button-block-appender { - pointer-events: all; -} - /*# sourceMappingURL=index.css.map*/ \ No newline at end of file diff --git a/marquee/build/index.css.map b/marquee/build/index.css.map index dead402..a16f494 100644 --- a/marquee/build/index.css.map +++ b/marquee/build/index.css.map @@ -1 +1 @@ -{"version":3,"file":"index.css","mappings":";;;AAGC;EACC;EACA;AAFF;;AAQC;EACC;EACA;AALF;;AAUA;EAEC;EAYA;AAnBD;AASC;;;EAGC;EACA;EACA;EACA;AAPF;AAYC;;EAEC;AAVF,C","sources":["webpack://marquee/./src/editor.scss"],"sourcesContent":[".wp-block-wpcomsp-marquee {\n\t// Ensure not rendering outside the element\n\t// as -1px causes overflow-x scrollbars\n\t.block-editor-block-list__insertion-point {\n\t\tleft: 0;\n\t\tright: 0;\n\t}\n}\n\n// // Place block list appender in the same place content will appear.\n[data-type=\"wpcomsp/marquee\"].is-selected {\n\t.block-list-appender {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n}\n\n// Affect the appender of the Row and Stack variants.\n.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block\n\t> .block-list-appender:only-child {\n\tgap: inherit;\n\n\t&,\n\t.block-editor-default-block-appender__content,\n\t.block-editor-inserter {\n\t\tdisplay: inherit;\n\t\twidth: 100%;\n\t\tflex-direction: inherit;\n\t\tflex: 1;\n\t}\n\n\t// Let the parent be selectable in the placeholder area.\n\tpointer-events: none;\n\t.block-editor-inserter,\n\t.block-editor-button-block-appender {\n\t\tpointer-events: all;\n\t}\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"index.css","mappings":";;;AAGC;EACC;EACA;AAFF;;AAQC;EACC;EACA;AALF,C","sources":["webpack://marquee/./src/editor.scss"],"sourcesContent":[".wp-block-wpcomsp-marquee {\n\t// Ensure not rendering outside the element\n\t// as -1px causes overflow-x scrollbars\n\t.block-editor-block-list__insertion-point {\n\t\tleft: 0;\n\t\tright: 0;\n\t}\n}\n\n// // Place block list appender in the same place content will appear.\n[data-type=\"wpcomsp/marquee\"].is-selected {\n\t.block-list-appender {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n}\n\n// Affect the appender of the Row and Stack variants.\n// .wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block\n// \t> .block-list-appender:only-child {\n// \tgap: inherit;\n\n// \t&,\n// \t.block-editor-default-block-appender__content,\n// \t.block-editor-inserter {\n// \t\tdisplay: inherit;\n// \t\twidth: 100%;\n// \t\tflex-direction: inherit;\n// \t\tflex: 1;\n// \t}\n\n// \t// Let the parent be selectable in the placeholder area.\n// \tpointer-events: none;\n// \t.block-editor-inserter,\n// \t.block-editor-button-block-appender {\n// \t\tpointer-events: all;\n// \t}\n// }\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/marquee/build/index.js b/marquee/build/index.js index 6f9747f..1299dd4 100644 --- a/marquee/build/index.js +++ b/marquee/build/index.js @@ -37,8 +37,7 @@ function Edit({ // Hooks. const ref = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.useRef)(); const blockProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps)({ - ref, - attributes + ref }); const innerBlocksProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useInnerBlocksProps)(blockProps, { dropZoneElement: ref.current, @@ -119,17 +118,32 @@ __webpack_require__.r(__webpack_exports__); /* 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 react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime"); -/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__); +/* 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__); -function save({ - attributes: { - tagName: Tag - } -}) { - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(Tag, { - ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useInnerBlocksProps.save(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save()) + +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] }); } @@ -205,7 +219,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}},"position":{"sticky":true},"typography":{"fontSize":true,"lineHeight":true,"__experimentalFontFamily":true,"__experimentalFontWeight":true,"__experimentalFontStyle":true,"__experimentalTextTransform":true,"__experimentalTextDecoration":true,"__experimentalLetterSpacing":true,"__experimentalDefaultControls":{"fontSize":true}},"layout":{"allowSizingOnChildren":true},"interactivity":{"clientNavigation":true}},"allowedBlocks":["core/paragraph","core/heading","core/image","core/button"],"attributes":{"tagName":{"type":"string","default":"div"},"allowedBlocks":{"type":"array"},"layout":{"type":"object","default":{"flexWrap":"nowrap","type":"flex"}}},"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":{"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"}'); /***/ }) diff --git a/marquee/build/index.js.map b/marquee/build/index.js.map index a78c917..501edf0 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,GAAG;IAAEJ;EAAW,CAAC,CAAC;EAErD,MAAMM,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;AAAA;AAE9D,SAASA,IAAIA,CAAC;EAAEX,UAAU,EAAE;IAAEC,OAAO,EAAEc;EAAI;AAAE,CAAC,EAAE;EAC9D,oBAAOnB,sDAAA,CAACmB,GAAG;IAAA,GAAKtB,wEAAmB,CAACkB,IAAI,CAACnB,kEAAa,CAACmB,IAAI,CAAC,CAAC;EAAC,CAAG,CAAC;AACnE;;;;;;;;;;;ACJA;;;;;;;;;;;;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, attributes });\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\";\n\nexport default function save({ attributes: { tagName: Tag } }) {\n\treturn ;\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","Tag"],"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;;;;;;;;;;;;;;;;;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 diff --git a/marquee/build/style-index-rtl.css b/marquee/build/style-index-rtl.css index b8aa06b..3dd9919 100644 --- a/marquee/build/style-index-rtl.css +++ b/marquee/build/style-index-rtl.css @@ -3,8 +3,25 @@ \***************************************************************************************************************************************************************************************************************************************/ .wp-block-wpcomsp-marquee { box-sizing: border-box; + --speed: 10s; + --direction: normal; } :where(.wp-block-wpcomsp-marquee.wp-block-wpcomsp-marquee-is-layout-constrained) { position: relative; } + +@keyframes wpcomsp-marquee { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(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/build/style-index.css b/marquee/build/style-index.css index 96678c5..46f93f1 100644 --- a/marquee/build/style-index.css +++ b/marquee/build/style-index.css @@ -3,10 +3,27 @@ \***************************************************************************************************************************************************************************************************************************************/ .wp-block-wpcomsp-marquee { box-sizing: border-box; + --speed: 10s; + --direction: normal; } :where(.wp-block-wpcomsp-marquee.wp-block-wpcomsp-marquee-is-layout-constrained) { position: relative; } +@keyframes wpcomsp-marquee { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-100%); + } +} +.wp-block-wpcomsp-marquee__inner { + animation: wpcomsp-marquee var(--speed) linear infinite var(--direction); + display: flex; + overflow: hidden; + flex-wrap: nowrap; +} + /*# sourceMappingURL=style-index.css.map*/ \ No newline at end of file diff --git a/marquee/build/style-index.css.map b/marquee/build/style-index.css.map index 44840ec..125cc84 100644 --- a/marquee/build/style-index.css.map +++ b/marquee/build/style-index.css.map @@ -1 +1 @@ -{"version":3,"file":"./style-index.css","mappings":";;;AAAA;EAEC;AAAD;;AAIA;EAGC;AAHD,C","sources":["webpack://marquee/./src/style.scss"],"sourcesContent":[".wp-block-wpcomsp-marquee {\n\t// This block has customizable padding, border-box makes that more predictable.\n\tbox-sizing: border-box;\n}\n\n// We need this so groups with negative margins overlap as expected.\n:where(\n\t\t.wp-block-wpcomsp-marquee.wp-block-wpcomsp-marquee-is-layout-constrained\n\t) {\n\tposition: relative;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"./style-index.css","mappings":";;;AAAA;EAEC;EAEA;EACA;AADD;;AAKA;EAGC;AAJD;;AAOA;EACC;IACC;EAJA;EAMD;IACC;EAJA;AACF;AAOA;EACC;EAEA;EACA;EACA;AAND,C","sources":["webpack://marquee/./src/style.scss"],"sourcesContent":[".wp-block-wpcomsp-marquee {\n\t// This block has customizable padding, border-box makes that more predictable.\n\tbox-sizing: border-box;\n\n\t--speed: 10s;\n\t--direction: normal;\n}\n\n// We need this so groups with negative margins overlap as expected.\n:where(\n\t\t.wp-block-wpcomsp-marquee.wp-block-wpcomsp-marquee-is-layout-constrained\n\t) {\n\tposition: relative;\n}\n\n@keyframes wpcomsp-marquee {\n\t0% {\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(calc(-100%));\n\t}\n}\n\n.wp-block-wpcomsp-marquee__inner {\n\tanimation: wpcomsp-marquee var(--speed) linear infinite var(--direction);\n\n\tdisplay: flex;\n\toverflow: hidden;\n\tflex-wrap: nowrap;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/marquee/src/block.json b/marquee/src/block.json index 7e4a108..6db490e 100644 --- a/marquee/src/block.json +++ b/marquee/src/block.json @@ -66,7 +66,13 @@ }, "layout": { "allowSizingOnChildren": false, - "allowOrientation": false + "allowOrientation": false, + "default": { + "type": "flex", + "flexWrap": "nowrap", + "orientation": "horizontal", + "justifyContent": "left" + } }, "interactivity": { "clientNavigation": true @@ -85,14 +91,6 @@ }, "allowedBlocks": { "type": "array" - }, - "layout": { - "type": "object", - "default": { - "flexWrap": "nowrap", - "type": "flex", - "orientation": "horizontal" - } } }, "textdomain": "marquee", diff --git a/marquee/src/edit.js b/marquee/src/edit.js index 8e1c63d..8eeeaf1 100644 --- a/marquee/src/edit.js +++ b/marquee/src/edit.js @@ -11,7 +11,7 @@ export default function Edit({ attributes }) { // Hooks. const ref = useRef(); - const blockProps = useBlockProps({ ref, attributes }); + const blockProps = useBlockProps({ ref }); const innerBlocksProps = useInnerBlocksProps(blockProps, { dropZoneElement: ref.current, diff --git a/marquee/src/editor.scss b/marquee/src/editor.scss index 724a702..b107b3a 100644 --- a/marquee/src/editor.scss +++ b/marquee/src/editor.scss @@ -16,23 +16,23 @@ } // Affect the appender of the Row and Stack variants. -.wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block - > .block-list-appender:only-child { - gap: inherit; +// .wp-block-wpcomsp-marquee.is-layout-flex.block-editor-block-list__block +// > .block-list-appender:only-child { +// gap: inherit; - &, - .block-editor-default-block-appender__content, - .block-editor-inserter { - display: inherit; - width: 100%; - flex-direction: inherit; - flex: 1; - } +// &, +// .block-editor-default-block-appender__content, +// .block-editor-inserter { +// display: inherit; +// width: 100%; +// flex-direction: inherit; +// flex: 1; +// } - // Let the parent be selectable in the placeholder area. - pointer-events: none; - .block-editor-inserter, - .block-editor-button-block-appender { - pointer-events: all; - } -} +// // Let the parent be selectable in the placeholder area. +// pointer-events: none; +// .block-editor-inserter, +// .block-editor-button-block-appender { +// pointer-events: all; +// } +// } diff --git a/marquee/src/save.js b/marquee/src/save.js index 3e9c2b3..9e48980 100644 --- a/marquee/src/save.js +++ b/marquee/src/save.js @@ -1,5 +1,23 @@ import { useBlockProps, useInnerBlocksProps } from "@wordpress/block-editor"; +import { cloneElement, Children } from "@wordpress/element"; -export default function save({ attributes: { tagName: Tag } }) { - return ; +const cloneWithProps = (children, newProps) => { + return Children.map(children, (child) => cloneElement(child, newProps)); +}; + +export default function save() { + const blockProps = useBlockProps.save(); + const { children, ...innerBlocksProps } = useInnerBlocksProps.save({ + className: "wp-block-wpcomsp-marquee__inner", + }); + + const inner =
{children}
; + const innerClone = cloneElement(inner); + + return ( +
+ {inner} + {innerClone} +
+ ); } diff --git a/marquee/src/style.scss b/marquee/src/style.scss index 7f7fd48..5940356 100644 --- a/marquee/src/style.scss +++ b/marquee/src/style.scss @@ -1,6 +1,9 @@ .wp-block-wpcomsp-marquee { // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; + + --speed: 10s; + --direction: normal; } // We need this so groups with negative margins overlap as expected. @@ -9,3 +12,20 @@ ) { position: relative; } + +@keyframes wpcomsp-marquee { + 0% { + transform: translateX(0); + } + 100% { + 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; +}