├── .editorconfig ├── .gitattributes ├── .gitignore ├── README.md ├── build ├── block.json ├── card │ ├── block.json │ ├── index.asset.php │ ├── index.css │ ├── index.css.map │ ├── index.js │ ├── index.js.map │ ├── render.php │ ├── style-index.css │ └── style-index.css.map ├── index.asset.php ├── index.js ├── index.js.map ├── render.php ├── style-index.css └── style-index.css.map ├── cards-block.php ├── package-lock.json ├── package.json ├── readme.txt └── src ├── block.json ├── card ├── block.json ├── edit.js ├── editor.scss ├── index.js ├── render.php └── style.scss ├── edit.js ├── index.js ├── render.php └── style.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab 15 | 16 | [*.{yml,yaml}] 17 | indent_style = space 18 | indent_size = 2 19 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Omit workflows from export 5 | .github/workflows/* export-ignore 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # System 9 | .DS_Store 10 | 11 | # Coverage directory used by tools like istanbul 12 | coverage 13 | 14 | # Compiled binary addons (https://nodejs.org/api/addons.html) 15 | build/Release 16 | 17 | # Dependency directories 18 | node_modules/ 19 | 20 | # Optional npm cache directory 21 | .npm 22 | 23 | # Optional eslint cache 24 | .eslintcache 25 | 26 | # Output of `npm pack` 27 | *.tgz 28 | 29 | # Output of `wp-scripts plugin-zip` 30 | *.zip 31 | 32 | # dotenv environment variables file 33 | .env 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cards Block 2 | 3 | A WordPress block to add a collection of simple cards to your site, as seen on [my blog](https://rich.blog), and built with [@wordpress/create-block](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/). 4 | 5 | [Read about it on my blog →](https://rich.blog/cards-block/) 6 | 7 | ### Visual 8 | https://github.com/richtabor/cards-block/assets/1813435/1a50296f-1af7-49f9-89d3-f1fe91c52791 9 | -------------------------------------------------------------------------------- /build/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 3, 4 | "name": "tabor/cards", 5 | "version": "0.1.0", 6 | "title": "Cards", 7 | "category": "design", 8 | "allowedBlocks": [ 9 | "tabor/card" 10 | ], 11 | "icon": "smiley", 12 | "description": "A collection of simple cards to add to your site.", 13 | "attributes": { 14 | "taxonomy": { 15 | "type": "string", 16 | "default": "post_tag" 17 | }, 18 | "showTagCounts": { 19 | "type": "boolean", 20 | "default": false 21 | }, 22 | "smallestFontSize": { 23 | "type": "string", 24 | "default": "8pt" 25 | }, 26 | "largestFontSize": { 27 | "type": "string", 28 | "default": "22pt" 29 | } 30 | }, 31 | "supports": { 32 | "html": false, 33 | "align": [ 34 | "wide", 35 | "full" 36 | ], 37 | "layout": { 38 | "allowSwitching": false, 39 | "allowInheriting": false, 40 | "allowEditing": false, 41 | "default": { 42 | "type": "grid", 43 | "flexWrap": "wrap" 44 | } 45 | }, 46 | "color": { 47 | "background": true, 48 | "text": true 49 | }, 50 | "__experimentalBorder": { 51 | "color": true, 52 | "width": true, 53 | "style": true, 54 | "radius": true, 55 | "__experimentalDefaultControls": { 56 | "color": false, 57 | "width": false, 58 | "style": false, 59 | "radius": false 60 | } 61 | }, 62 | "spacing": { 63 | "margin": true, 64 | "padding": true, 65 | "blockGap": { 66 | "__experimentalDefault": "6px" 67 | }, 68 | "__experimentalDefaultControls": { 69 | "blockGap": false, 70 | "padding": false, 71 | "margin": false 72 | } 73 | }, 74 | "typography": { 75 | "fontSize": true, 76 | "lineHeight": true, 77 | "__experimentalFontFamily": true, 78 | "__experimentalFontWeight": true, 79 | "__experimentalFontStyle": true, 80 | "__experimentalTextTransform": true, 81 | "__experimentalTextDecoration": true, 82 | "__experimentalLetterSpacing": true, 83 | "__experimentalDefaultControls": { 84 | "fontSize": true 85 | } 86 | } 87 | }, 88 | "textdomain": "tabor-cards", 89 | "editorScript": "file:./index.js", 90 | "editorStyle": "file:./index.css", 91 | "style": "file:./style-index.css", 92 | "render": "file:./render.php" 93 | } -------------------------------------------------------------------------------- /build/card/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schemas.wp.org/trunk/block.json", 3 | "apiVersion": 2, 4 | "name": "tabor/card", 5 | "version": "0.1.0", 6 | "title": "Card", 7 | "category": "design", 8 | "icon": "smiley", 9 | "parent": [ 10 | "tabor/cards" 11 | ], 12 | "description": "", 13 | "attributes": { 14 | "title": { 15 | "type": "string" 16 | }, 17 | "link": { 18 | "type": "string" 19 | }, 20 | "description": { 21 | "type": "string" 22 | }, 23 | "image": { 24 | "type": "string", 25 | "default": null 26 | }, 27 | "isOverflowTitle": { 28 | "type": "boolean", 29 | "default": false 30 | }, 31 | "isOverflowDescription": { 32 | "type": "boolean", 33 | "default": false 34 | } 35 | }, 36 | "supports": { 37 | "html": false, 38 | "color": { 39 | "background": true, 40 | "text": true 41 | }, 42 | "__experimentalBorder": { 43 | "color": true, 44 | "width": true, 45 | "style": true, 46 | "radius": true, 47 | "__experimentalDefaultControls": { 48 | "color": false, 49 | "width": false, 50 | "style": false, 51 | "radius": false 52 | } 53 | } 54 | }, 55 | "textdomain": "tabor-card", 56 | "editorScript": "file:./index.js", 57 | "editorStyle": "file:./index.css", 58 | "style": "file:./style-index.css", 59 | "render": "file:./render.php" 60 | } -------------------------------------------------------------------------------- /build/card/index.asset.php: -------------------------------------------------------------------------------- 1 | array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-editor', 'wp-element', 'wp-i18n'), 'version' => 'ebf19d0a312ba5ccf143'); 2 | -------------------------------------------------------------------------------- /build/card/index.css: -------------------------------------------------------------------------------- 1 | /*!*********************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/card/editor.scss ***! 3 | \*********************************************************************************************************************************************************************************************************************************************/ 4 | .wp-block-tabor-card:not(.is-selected) .wp-block-tabor-card__title, 5 | .wp-block-tabor-card:not(.is-selected) .wp-block-tabor-card__description { 6 | white-space: nowrap !important; 7 | } 8 | 9 | .wp-block-tabor-card:active { 10 | transform: scale(1) !important; 11 | } 12 | 13 | /*# sourceMappingURL=index.css.map*/ -------------------------------------------------------------------------------- /build/card/index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"card/index.css","mappings":";;;AAEC;;EAEC;AADF;;AAKA;EACI;AAFJ,C","sources":["webpack://tabor-cards-block/./src/card/editor.scss"],"sourcesContent":[".wp-block-tabor-card:not(.is-selected) {\n\n\t.wp-block-tabor-card__title,\n\t.wp-block-tabor-card__description {\n\t\twhite-space: nowrap !important;\n\t}\n}\n\n.wp-block-tabor-card:active {\n transform: scale(1) !important;\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /build/card/index.js: -------------------------------------------------------------------------------- 1 | /******/ (function() { // webpackBootstrap 2 | /******/ var __webpack_modules__ = ({ 3 | 4 | /***/ "./src/card/edit.js": 5 | /*!**************************!*\ 6 | !*** ./src/card/edit.js ***! 7 | \**************************/ 8 | /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 9 | 10 | "use strict"; 11 | __webpack_require__.r(__webpack_exports__); 12 | /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); 13 | /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); 14 | /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"); 15 | /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__); 16 | /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); 17 | /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__); 18 | /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n"); 19 | /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__); 20 | /* harmony import */ var _wordpress_editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/editor */ "@wordpress/editor"); 21 | /* harmony import */ var _wordpress_editor__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_editor__WEBPACK_IMPORTED_MODULE_4__); 22 | /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); 23 | /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__); 24 | /* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./editor.scss */ "./src/card/editor.scss"); 25 | 26 | /** 27 | * External dependencies 28 | */ 29 | 30 | 31 | /** 32 | * WordPress dependencies 33 | */ 34 | 35 | 36 | 37 | 38 | 39 | 40 | /** 41 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. 42 | * Those files can contain any CSS code that gets applied to the editor. 43 | * 44 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css 45 | */ 46 | 47 | function CardEdit({ 48 | attributes, 49 | setAttributes 50 | }) { 51 | const { 52 | description, 53 | title, 54 | image, 55 | link, 56 | isOverflowTitle, 57 | isOverflowDescription 58 | } = attributes; 59 | 60 | // const titleRef = useRef( null ); 61 | // const descriptionRef = useRef( null ); 62 | 63 | // useEffect(() => { 64 | // // Function to check if the content of an element is multiline 65 | // const checkForMultiLine = ( element ) => { 66 | // if (element) { 67 | // const lineHeight = parseFloat(getComputedStyle( element ).lineHeight); 68 | // const height = element.offsetHeight; 69 | // return height > lineHeight; 70 | // } 71 | // return false; 72 | // }; 73 | 74 | // // Set attribute based on title's multiline status. 75 | // const isTitleMultiline = checkForMultiLine( titleRef.current ); 76 | // setAttributes( { isOverflowTitle: isTitleMultiline } ); 77 | 78 | // // Set attribute based on description's multiline status. 79 | // const isDescriptionMultiline = checkForMultiLine( descriptionRef.current ); 80 | // setAttributes( { isOverflowDescription: isDescriptionMultiline } ); 81 | 82 | // // console.log('desc' + isDescriptionMultiline); 83 | // // console.log('title' + isTitleMultiline); 84 | 85 | // }, [ title, description ]); 86 | 87 | function onChange(attribute) { 88 | return newValue => { 89 | setAttributes({ 90 | [attribute]: newValue 91 | }); 92 | }; 93 | } 94 | function onSelectImage(media) { 95 | if (!media || !media.url) { 96 | // In this case there was an error 97 | // previous attributes should be removed 98 | // because they may be temporary blob urls. 99 | setAttributes({ 100 | image: undefined 101 | }); 102 | return; 103 | } 104 | 105 | // Sets the block's attribute and updates the edit component from the selected media. 106 | setAttributes({ 107 | image: media.url 108 | }); 109 | } 110 | const blockProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.useBlockProps)({ 111 | className: 'remove-outline' 112 | }); 113 | const onDropImage = files => { 114 | (0,_wordpress_editor__WEBPACK_IMPORTED_MODULE_4__.mediaUpload)({ 115 | allowedTypes: ['image'], 116 | filesList: files, 117 | onFileChange: ([media]) => { 118 | setAttributes({ 119 | image: media.url 120 | }); 121 | } 122 | }); 123 | }; 124 | const onRemoveImage = () => { 125 | setAttributes({ 126 | image: undefined 127 | }); 128 | }; 129 | const dropZone = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.DropZone, { 130 | label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Drop image', 'tabor'), 131 | onFilesDrop: onDropImage 132 | }); 133 | const inspectorControls = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, { 134 | title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Link') 135 | }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.TextControl, { 136 | value: link, 137 | onChange: onChange('link'), 138 | __next40pxDefaultSize: true, 139 | __nextHasNoMarginBottom: true 140 | }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ToggleControl, { 141 | __nextHasNoMarginBottom: true, 142 | label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Overflow title'), 143 | checked: isOverflowTitle, 144 | onChange: () => setAttributes({ 145 | isOverflowTitle: !isOverflowTitle 146 | }) 147 | }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ToggleControl, { 148 | __nextHasNoMarginBottom: true, 149 | label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Overflow description'), 150 | checked: isOverflowDescription, 151 | onChange: () => setAttributes({ 152 | isOverflowDescription: !isOverflowDescription 153 | }) 154 | }))); 155 | const blockControls = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.BlockControls, { 156 | group: "other" 157 | }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.MediaReplaceFlow, { 158 | mediaURL: image, 159 | allowedTypes: ['image'], 160 | accept: "image/*", 161 | onSelect: onSelectImage, 162 | name: !image ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Add Image') : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Replace') 163 | }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.MenuItem, { 164 | onClick: onRemoveImage 165 | }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Reset')))); 166 | return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, blockControls, inspectorControls, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { 167 | ...blockProps 168 | }, dropZone, image && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", { 169 | class: "wp-block-tabor-card__image" 170 | }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { 171 | alt: title, 172 | src: image 173 | })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", { 174 | className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('wp-block-tabor-card__content', { 175 | 'has-image': image 176 | }) 177 | }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.RichText 178 | // ref={ titleRef } 179 | , { 180 | identifier: "title", 181 | tagName: "span", 182 | className: "wp-block-tabor-card__title", 183 | value: title, 184 | multiline: false, 185 | onChange: onChange('title'), 186 | "aria-label": title ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Card title', 'tabor') : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Empty title', 'tabor'), 187 | "data-empty": title ? false : true, 188 | placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Card title', 'tabor'), 189 | allowedFormats: [] 190 | }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.RichText 191 | // ref={ descriptionRef } 192 | , { 193 | identifier: "description", 194 | tagName: "span", 195 | className: "wp-block-tabor-card__description", 196 | value: description, 197 | multiline: false, 198 | onChange: onChange('description'), 199 | "aria-label": title ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Card description', 'sellhero') : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Empty description', 'tabor'), 200 | "data-empty": description ? false : true, 201 | placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Card description', 'tabor'), 202 | allowedFormats: [] 203 | })))); 204 | } 205 | /* harmony default export */ __webpack_exports__["default"] = (CardEdit); 206 | 207 | /***/ }), 208 | 209 | /***/ "./src/card/index.js": 210 | /*!***************************!*\ 211 | !*** ./src/card/index.js ***! 212 | \***************************/ 213 | /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 214 | 215 | "use strict"; 216 | __webpack_require__.r(__webpack_exports__); 217 | /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); 218 | /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__); 219 | /* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/card/style.scss"); 220 | /* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/card/edit.js"); 221 | /* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/card/block.json"); 222 | /** 223 | * Registers a new block provided a unique name and an object defining its behavior. 224 | * 225 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 226 | */ 227 | 228 | 229 | /** 230 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. 231 | * All files containing `style` keyword are bundled together. The code used 232 | * gets applied both to the front of your site and to the editor. 233 | * 234 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css 235 | */ 236 | 237 | 238 | /** 239 | * Internal dependencies 240 | */ 241 | 242 | 243 | 244 | /** 245 | * Every block starts by registering a new block type definition. 246 | * 247 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 248 | */ 249 | (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, { 250 | /** 251 | * @see ./edit.js 252 | */ 253 | edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"] 254 | }); 255 | 256 | /***/ }), 257 | 258 | /***/ "./node_modules/classnames/index.js": 259 | /*!******************************************!*\ 260 | !*** ./node_modules/classnames/index.js ***! 261 | \******************************************/ 262 | /***/ (function(module, exports) { 263 | 264 | var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! 265 | Copyright (c) 2018 Jed Watson. 266 | Licensed under the MIT License (MIT), see 267 | http://jedwatson.github.io/classnames 268 | */ 269 | /* global define */ 270 | 271 | (function () { 272 | 'use strict'; 273 | 274 | var hasOwn = {}.hasOwnProperty; 275 | var nativeCodeString = '[native code]'; 276 | 277 | function classNames() { 278 | var classes = []; 279 | 280 | for (var i = 0; i < arguments.length; i++) { 281 | var arg = arguments[i]; 282 | if (!arg) continue; 283 | 284 | var argType = typeof arg; 285 | 286 | if (argType === 'string' || argType === 'number') { 287 | classes.push(arg); 288 | } else if (Array.isArray(arg)) { 289 | if (arg.length) { 290 | var inner = classNames.apply(null, arg); 291 | if (inner) { 292 | classes.push(inner); 293 | } 294 | } 295 | } else if (argType === 'object') { 296 | if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) { 297 | classes.push(arg.toString()); 298 | continue; 299 | } 300 | 301 | for (var key in arg) { 302 | if (hasOwn.call(arg, key) && arg[key]) { 303 | classes.push(key); 304 | } 305 | } 306 | } 307 | } 308 | 309 | return classes.join(' '); 310 | } 311 | 312 | if ( true && module.exports) { 313 | classNames.default = classNames; 314 | module.exports = classNames; 315 | } else if (true) { 316 | // register as 'classnames', consistent with npm package name 317 | !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { 318 | return classNames; 319 | }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), 320 | __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); 321 | } else {} 322 | }()); 323 | 324 | 325 | /***/ }), 326 | 327 | /***/ "./src/card/editor.scss": 328 | /*!******************************!*\ 329 | !*** ./src/card/editor.scss ***! 330 | \******************************/ 331 | /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 332 | 333 | "use strict"; 334 | __webpack_require__.r(__webpack_exports__); 335 | // extracted by mini-css-extract-plugin 336 | 337 | 338 | /***/ }), 339 | 340 | /***/ "./src/card/style.scss": 341 | /*!*****************************!*\ 342 | !*** ./src/card/style.scss ***! 343 | \*****************************/ 344 | /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 345 | 346 | "use strict"; 347 | __webpack_require__.r(__webpack_exports__); 348 | // extracted by mini-css-extract-plugin 349 | 350 | 351 | /***/ }), 352 | 353 | /***/ "@wordpress/block-editor": 354 | /*!*************************************!*\ 355 | !*** external ["wp","blockEditor"] ***! 356 | \*************************************/ 357 | /***/ (function(module) { 358 | 359 | "use strict"; 360 | module.exports = window["wp"]["blockEditor"]; 361 | 362 | /***/ }), 363 | 364 | /***/ "@wordpress/blocks": 365 | /*!********************************!*\ 366 | !*** external ["wp","blocks"] ***! 367 | \********************************/ 368 | /***/ (function(module) { 369 | 370 | "use strict"; 371 | module.exports = window["wp"]["blocks"]; 372 | 373 | /***/ }), 374 | 375 | /***/ "@wordpress/components": 376 | /*!************************************!*\ 377 | !*** external ["wp","components"] ***! 378 | \************************************/ 379 | /***/ (function(module) { 380 | 381 | "use strict"; 382 | module.exports = window["wp"]["components"]; 383 | 384 | /***/ }), 385 | 386 | /***/ "@wordpress/editor": 387 | /*!********************************!*\ 388 | !*** external ["wp","editor"] ***! 389 | \********************************/ 390 | /***/ (function(module) { 391 | 392 | "use strict"; 393 | module.exports = window["wp"]["editor"]; 394 | 395 | /***/ }), 396 | 397 | /***/ "@wordpress/element": 398 | /*!*********************************!*\ 399 | !*** external ["wp","element"] ***! 400 | \*********************************/ 401 | /***/ (function(module) { 402 | 403 | "use strict"; 404 | module.exports = window["wp"]["element"]; 405 | 406 | /***/ }), 407 | 408 | /***/ "@wordpress/i18n": 409 | /*!******************************!*\ 410 | !*** external ["wp","i18n"] ***! 411 | \******************************/ 412 | /***/ (function(module) { 413 | 414 | "use strict"; 415 | module.exports = window["wp"]["i18n"]; 416 | 417 | /***/ }), 418 | 419 | /***/ "./src/card/block.json": 420 | /*!*****************************!*\ 421 | !*** ./src/card/block.json ***! 422 | \*****************************/ 423 | /***/ (function(module) { 424 | 425 | "use strict"; 426 | module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"tabor/card","version":"0.1.0","title":"Card","category":"design","icon":"smiley","parent":["tabor/cards"],"description":"","attributes":{"title":{"type":"string"},"link":{"type":"string"},"description":{"type":"string"},"image":{"type":"string","default":null},"isOverflowTitle":{"type":"boolean","default":false},"isOverflowDescription":{"type":"boolean","default":false}},"supports":{"html":false,"color":{"background":true,"text":true},"__experimentalBorder":{"color":true,"width":true,"style":true,"radius":true,"__experimentalDefaultControls":{"color":false,"width":false,"style":false,"radius":false}}},"textdomain":"tabor-card","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php"}'); 427 | 428 | /***/ }) 429 | 430 | /******/ }); 431 | /************************************************************************/ 432 | /******/ // The module cache 433 | /******/ var __webpack_module_cache__ = {}; 434 | /******/ 435 | /******/ // The require function 436 | /******/ function __webpack_require__(moduleId) { 437 | /******/ // Check if module is in cache 438 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 439 | /******/ if (cachedModule !== undefined) { 440 | /******/ return cachedModule.exports; 441 | /******/ } 442 | /******/ // Create a new module (and put it into the cache) 443 | /******/ var module = __webpack_module_cache__[moduleId] = { 444 | /******/ // no module.id needed 445 | /******/ // no module.loaded needed 446 | /******/ exports: {} 447 | /******/ }; 448 | /******/ 449 | /******/ // Execute the module function 450 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 451 | /******/ 452 | /******/ // Return the exports of the module 453 | /******/ return module.exports; 454 | /******/ } 455 | /******/ 456 | /******/ // expose the modules object (__webpack_modules__) 457 | /******/ __webpack_require__.m = __webpack_modules__; 458 | /******/ 459 | /************************************************************************/ 460 | /******/ /* webpack/runtime/chunk loaded */ 461 | /******/ !function() { 462 | /******/ var deferred = []; 463 | /******/ __webpack_require__.O = function(result, chunkIds, fn, priority) { 464 | /******/ if(chunkIds) { 465 | /******/ priority = priority || 0; 466 | /******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1]; 467 | /******/ deferred[i] = [chunkIds, fn, priority]; 468 | /******/ return; 469 | /******/ } 470 | /******/ var notFulfilled = Infinity; 471 | /******/ for (var i = 0; i < deferred.length; i++) { 472 | /******/ var chunkIds = deferred[i][0]; 473 | /******/ var fn = deferred[i][1]; 474 | /******/ var priority = deferred[i][2]; 475 | /******/ var fulfilled = true; 476 | /******/ for (var j = 0; j < chunkIds.length; j++) { 477 | /******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) { 478 | /******/ chunkIds.splice(j--, 1); 479 | /******/ } else { 480 | /******/ fulfilled = false; 481 | /******/ if(priority < notFulfilled) notFulfilled = priority; 482 | /******/ } 483 | /******/ } 484 | /******/ if(fulfilled) { 485 | /******/ deferred.splice(i--, 1) 486 | /******/ var r = fn(); 487 | /******/ if (r !== undefined) result = r; 488 | /******/ } 489 | /******/ } 490 | /******/ return result; 491 | /******/ }; 492 | /******/ }(); 493 | /******/ 494 | /******/ /* webpack/runtime/compat get default export */ 495 | /******/ !function() { 496 | /******/ // getDefaultExport function for compatibility with non-harmony modules 497 | /******/ __webpack_require__.n = function(module) { 498 | /******/ var getter = module && module.__esModule ? 499 | /******/ function() { return module['default']; } : 500 | /******/ function() { return module; }; 501 | /******/ __webpack_require__.d(getter, { a: getter }); 502 | /******/ return getter; 503 | /******/ }; 504 | /******/ }(); 505 | /******/ 506 | /******/ /* webpack/runtime/define property getters */ 507 | /******/ !function() { 508 | /******/ // define getter functions for harmony exports 509 | /******/ __webpack_require__.d = function(exports, definition) { 510 | /******/ for(var key in definition) { 511 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 512 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 513 | /******/ } 514 | /******/ } 515 | /******/ }; 516 | /******/ }(); 517 | /******/ 518 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 519 | /******/ !function() { 520 | /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } 521 | /******/ }(); 522 | /******/ 523 | /******/ /* webpack/runtime/make namespace object */ 524 | /******/ !function() { 525 | /******/ // define __esModule on exports 526 | /******/ __webpack_require__.r = function(exports) { 527 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 528 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 529 | /******/ } 530 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 531 | /******/ }; 532 | /******/ }(); 533 | /******/ 534 | /******/ /* webpack/runtime/jsonp chunk loading */ 535 | /******/ !function() { 536 | /******/ // no baseURI 537 | /******/ 538 | /******/ // object to store loaded and loading chunks 539 | /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched 540 | /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded 541 | /******/ var installedChunks = { 542 | /******/ "card/index": 0, 543 | /******/ "card/style-index": 0 544 | /******/ }; 545 | /******/ 546 | /******/ // no chunk on demand loading 547 | /******/ 548 | /******/ // no prefetching 549 | /******/ 550 | /******/ // no preloaded 551 | /******/ 552 | /******/ // no HMR 553 | /******/ 554 | /******/ // no HMR manifest 555 | /******/ 556 | /******/ __webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; }; 557 | /******/ 558 | /******/ // install a JSONP callback for chunk loading 559 | /******/ var webpackJsonpCallback = function(parentChunkLoadingFunction, data) { 560 | /******/ var chunkIds = data[0]; 561 | /******/ var moreModules = data[1]; 562 | /******/ var runtime = data[2]; 563 | /******/ // add "moreModules" to the modules object, 564 | /******/ // then flag all "chunkIds" as loaded and fire callback 565 | /******/ var moduleId, chunkId, i = 0; 566 | /******/ if(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) { 567 | /******/ for(moduleId in moreModules) { 568 | /******/ if(__webpack_require__.o(moreModules, moduleId)) { 569 | /******/ __webpack_require__.m[moduleId] = moreModules[moduleId]; 570 | /******/ } 571 | /******/ } 572 | /******/ if(runtime) var result = runtime(__webpack_require__); 573 | /******/ } 574 | /******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data); 575 | /******/ for(;i < chunkIds.length; i++) { 576 | /******/ chunkId = chunkIds[i]; 577 | /******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) { 578 | /******/ installedChunks[chunkId][0](); 579 | /******/ } 580 | /******/ installedChunks[chunkId] = 0; 581 | /******/ } 582 | /******/ return __webpack_require__.O(result); 583 | /******/ } 584 | /******/ 585 | /******/ var chunkLoadingGlobal = self["webpackChunktabor_cards_block"] = self["webpackChunktabor_cards_block"] || []; 586 | /******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); 587 | /******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); 588 | /******/ }(); 589 | /******/ 590 | /************************************************************************/ 591 | /******/ 592 | /******/ // startup 593 | /******/ // Load entry module and return exports 594 | /******/ // This entry module depends on other loaded chunks and execution need to be delayed 595 | /******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["card/style-index"], function() { return __webpack_require__("./src/card/index.js"); }) 596 | /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); 597 | /******/ 598 | /******/ })() 599 | ; 600 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /build/card/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"card/index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACoC;;AAEpC;AACA;AACA;AAO+B;AACM;AAGV;AAOM;AAGL;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACuB;AAEvB,SAASe,QAAQA,CAAE;EAAEC,UAAU;EAAEC;AAAc,CAAC,EAAG;EAElD,MAAM;IACLC,WAAW;IACXC,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,eAAe;IACfC;EACD,CAAC,GAAGP,UAAU;;EAEd;EACA;;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA;EACA;EACA;;EAEA;EACA;EACA;;EAEA;EACA;;EAEA;;EAEA,SAASQ,QAAQA,CAAEC,SAAS,EAAG;IAC9B,OAASC,QAAQ,IAAM;MACtBT,aAAa,CAAE;QAAE,CAAEQ,SAAS,GAAIC;MAAS,CAAE,CAAC;IAC7C,CAAC;EACF;EAEA,SAASC,aAAaA,CAAEC,KAAK,EAAG;IAC/B,IAAK,CAAEA,KAAK,IAAI,CAAEA,KAAK,CAACC,GAAG,EAAG;MAC7B;MACA;MACA;MACAZ,aAAa,CAAE;QACdG,KAAK,EAAEU;MACR,CAAE,CAAC;MACH;IACD;;IAEA;IACAb,aAAa,CAAE;MACdG,KAAK,EAAEQ,KAAK,CAACC;IACd,CAAE,CAAC;EACJ;EAEA,MAAME,UAAU,GAAGrB,sEAAa,CAAE;IAAEsB,SAAS,EAAE;EAAiB,CAAE,CAAC;EAEnE,MAAMC,WAAW,GAAKC,KAAK,IAAM;IAChC3B,8DAAW,CAAE;MACZ4B,YAAY,EAAE,CAAE,OAAO,CAAE;MACzBC,SAAS,EAAEF,KAAK;MAChBG,YAAY,EAAEA,CAAE,CAAET,KAAK,CAAE,KAAM;QAC9BX,aAAa,CAAE;UAAEG,KAAK,EAAEQ,KAAK,CAACC;QAAI,CAAE,CAAC;MACtC;IACD,CAAE,CAAC;EACJ,CAAC;EAED,MAAMS,aAAa,GAAGA,CAAA,KAAM;IAC3BrB,aAAa,CAAE;MAAEG,KAAK,EAAEU;IAAU,CAAE,CAAC;EACtC,CAAC;EAED,MAAMS,QAAQ,GACbC,iEAAA,CAACvC,2DAAQ;IACRwC,KAAK,EAAGnC,mDAAE,CAAE,YAAY,EAAE,OAAQ,CAAG;IACrCoC,WAAW,EAAGT;EAAa,CAC3B,CACD;EAED,MAAMU,iBAAiB,GACtBH,iEAAA,CAAC7B,sEAAiB,QACjB6B,iEAAA,CAACrC,4DAAS;IAACgB,KAAK,EAAGb,mDAAE,CAAE,MAAO;EAAG,GAChCkC,iEAAA,CAACtC,8DAAW;IACX0C,KAAK,EAAGvB,IAAM;IACdG,QAAQ,EAAGA,QAAQ,CAAE,MAAO,CAAG;IAC/BqB,qBAAqB;IACrBC,uBAAuB;EAAA,CACvB,CAAC,EACFN,iEAAA,CAACnC,gEAAa;IACbyC,uBAAuB;IACvBL,KAAK,EAAGnC,mDAAE,CAAE,gBAAiB,CAAG;IAChCyC,OAAO,EAAGzB,eAAiB;IAC3BE,QAAQ,EAAGA,CAAA,KACVP,aAAa,CAAE;MAAEK,eAAe,EAAE,CAAEA;IAAgB,CAAE;EACtD,CACD,CAAC,EACFkB,iEAAA,CAACnC,gEAAa;IACbyC,uBAAuB;IACvBL,KAAK,EAAGnC,mDAAE,CAAE,sBAAuB,CAAG;IACtCyC,OAAO,EAAGxB,qBAAuB;IACjCC,QAAQ,EAAGA,CAAA,KACVP,aAAa,CAAE;MAAEM,qBAAqB,EAAE,CAAEA;IAAsB,CAAE;EAClE,CACD,CACS,CACO,CACnB;EAED,MAAMyB,aAAa,GAClBR,iEAAA,CAAC/B,kEAAa;IAACwC,KAAK,EAAC;EAAO,GAC3BT,iEAAA,CAAC5B,qEAAgB;IAChBsC,QAAQ,EAAG9B,KAAO;IAClBe,YAAY,EAAG,CAAE,OAAO,CAAI;IAC5BgB,MAAM,EAAC,SAAS;IAChBC,QAAQ,EAAGzB,aAAe;IAC1B0B,IAAI,EAAG,CAAEjC,KAAK,GAAGd,mDAAE,CAAE,WAAY,CAAC,GAAGA,mDAAE,CAAE,SAAU;EAAG,GAEtDkC,iEAAA,CAACpC,2DAAQ;IAACkD,OAAO,EAAGhB;EAAe,GAAGhC,mDAAE,CAAE,OAAQ,CAAa,CAC9C,CACJ,CACf;EAED,OACCkC,iEAAA,CAAAe,wDAAA,QACGP,aAAa,EACbL,iBAAiB,EACnBH,iEAAA;IAAA,GAAUT;EAAU,GACjBQ,QAAQ,EACRnB,KAAK,IACNoB,iEAAA;IAAMgB,KAAK,EAAC;EAA4B,GACvChB,iEAAA;IACAiB,GAAG,EAAGtC,KAAO;IACbuC,GAAG,EAAGtC;EAAO,CACb,CACK,CACN,EACDoB,iEAAA;IACCR,SAAS,EAAGhC,iDAAU,CAAE,8BAA8B,EAAE;MACvD,WAAW,EAAEoB;IACd,CAAE;EAAG,GAELoB,iEAAA,CAAChC,6DAAQA;EACR;EAAA;IACAmD,UAAU,EAAC,OAAO;IAClBC,OAAO,EAAC,MAAM;IACd5B,SAAS,EAAC,4BAA4B;IACtCY,KAAK,EAAGzB,KAAO;IACf0C,SAAS,EAAG,KAAO;IACnBrC,QAAQ,EAAGA,QAAQ,CAAE,OAAQ,CAAG;IAChC,cACCL,KAAK,GACFb,mDAAE,CACF,YAAY,EACZ,OACF,CAAC,GACCA,mDAAE,CACF,aAAa,EACb,OACF,CACD;IACD,cAAaa,KAAK,GAAG,KAAK,GAAG,IAAM;IACnC2C,WAAW,EAAGxD,mDAAE,CACf,YAAY,EACZ,OACD,CAAG;IACHyD,cAAc,EAAG;EAAI,CACrB,CAAC,EACFvB,iEAAA,CAAChC,6DAAQA;EACR;EAAA;IACAmD,UAAU,EAAC,aAAa;IACxBC,OAAO,EAAC,MAAM;IACd5B,SAAS,EAAC,kCAAkC;IAC5CY,KAAK,EAAG1B,WAAa;IACrB2C,SAAS,EAAG,KAAO;IACnBrC,QAAQ,EAAGA,QAAQ,CAAE,aAAc,CAAG;IACtC,cACCL,KAAK,GACFb,mDAAE,CACF,kBAAkB,EAClB,UACF,CAAC,GACCA,mDAAE,CACF,mBAAmB,EACnB,OACF,CACD;IACD,cAAaY,WAAW,GAAG,KAAK,GAAG,IAAM;IACzC4C,WAAW,EAAGxD,mDAAE,CACf,kBAAkB,EAClB,OACD,CAAG;IACHyD,cAAc,EAAG;EAAI,CACrB,CACI,CACF,CACJ,CAAC;AAEL;AAEA,+DAAehD,QAAQ;;;;;;;;;;;;;;;;;AClPvB;AACA;AACA;AACA;AACA;AACsD;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACsB;;AAEtB;AACA;AACA;AAC0B;AACU;;AAEpC;AACA;AACA;AACA;AACA;AACAiD,oEAAiB,CAAEE,6CAAa,EAAE;EACjC;AACD;AACA;EACCC,IAAI,EAAEF,6CAAIA;AACX,CAAE,CAAC;;;;;;;;;;AChCH;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,gBAAgB;AAChB;;AAEA;AACA;;AAEA,kBAAkB,sBAAsB;AACxC;AACA;;AAEA;;AAEA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,KAAK,KAA6B;AAClC;AACA;AACA,GAAG,SAAS,IAA4E;AACxF;AACA,EAAE,iCAAqB,EAAE,mCAAE;AAC3B;AACA,GAAG;AAAA,kGAAC;AACJ,GAAG,KAAK,EAEN;AACF,CAAC;;;;;;;;;;;;;AC3DD;;;;;;;;;;;;;ACAA;;;;;;;;;;;;ACAA;;;;;;;;;;;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;WACA;WACA,kBAAkB,qBAAqB;WACvC,oHAAoH,iDAAiD;WACrK;WACA,KAAK;WACL;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;;;;WC7BA;WACA;WACA;WACA,eAAe,4BAA4B;WAC3C,eAAe;WACf,iCAAiC,WAAW;WAC5C;WACA;;;;;WCPA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA,8CAA8C;;;;;WCA9C;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;;WAEA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA,8CAA8C;;WAE9C;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,iCAAiC,mCAAmC;WACpE;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,MAAM,qBAAqB;WAC3B;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;WACA;WACA;;;;;UEnDA;UACA;UACA;UACA,8FAA8F,oDAAoD;UAClJ","sources":["webpack://tabor-cards-block/./src/card/edit.js","webpack://tabor-cards-block/./src/card/index.js","webpack://tabor-cards-block/./node_modules/classnames/index.js","webpack://tabor-cards-block/./src/card/editor.scss?a818","webpack://tabor-cards-block/./src/card/style.scss?e7f5","webpack://tabor-cards-block/external window [\"wp\",\"blockEditor\"]","webpack://tabor-cards-block/external window [\"wp\",\"blocks\"]","webpack://tabor-cards-block/external window [\"wp\",\"components\"]","webpack://tabor-cards-block/external window [\"wp\",\"editor\"]","webpack://tabor-cards-block/external window [\"wp\",\"element\"]","webpack://tabor-cards-block/external window [\"wp\",\"i18n\"]","webpack://tabor-cards-block/webpack/bootstrap","webpack://tabor-cards-block/webpack/runtime/chunk loaded","webpack://tabor-cards-block/webpack/runtime/compat get default export","webpack://tabor-cards-block/webpack/runtime/define property getters","webpack://tabor-cards-block/webpack/runtime/hasOwnProperty shorthand","webpack://tabor-cards-block/webpack/runtime/make namespace object","webpack://tabor-cards-block/webpack/runtime/jsonp chunk loading","webpack://tabor-cards-block/webpack/before-startup","webpack://tabor-cards-block/webpack/startup","webpack://tabor-cards-block/webpack/after-startup"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropZone,\n\tTextControl,\n\tPanelBody,\n\tMenuItem,\n\tToggleControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tmediaUpload,\n} from '@wordpress/editor';\nimport {\n\tRichText,\n\tBlockControls,\n\tuseBlockProps,\n\tInspectorControls,\n\tMediaReplaceFlow,\n} from '@wordpress/block-editor';\nimport {\n\tuseRef,useEffect,\n} from '@wordpress/element';\n\n/**\n * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.\n * Those files can contain any CSS code that gets applied to the editor.\n *\n * @see https://www.npmjs.com/package/@wordpress/scripts#using-css\n */\nimport './editor.scss';\n\nfunction CardEdit( { attributes, setAttributes } ) {\n\n\tconst {\n\t\tdescription,\n\t\ttitle,\n\t\timage,\n\t\tlink,\n\t\tisOverflowTitle,\n\t\tisOverflowDescription,\n\t} = attributes;\n\n\t// const titleRef = useRef( null );\n\t// const descriptionRef = useRef( null );\n\n\t// useEffect(() => {\n\t// \t// Function to check if the content of an element is multiline\n\t// \tconst checkForMultiLine = ( element ) => {\n\t// \t if (element) {\n\t// \t\tconst lineHeight = parseFloat(getComputedStyle( element ).lineHeight);\n\t// \t\tconst height = element.offsetHeight;\n\t// \t\treturn height > lineHeight;\n\t// \t }\n\t// \t return false;\n\t// \t};\n\n\t// \t// Set attribute based on title's multiline status.\n\t// \tconst isTitleMultiline = checkForMultiLine( titleRef.current );\n\t// \tsetAttributes( { isOverflowTitle: isTitleMultiline } );\n\n\t// \t// Set attribute based on description's multiline status.\n\t// \tconst isDescriptionMultiline = checkForMultiLine( descriptionRef.current );\n\t// \tsetAttributes( { isOverflowDescription: isDescriptionMultiline } );\n\n\t// \t// console.log('desc' + isDescriptionMultiline);\n\t// \t// console.log('title' + isTitleMultiline);\n\n\t// }, [ title, description ]);\n\n\tfunction onChange( attribute ) {\n\t\treturn ( newValue ) => {\n\t\t\tsetAttributes( { [ attribute ]: newValue } );\n\t\t};\n\t}\n\n\tfunction onSelectImage( media ) {\n\t\tif ( ! media || ! media.url ) {\n\t\t\t// In this case there was an error\n\t\t\t// previous attributes should be removed\n\t\t\t// because they may be temporary blob urls.\n\t\t\tsetAttributes( {\n\t\t\t\timage: undefined\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\t// Sets the block's attribute and updates the edit component from the selected media.\n\t\tsetAttributes( {\n\t\t\timage: media.url,\n\t\t} );\n\t}\n\n\tconst blockProps = useBlockProps( { className: 'remove-outline' } );\n\n\tconst onDropImage = ( files ) => {\n\t\tmediaUpload( {\n\t\t\tallowedTypes: [ 'image' ],\n\t\t\tfilesList: files,\n\t\t\tonFileChange: ( [ media ] ) => {\n\t\t\t\tsetAttributes( { image: media.url } );\n\t\t\t},\n\t\t} );\n\t};\n\n\tconst onRemoveImage = () => {\n\t\tsetAttributes( { image: undefined } );\n\t};\n\n\tconst dropZone = (\n\t\t\n\t);\n\n\tconst inspectorControls = (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\tsetAttributes( { isOverflowTitle: ! isOverflowTitle } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t\n\t\t\t\t\t\tsetAttributes( { isOverflowDescription: ! isOverflowDescription } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\n\t\t\n\t);\n\n\tconst blockControls = (\n\t\t\n\t\t\t\n\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\n\t\t\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{ blockControls }\n\t\t\t{ inspectorControls }\n\t\t\t
\n\t\t\t\t{ dropZone }\n\t\t\t\t{ image && (\n\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\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n\nexport default CardEdit;\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 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","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","module.exports = window[\"wp\"][\"blockEditor\"];","module.exports = window[\"wp\"][\"blocks\"];","module.exports = window[\"wp\"][\"components\"];","module.exports = window[\"wp\"][\"editor\"];","module.exports = window[\"wp\"][\"element\"];","module.exports = window[\"wp\"][\"i18n\"];","// 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 = function(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 = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\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(function(key) { return __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 = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(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 = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(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\"card/index\": 0,\n\t\"card/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 = function(chunkId) { return installedChunks[chunkId] === 0; };\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\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(function(id) { return 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 = self[\"webpackChunktabor_cards_block\"] = self[\"webpackChunktabor_cards_block\"] || [];\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, [\"card/style-index\"], function() { return __webpack_require__(\"./src/card/index.js\"); })\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n",""],"names":["classnames","DropZone","TextControl","PanelBody","MenuItem","ToggleControl","__","mediaUpload","RichText","BlockControls","useBlockProps","InspectorControls","MediaReplaceFlow","useRef","useEffect","CardEdit","attributes","setAttributes","description","title","image","link","isOverflowTitle","isOverflowDescription","onChange","attribute","newValue","onSelectImage","media","url","undefined","blockProps","className","onDropImage","files","allowedTypes","filesList","onFileChange","onRemoveImage","dropZone","createElement","label","onFilesDrop","inspectorControls","value","__next40pxDefaultSize","__nextHasNoMarginBottom","checked","blockControls","group","mediaURL","accept","onSelect","name","onClick","Fragment","class","alt","src","identifier","tagName","multiline","placeholder","allowedFormats","registerBlockType","Edit","metadata","edit"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/card/render.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | > 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /build/card/style-index.css: -------------------------------------------------------------------------------- 1 | /*!********************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/card/style.scss ***! 3 | \********************************************************************************************************************************************************************************************************************************************/ 4 | .wp-block-tabor-card { 5 | align-items: flex-start; 6 | box-shadow: var(--wp--preset--shadow--inset, inset 0 0 0 1px hsl(0 0% 0% / 10%));; 7 | border-radius: 12px; 8 | padding: var(--wp--preset--spacing--20); 9 | font-size: var(--wp--preset--font-size--small); 10 | display: flex; 11 | flex-direction: row; 12 | text-decoration: none !important; 13 | position: relative; 14 | overflow: hidden; 15 | backface-visibility: hidden; 16 | transition: transform var(--wp--custom--transition--duration, 200ms) cubic-bezier(0.4, 0, 0.2, 1); 17 | } 18 | .wp-block-tabor-card:before { 19 | background-color: var(--wp--preset--color--theme-2); 20 | content: ""; 21 | position: absolute; 22 | top: 0; 23 | right: 0; 24 | bottom: 0; 25 | left: 0; 26 | border-radius: inherit; 27 | box-shadow: var(--wp--preset--shadow--inset, inset 0 0 0 1px hsl(0 0% 0% / 10%));; 28 | opacity: 0; 29 | transition: opacity var(--wp--custom--transition--duration, 200ms) ease-out; 30 | z-index: -1; 31 | } 32 | .wp-block-tabor-card:hover:before { 33 | box-shadow: var(--wp--preset--shadow--inset, inset 0 0 0 1px hsl(0 0% 0% / 10%));; 34 | opacity: 1; 35 | } 36 | .wp-block-tabor-card:hover .is-overflow { 37 | white-space: nowrap; 38 | text-overflow: none; 39 | display: block; 40 | transform: translateX(-60%); 41 | transition: transform 3s ease-out; 42 | } 43 | .wp-block-tabor-card:hover .wp-block-tabor-card__description.is-overflow { 44 | transition: transform 2.8s ease-out; 45 | } 46 | .wp-block-tabor-card:active { 47 | transform: scale(0.98); 48 | } 49 | 50 | .wp-block-tabor-card__content { 51 | display: flex; 52 | flex-direction: column; 53 | width: 100%; 54 | justify-content: center; 55 | -webkit-mask-image: linear-gradient(to left, transparent 2%, black 20%); 56 | mask-image: linear-gradient(to left, transparent 2%, black 20%); 57 | } 58 | .wp-block-tabor-card__content.has-image { 59 | -webkit-mask-image: linear-gradient(to left, transparent 2%, black 20%, black 90%, transparent); 60 | mask-image: linear-gradient(to left, transparent 2%, black 20%, black 90%, transparent); 61 | width: calc(100% - 44px); 62 | } 63 | 64 | .wp-block-tabor-card__title, 65 | .wp-block-tabor-card__description { 66 | white-space: nowrap; 67 | transition: transform 800ms ease-out; 68 | } 69 | 70 | .wp-block-tabor-card__description { 71 | opacity: 0.7; 72 | font-size: 90%; 73 | } 74 | 75 | .wp-block-tabor-card > span + span { 76 | padding-left: 12px; 77 | } 78 | 79 | .wp-block-tabor-card__image { 80 | background-color: var(--wp--preset--color--theme-3); 81 | border-radius: 3px; 82 | display: block; 83 | width: 44px; 84 | height: 44px; 85 | aspect-ratio: 1/1; 86 | position: relative; 87 | } 88 | .wp-block-tabor-card__image:after { 89 | content: ""; 90 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); 91 | position: absolute; 92 | top: 0; 93 | right: 0; 94 | bottom: 0; 95 | left: 0; 96 | height: 100%; 97 | width: 100%; 98 | border-radius: inherit; 99 | } 100 | .wp-block-tabor-card__image img { 101 | width: 100%; 102 | height: 100%; 103 | -o-object-fit: cover; 104 | object-fit: cover; 105 | border-radius: inherit; 106 | position: absolute; 107 | transition: transform var(--wp--custom--transition--duration, 200ms) ease-out; 108 | } 109 | 110 | .wp-block-tabor-card__image-blur { 111 | box-shadow: none; 112 | filter: blur(8px); 113 | z-index: -1; 114 | transform: scale(0.75) translateY(4px); 115 | transition: transform var(--wp--custom--transition--duration, 200ms) ease-out; 116 | backface-visibility: hidden; 117 | } 118 | .wp-block-tabor-card:hover .wp-block-tabor-card__image-blur { 119 | transform: scale(0.8) translateY(4px); 120 | } 121 | -------------------------------------------------------------------------------- /build/card/style-index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"card/style-index.css","mappings":";;;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACG;EACA;EACA;EACA;EACA;AACJ;AACC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACF;AAEC;EACC;EACA;AAAF;AAGC;EACC;EACA;EACA;EACA;EACA;AADF;AAIC;EACC;AAFF;AAKC;EACC;AAHF;;AAQA;EACI;EACA;EACH;EACA;EACA;UAAA;AALD;AAOC;EACC;UAAA;EACA;AALF;;AASA;;EAEI;EACH;AAND;;AASA;EACC;EACG;AANJ;;AAUA;EACC;AAPD;;AAUA;EACI;EACA;EACA;EACA;EACA;EACA;EACH;AAPD;AASC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAPF;AAUC;EACC;EACA;EACA;KAAA;EACA;EACA;EACA;AARF;;AAYA;EACC;EACA;EACA;EACA;EACA;EACA;AATD;AAWC;EACC;AATF,C","sources":["webpack://tabor-cards-block/./src/card/style.scss"],"sourcesContent":[".wp-block-tabor-card {\n\talign-items: flex-start;\n\tbox-shadow: var(--wp--preset--shadow--inset, inset 0 0 0 1px hsl(0 0% 0% / 10%));;\n\tborder-radius: 12px;\n\tpadding: var(--wp--preset--spacing--20);\n\tfont-size: var(--wp--preset--font-size--small);\n\tdisplay: flex;\n\tflex-direction: row;\n text-decoration: none !important;\n position: relative;\n overflow: hidden;\n backface-visibility: hidden;\n transition: transform var(--wp--custom--transition--duration, 200ms) cubic-bezier(.4,0,.2,1);\n\n\t&:before {\n\t\tbackground-color: var(--wp--preset--color--theme-2);\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tborder-radius: inherit;\n\t\tbox-shadow: var(--wp--preset--shadow--inset, inset 0 0 0 1px hsl(0 0% 0% / 10%));;\n\t\topacity: 0;\n\t\ttransition: opacity var(--wp--custom--transition--duration, 200ms) ease-out;\n\t\tz-index: -1;\n\t}\n\n\t&:hover:before {\n\t\tbox-shadow: var(--wp--preset--shadow--inset, inset 0 0 0 1px hsl(0 0% 0% / 10%));;\n\t\topacity: 1;\n\t}\n\n\t&:hover .is-overflow {\n\t\twhite-space: nowrap;\n\t\ttext-overflow: none;\n\t\tdisplay: block;\n\t\ttransform: translateX(-60%);\n\t\ttransition: transform 3s ease-out;\n\t}\n\n\t&:hover .wp-block-tabor-card__description.is-overflow {\n\t\ttransition: transform 2.8s ease-out;\n\t}\n\n\t&:active {\n\t\ttransform: scale(0.98);\n\t}\n\n}\n\n.wp-block-tabor-card__content {\n display: flex;\n flex-direction: column;\n\twidth: 100%;\n\tjustify-content: center;\n\tmask-image: linear-gradient(to left, transparent 2%, black 20%);\n\n\t&.has-image {\n\t\tmask-image: linear-gradient(to left, transparent 2%, black 20%, black 90%, transparent);\n\t\twidth: calc(100% - 44px);\n\t}\n}\n\n.wp-block-tabor-card__title,\n.wp-block-tabor-card__description {\n white-space: nowrap;\n\ttransition: transform 800ms ease-out;\n}\n\n.wp-block-tabor-card__description {\n\topacity: 0.70;\n font-size: 90%;\n}\n\n// Positioning when an image is added.\n.wp-block-tabor-card > span + span {\n\tpadding-left: 12px;\n}\n\n.wp-block-tabor-card__image {\n background-color: var(--wp--preset--color--theme-3);\n border-radius: 3px;\n display: block;\n width: 44px;\n height: 44px;\n aspect-ratio: 1/1;\n\tposition: relative;\n\n\t&:after {\n\t\tcontent: '';\n\t\tbox-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tborder-radius: inherit;\n\t}\n\n\timg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t\tborder-radius: inherit;\n\t\tposition: absolute;\n\t\ttransition: transform var(--wp--custom--transition--duration, 200ms) ease-out;\n\t}\n}\n\n.wp-block-tabor-card__image-blur {\n\tbox-shadow: none;\n\tfilter: blur(8px);\n\tz-index: -1;\n\ttransform: scale(0.75) translateY(4px);\n\ttransition: transform var(--wp--custom--transition--duration, 200ms) ease-out;\n\tbackface-visibility: hidden;\n\n\t.wp-block-tabor-card:hover & {\n\t\ttransform: scale(0.8) translateY(4px);\n\t}\n}\n"],"names":[],"sourceRoot":""} 2 | -------------------------------------------------------------------------------- /build/index.asset.php: -------------------------------------------------------------------------------- 1 | array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n'), 'version' => 'ff4f71ae4eed93309e48'); 2 | -------------------------------------------------------------------------------- /build/index.js: -------------------------------------------------------------------------------- 1 | /******/ (function() { // webpackBootstrap 2 | /******/ var __webpack_modules__ = ({ 3 | 4 | /***/ "./src/edit.js": 5 | /*!*********************!*\ 6 | !*** ./src/edit.js ***! 7 | \*********************/ 8 | /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 9 | 10 | "use strict"; 11 | __webpack_require__.r(__webpack_exports__); 12 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 13 | /* harmony export */ "default": function() { return /* binding */ Edit; } 14 | /* harmony export */ }); 15 | /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); 16 | /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); 17 | /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"); 18 | /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__); 19 | /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n"); 20 | /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__); 21 | /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); 22 | /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__); 23 | 24 | /** 25 | * External dependencies 26 | */ 27 | 28 | 29 | /** 30 | * Retrieves the translation of text. 31 | * 32 | * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ 33 | */ 34 | 35 | 36 | /** 37 | * React hook that is used to mark the block wrapper element. 38 | * It provides all the necessary props like the class name. 39 | * 40 | * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops 41 | */ 42 | 43 | const DEFAULT_BLOCK = { 44 | name: 'tabor/card', 45 | attributesToCopy: ['backgroundColor', 'border', 'className', 'fontFamily', 'fontSize', 'gradient', 'style', 'textColor', 'width'] 46 | }; 47 | 48 | /** 49 | * The edit function describes the structure of your block in the context of the 50 | * editor. This represents what the editor will render when the block is used. 51 | * 52 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit 53 | * 54 | * @return {WPElement} Element to render. 55 | */ 56 | function Edit({ 57 | attributes, 58 | className 59 | }) { 60 | var _layout$orientation; 61 | const { 62 | fontSize, 63 | layout, 64 | style 65 | } = attributes; 66 | const blockProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({ 67 | className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(className, { 68 | 'has-custom-font-size': fontSize || style?.typography?.fontSize 69 | }) 70 | }); 71 | const innerBlocksProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useInnerBlocksProps)(blockProps, { 72 | defaultBlock: DEFAULT_BLOCK, 73 | // This check should be handled by the `Inserter` internally to be consistent across all blocks that use it. 74 | directInsert: true, 75 | template: [['tabor/card'], ['tabor/card'], ['tabor/card'], ['tabor/card']], 76 | allowedBlocks: ['tabor/card'], 77 | templateInsertUpdatesSelection: true, 78 | orientation: (_layout$orientation = layout?.orientation) !== null && _layout$orientation !== void 0 ? _layout$orientation : 'horizontal' 79 | }); 80 | return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { 81 | ...innerBlocksProps 82 | }); 83 | } 84 | 85 | /***/ }), 86 | 87 | /***/ "./src/index.js": 88 | /*!**********************!*\ 89 | !*** ./src/index.js ***! 90 | \**********************/ 91 | /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 92 | 93 | "use strict"; 94 | __webpack_require__.r(__webpack_exports__); 95 | /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); 96 | /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); 97 | /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); 98 | /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__); 99 | /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); 100 | /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__); 101 | /* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss"); 102 | /* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./edit */ "./src/edit.js"); 103 | /* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./block.json */ "./src/block.json"); 104 | 105 | /** 106 | * Registers a new block provided a unique name and an object defining its behavior. 107 | * 108 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 109 | */ 110 | 111 | 112 | 113 | /** 114 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. 115 | * All files containing `style` keyword are bundled together. The code used 116 | * gets applied both to the front of your site and to the editor. 117 | * 118 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css 119 | */ 120 | 121 | 122 | /** 123 | * Internal dependencies 124 | */ 125 | 126 | 127 | 128 | /** 129 | * Every block starts by registering a new block type definition. 130 | * 131 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 132 | */ 133 | (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, { 134 | edit: _edit__WEBPACK_IMPORTED_MODULE_4__["default"], 135 | save: () => { 136 | return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.InnerBlocks.Content, null); 137 | } 138 | }); 139 | 140 | /***/ }), 141 | 142 | /***/ "./node_modules/classnames/index.js": 143 | /*!******************************************!*\ 144 | !*** ./node_modules/classnames/index.js ***! 145 | \******************************************/ 146 | /***/ (function(module, exports) { 147 | 148 | var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! 149 | Copyright (c) 2018 Jed Watson. 150 | Licensed under the MIT License (MIT), see 151 | http://jedwatson.github.io/classnames 152 | */ 153 | /* global define */ 154 | 155 | (function () { 156 | 'use strict'; 157 | 158 | var hasOwn = {}.hasOwnProperty; 159 | var nativeCodeString = '[native code]'; 160 | 161 | function classNames() { 162 | var classes = []; 163 | 164 | for (var i = 0; i < arguments.length; i++) { 165 | var arg = arguments[i]; 166 | if (!arg) continue; 167 | 168 | var argType = typeof arg; 169 | 170 | if (argType === 'string' || argType === 'number') { 171 | classes.push(arg); 172 | } else if (Array.isArray(arg)) { 173 | if (arg.length) { 174 | var inner = classNames.apply(null, arg); 175 | if (inner) { 176 | classes.push(inner); 177 | } 178 | } 179 | } else if (argType === 'object') { 180 | if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) { 181 | classes.push(arg.toString()); 182 | continue; 183 | } 184 | 185 | for (var key in arg) { 186 | if (hasOwn.call(arg, key) && arg[key]) { 187 | classes.push(key); 188 | } 189 | } 190 | } 191 | } 192 | 193 | return classes.join(' '); 194 | } 195 | 196 | if ( true && module.exports) { 197 | classNames.default = classNames; 198 | module.exports = classNames; 199 | } else if (true) { 200 | // register as 'classnames', consistent with npm package name 201 | !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { 202 | return classNames; 203 | }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), 204 | __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); 205 | } else {} 206 | }()); 207 | 208 | 209 | /***/ }), 210 | 211 | /***/ "./src/style.scss": 212 | /*!************************!*\ 213 | !*** ./src/style.scss ***! 214 | \************************/ 215 | /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 216 | 217 | "use strict"; 218 | __webpack_require__.r(__webpack_exports__); 219 | // extracted by mini-css-extract-plugin 220 | 221 | 222 | /***/ }), 223 | 224 | /***/ "@wordpress/block-editor": 225 | /*!*************************************!*\ 226 | !*** external ["wp","blockEditor"] ***! 227 | \*************************************/ 228 | /***/ (function(module) { 229 | 230 | "use strict"; 231 | module.exports = window["wp"]["blockEditor"]; 232 | 233 | /***/ }), 234 | 235 | /***/ "@wordpress/blocks": 236 | /*!********************************!*\ 237 | !*** external ["wp","blocks"] ***! 238 | \********************************/ 239 | /***/ (function(module) { 240 | 241 | "use strict"; 242 | module.exports = window["wp"]["blocks"]; 243 | 244 | /***/ }), 245 | 246 | /***/ "@wordpress/element": 247 | /*!*********************************!*\ 248 | !*** external ["wp","element"] ***! 249 | \*********************************/ 250 | /***/ (function(module) { 251 | 252 | "use strict"; 253 | module.exports = window["wp"]["element"]; 254 | 255 | /***/ }), 256 | 257 | /***/ "@wordpress/i18n": 258 | /*!******************************!*\ 259 | !*** external ["wp","i18n"] ***! 260 | \******************************/ 261 | /***/ (function(module) { 262 | 263 | "use strict"; 264 | module.exports = window["wp"]["i18n"]; 265 | 266 | /***/ }), 267 | 268 | /***/ "./src/block.json": 269 | /*!************************!*\ 270 | !*** ./src/block.json ***! 271 | \************************/ 272 | /***/ (function(module) { 273 | 274 | "use strict"; 275 | module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"tabor/cards","version":"0.1.0","title":"Cards","category":"design","allowedBlocks":["tabor/card"],"icon":"smiley","description":"A collection of simple cards to add to your site.","attributes":{"taxonomy":{"type":"string","default":"post_tag"},"showTagCounts":{"type":"boolean","default":false},"smallestFontSize":{"type":"string","default":"8pt"},"largestFontSize":{"type":"string","default":"22pt"}},"supports":{"html":false,"align":["wide","full"],"layout":{"allowSwitching":false,"allowInheriting":false,"allowEditing":false,"default":{"type":"grid","flexWrap":"wrap"}},"color":{"background":true,"text":true},"__experimentalBorder":{"color":true,"width":true,"style":true,"radius":true,"__experimentalDefaultControls":{"color":false,"width":false,"style":false,"radius":false}},"spacing":{"margin":true,"padding":true,"blockGap":{"__experimentalDefault":"6px"},"__experimentalDefaultControls":{"blockGap":false,"padding":false,"margin":false}},"typography":{"fontSize":true,"lineHeight":true,"__experimentalFontFamily":true,"__experimentalFontWeight":true,"__experimentalFontStyle":true,"__experimentalTextTransform":true,"__experimentalTextDecoration":true,"__experimentalLetterSpacing":true,"__experimentalDefaultControls":{"fontSize":true}}},"textdomain":"tabor-cards","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php"}'); 276 | 277 | /***/ }) 278 | 279 | /******/ }); 280 | /************************************************************************/ 281 | /******/ // The module cache 282 | /******/ var __webpack_module_cache__ = {}; 283 | /******/ 284 | /******/ // The require function 285 | /******/ function __webpack_require__(moduleId) { 286 | /******/ // Check if module is in cache 287 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 288 | /******/ if (cachedModule !== undefined) { 289 | /******/ return cachedModule.exports; 290 | /******/ } 291 | /******/ // Create a new module (and put it into the cache) 292 | /******/ var module = __webpack_module_cache__[moduleId] = { 293 | /******/ // no module.id needed 294 | /******/ // no module.loaded needed 295 | /******/ exports: {} 296 | /******/ }; 297 | /******/ 298 | /******/ // Execute the module function 299 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 300 | /******/ 301 | /******/ // Return the exports of the module 302 | /******/ return module.exports; 303 | /******/ } 304 | /******/ 305 | /******/ // expose the modules object (__webpack_modules__) 306 | /******/ __webpack_require__.m = __webpack_modules__; 307 | /******/ 308 | /************************************************************************/ 309 | /******/ /* webpack/runtime/chunk loaded */ 310 | /******/ !function() { 311 | /******/ var deferred = []; 312 | /******/ __webpack_require__.O = function(result, chunkIds, fn, priority) { 313 | /******/ if(chunkIds) { 314 | /******/ priority = priority || 0; 315 | /******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1]; 316 | /******/ deferred[i] = [chunkIds, fn, priority]; 317 | /******/ return; 318 | /******/ } 319 | /******/ var notFulfilled = Infinity; 320 | /******/ for (var i = 0; i < deferred.length; i++) { 321 | /******/ var chunkIds = deferred[i][0]; 322 | /******/ var fn = deferred[i][1]; 323 | /******/ var priority = deferred[i][2]; 324 | /******/ var fulfilled = true; 325 | /******/ for (var j = 0; j < chunkIds.length; j++) { 326 | /******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) { 327 | /******/ chunkIds.splice(j--, 1); 328 | /******/ } else { 329 | /******/ fulfilled = false; 330 | /******/ if(priority < notFulfilled) notFulfilled = priority; 331 | /******/ } 332 | /******/ } 333 | /******/ if(fulfilled) { 334 | /******/ deferred.splice(i--, 1) 335 | /******/ var r = fn(); 336 | /******/ if (r !== undefined) result = r; 337 | /******/ } 338 | /******/ } 339 | /******/ return result; 340 | /******/ }; 341 | /******/ }(); 342 | /******/ 343 | /******/ /* webpack/runtime/compat get default export */ 344 | /******/ !function() { 345 | /******/ // getDefaultExport function for compatibility with non-harmony modules 346 | /******/ __webpack_require__.n = function(module) { 347 | /******/ var getter = module && module.__esModule ? 348 | /******/ function() { return module['default']; } : 349 | /******/ function() { return module; }; 350 | /******/ __webpack_require__.d(getter, { a: getter }); 351 | /******/ return getter; 352 | /******/ }; 353 | /******/ }(); 354 | /******/ 355 | /******/ /* webpack/runtime/define property getters */ 356 | /******/ !function() { 357 | /******/ // define getter functions for harmony exports 358 | /******/ __webpack_require__.d = function(exports, definition) { 359 | /******/ for(var key in definition) { 360 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 361 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 362 | /******/ } 363 | /******/ } 364 | /******/ }; 365 | /******/ }(); 366 | /******/ 367 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 368 | /******/ !function() { 369 | /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } 370 | /******/ }(); 371 | /******/ 372 | /******/ /* webpack/runtime/make namespace object */ 373 | /******/ !function() { 374 | /******/ // define __esModule on exports 375 | /******/ __webpack_require__.r = function(exports) { 376 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 377 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 378 | /******/ } 379 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 380 | /******/ }; 381 | /******/ }(); 382 | /******/ 383 | /******/ /* webpack/runtime/jsonp chunk loading */ 384 | /******/ !function() { 385 | /******/ // no baseURI 386 | /******/ 387 | /******/ // object to store loaded and loading chunks 388 | /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched 389 | /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded 390 | /******/ var installedChunks = { 391 | /******/ "index": 0, 392 | /******/ "./style-index": 0 393 | /******/ }; 394 | /******/ 395 | /******/ // no chunk on demand loading 396 | /******/ 397 | /******/ // no prefetching 398 | /******/ 399 | /******/ // no preloaded 400 | /******/ 401 | /******/ // no HMR 402 | /******/ 403 | /******/ // no HMR manifest 404 | /******/ 405 | /******/ __webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; }; 406 | /******/ 407 | /******/ // install a JSONP callback for chunk loading 408 | /******/ var webpackJsonpCallback = function(parentChunkLoadingFunction, data) { 409 | /******/ var chunkIds = data[0]; 410 | /******/ var moreModules = data[1]; 411 | /******/ var runtime = data[2]; 412 | /******/ // add "moreModules" to the modules object, 413 | /******/ // then flag all "chunkIds" as loaded and fire callback 414 | /******/ var moduleId, chunkId, i = 0; 415 | /******/ if(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) { 416 | /******/ for(moduleId in moreModules) { 417 | /******/ if(__webpack_require__.o(moreModules, moduleId)) { 418 | /******/ __webpack_require__.m[moduleId] = moreModules[moduleId]; 419 | /******/ } 420 | /******/ } 421 | /******/ if(runtime) var result = runtime(__webpack_require__); 422 | /******/ } 423 | /******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data); 424 | /******/ for(;i < chunkIds.length; i++) { 425 | /******/ chunkId = chunkIds[i]; 426 | /******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) { 427 | /******/ installedChunks[chunkId][0](); 428 | /******/ } 429 | /******/ installedChunks[chunkId] = 0; 430 | /******/ } 431 | /******/ return __webpack_require__.O(result); 432 | /******/ } 433 | /******/ 434 | /******/ var chunkLoadingGlobal = self["webpackChunktabor_cards_block"] = self["webpackChunktabor_cards_block"] || []; 435 | /******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); 436 | /******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); 437 | /******/ }(); 438 | /******/ 439 | /************************************************************************/ 440 | /******/ 441 | /******/ // startup 442 | /******/ // Load entry module and return exports 443 | /******/ // This entry module depends on other loaded chunks and execution need to be delayed 444 | /******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["./style-index"], function() { return __webpack_require__("./src/index.js"); }) 445 | /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); 446 | /******/ 447 | /******/ })() 448 | ; 449 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /build/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACoC;;AAEpC;AACA;AACA;AACA;AACA;AACqC;;AAErC;AACA;AACA;AACA;AACA;AACA;AAC0F;AAE1F,MAAMK,aAAa,GAAG;EACrBC,IAAI,EAAE,YAAY;EAClBC,gBAAgB,EAAE,CACjB,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,EACV,UAAU,EACV,OAAO,EACP,WAAW,EACX,OAAO;AAET,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,IAAIA,CAAE;EAAEC,UAAU;EAAEC;AAAU,CAAC,EAAG;EAAA,IAAAC,mBAAA;EAEzD,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAM,CAAC,GAAGL,UAAU;EAC9C,MAAMM,UAAU,GAAGb,sEAAa,CAAE;IACjCQ,SAAS,EAAEV,iDAAU,CAAEU,SAAS,EAAE;MACjC,sBAAsB,EAAEE,QAAQ,IAAIE,KAAK,EAAEE,UAAU,EAAEJ;IACxD,CAAE;EACH,CAAE,CAAC;EAEH,MAAMK,gBAAgB,GAAGd,4EAAmB,CAAEY,UAAU,EAAE;IACzDG,YAAY,EAAEb,aAAa;IAC3B;IACAc,YAAY,EAAE,IAAI;IAClBC,QAAQ,EAAE,CACT,CACC,YAAY,CACZ,EACD,CACC,YAAY,CACZ,EACD,CACC,YAAY,CACZ,EACD,CACC,YAAY,CACZ,CACD;IACDC,aAAa,EAAE,CAAE,YAAY,CAAE;IAC/BC,8BAA8B,EAAE,IAAI;IACpCC,WAAW,GAAAZ,mBAAA,GAAEE,MAAM,EAAEU,WAAW,cAAAZ,mBAAA,cAAAA,mBAAA,GAAI;EACrC,CAAE,CAAC;EAEH,OAAOa,iEAAA;IAAA,GAAUP;EAAgB,CAAI,CAAC;AACvC;;;;;;;;;;;;;;;;;;;;;;AC5EA;AACA;AACA;AACA;AACA;AACsD;AACA;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACsB;;AAEtB;AACA;AACA;AAC0B;AACU;;AAEpC;AACA;AACA;AACA;AACA;AACAQ,oEAAiB,CAAEE,6CAAa,EAAE;EACjCD,IAAI;EACJE,IAAI,EAAEA,CAAA,KAAM;IACX,OAAOJ,iEAAA,CAACpB,gEAAW,CAACyB,OAAO,MAAE,CAAC;EAC/B;AACD,CAAE,CAAC;;;;;;;;;;ACjCH;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,gBAAgB;AAChB;;AAEA;AACA;;AAEA,kBAAkB,sBAAsB;AACxC;AACA;;AAEA;;AAEA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,KAAK,KAA6B;AAClC;AACA;AACA,GAAG,SAAS,IAA4E;AACxF;AACA,EAAE,iCAAqB,EAAE,mCAAE;AAC3B;AACA,GAAG;AAAA,kGAAC;AACJ,GAAG,KAAK,EAEN;AACF,CAAC;;;;;;;;;;;;;AC3DD;;;;;;;;;;;;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;WACA;WACA,kBAAkB,qBAAqB;WACvC,oHAAoH,iDAAiD;WACrK;WACA,KAAK;WACL;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;;;;WC7BA;WACA;WACA;WACA,eAAe,4BAA4B;WAC3C,eAAe;WACf,iCAAiC,WAAW;WAC5C;WACA;;;;;WCPA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA,8CAA8C;;;;;WCA9C;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;;WAEA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA,8CAA8C;;WAE9C;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,iCAAiC,mCAAmC;WACpE;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,MAAM,qBAAqB;WAC3B;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;WACA;WACA;;;;;UEnDA;UACA;UACA;UACA,2FAA2F,+CAA+C;UAC1I","sources":["webpack://tabor-cards-block/./src/edit.js","webpack://tabor-cards-block/./src/index.js","webpack://tabor-cards-block/./node_modules/classnames/index.js","webpack://tabor-cards-block/./src/style.scss?75bd","webpack://tabor-cards-block/external window [\"wp\",\"blockEditor\"]","webpack://tabor-cards-block/external window [\"wp\",\"blocks\"]","webpack://tabor-cards-block/external window [\"wp\",\"element\"]","webpack://tabor-cards-block/external window [\"wp\",\"i18n\"]","webpack://tabor-cards-block/webpack/bootstrap","webpack://tabor-cards-block/webpack/runtime/chunk loaded","webpack://tabor-cards-block/webpack/runtime/compat get default export","webpack://tabor-cards-block/webpack/runtime/define property getters","webpack://tabor-cards-block/webpack/runtime/hasOwnProperty shorthand","webpack://tabor-cards-block/webpack/runtime/make namespace object","webpack://tabor-cards-block/webpack/runtime/jsonp chunk loading","webpack://tabor-cards-block/webpack/before-startup","webpack://tabor-cards-block/webpack/startup","webpack://tabor-cards-block/webpack/after-startup"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Retrieves the translation of text.\n *\n * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * React hook that is used to mark the block wrapper element.\n * It provides all the necessary props like the class name.\n *\n * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops\n */\nimport { useBlockProps, useInnerBlocksProps, InnerBlocks } from '@wordpress/block-editor';\n\nconst DEFAULT_BLOCK = {\n\tname: 'tabor/card',\n\tattributesToCopy: [\n\t\t'backgroundColor',\n\t\t'border',\n\t\t'className',\n\t\t'fontFamily',\n\t\t'fontSize',\n\t\t'gradient',\n\t\t'style',\n\t\t'textColor',\n\t\t'width',\n\t],\n};\n\n/**\n * The edit function describes the structure of your block in the context of the\n * editor. This represents what the editor will render when the block is used.\n *\n * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit\n *\n * @return {WPElement} Element to render.\n */\nexport default function Edit( { attributes, className } ) {\n\n\tconst { fontSize, layout, style } = attributes;\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classnames( className, {\n\t\t\t'has-custom-font-size': fontSize || style?.typography?.fontSize,\n\t\t} ),\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\tdefaultBlock: DEFAULT_BLOCK,\n\t\t// This check should be handled by the `Inserter` internally to be consistent across all blocks that use it.\n\t\tdirectInsert: true,\n\t\ttemplate: [\n\t\t\t[\n\t\t\t\t'tabor/card',\n\t\t\t],\n\t\t\t[\n\t\t\t\t'tabor/card',\n\t\t\t],\n\t\t\t[\n\t\t\t\t'tabor/card',\n\t\t\t],\n\t\t\t[\n\t\t\t\t'tabor/card',\n\t\t\t],\n\t\t],\n\t\tallowedBlocks: [ 'tabor/card' ],\n\t\ttemplateInsertUpdatesSelection: true,\n\t\torientation: layout?.orientation ?? 'horizontal',\n\t} );\n\n\treturn
;\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';\nimport { InnerBlocks } from \"@wordpress/block-editor\";\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 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\tedit,\n\tsave: () => {\n\t\treturn ;\n\t},\n} );\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","// extracted by mini-css-extract-plugin\nexport {};","module.exports = window[\"wp\"][\"blockEditor\"];","module.exports = window[\"wp\"][\"blocks\"];","module.exports = window[\"wp\"][\"element\"];","module.exports = window[\"wp\"][\"i18n\"];","// 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 = function(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 = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\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(function(key) { return __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 = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(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 = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(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 = function(chunkId) { return installedChunks[chunkId] === 0; };\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\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(function(id) { return 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 = self[\"webpackChunktabor_cards_block\"] = self[\"webpackChunktabor_cards_block\"] || [];\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\"], function() { return __webpack_require__(\"./src/index.js\"); })\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n",""],"names":["classnames","__","useBlockProps","useInnerBlocksProps","InnerBlocks","DEFAULT_BLOCK","name","attributesToCopy","Edit","attributes","className","_layout$orientation","fontSize","layout","style","blockProps","typography","innerBlocksProps","defaultBlock","directInsert","template","allowedBlocks","templateInsertUpdatesSelection","orientation","createElement","registerBlockType","edit","metadata","save","Content"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/render.php: -------------------------------------------------------------------------------- 1 | 6 | 7 |
> 8 | 9 |
10 | -------------------------------------------------------------------------------- /build/style-index.css: -------------------------------------------------------------------------------- 1 | /*!***************************************************************************************************************************************************************************************************************************************!*\ 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! 3 | \***************************************************************************************************************************************************************************************************************************************/ 4 | .wp-block-tabor-cards { 5 | gap: 6px; 6 | } 7 | .wp-block-tabor-cards.is-layout-grid { 8 | grid-template-columns: 1fr 1fr !important; 9 | } 10 | 11 | /*# sourceMappingURL=style-index.css.map*/ -------------------------------------------------------------------------------- /build/style-index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"./style-index.css","mappings":";;;AAAA;EACI;AACJ;AACC;EAEC;AAAF,C","sources":["webpack://tabor-cards-block/./src/style.scss"],"sourcesContent":[".wp-block-tabor-cards {\n gap: 6px;\n\n\t&.is-layout-grid {\n\t\t// Always stay side-by-side.\n\t\tgrid-template-columns: 1fr 1fr !important;\n\t}\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /cards-block.php: -------------------------------------------------------------------------------- 1 | { 54 | // // Function to check if the content of an element is multiline 55 | // const checkForMultiLine = ( element ) => { 56 | // if (element) { 57 | // const lineHeight = parseFloat(getComputedStyle( element ).lineHeight); 58 | // const height = element.offsetHeight; 59 | // return height > lineHeight; 60 | // } 61 | // return false; 62 | // }; 63 | 64 | // // Set attribute based on title's multiline status. 65 | // const isTitleMultiline = checkForMultiLine( titleRef.current ); 66 | // setAttributes( { isOverflowTitle: isTitleMultiline } ); 67 | 68 | // // Set attribute based on description's multiline status. 69 | // const isDescriptionMultiline = checkForMultiLine( descriptionRef.current ); 70 | // setAttributes( { isOverflowDescription: isDescriptionMultiline } ); 71 | 72 | // // console.log('desc' + isDescriptionMultiline); 73 | // // console.log('title' + isTitleMultiline); 74 | 75 | // }, [ title, description ]); 76 | 77 | function onChange( attribute ) { 78 | return ( newValue ) => { 79 | setAttributes( { [ attribute ]: newValue } ); 80 | }; 81 | } 82 | 83 | function onSelectImage( media ) { 84 | if ( ! media || ! media.url ) { 85 | // In this case there was an error 86 | // previous attributes should be removed 87 | // because they may be temporary blob urls. 88 | setAttributes( { 89 | image: undefined 90 | } ); 91 | return; 92 | } 93 | 94 | // Sets the block's attribute and updates the edit component from the selected media. 95 | setAttributes( { 96 | image: media.url, 97 | } ); 98 | } 99 | 100 | const blockProps = useBlockProps( { className: 'remove-outline' } ); 101 | 102 | const onDropImage = ( files ) => { 103 | mediaUpload( { 104 | allowedTypes: [ 'image' ], 105 | filesList: files, 106 | onFileChange: ( [ media ] ) => { 107 | setAttributes( { image: media.url } ); 108 | }, 109 | } ); 110 | }; 111 | 112 | const onRemoveImage = () => { 113 | setAttributes( { image: undefined } ); 114 | }; 115 | 116 | const dropZone = ( 117 | 121 | ); 122 | 123 | const inspectorControls = ( 124 | 125 | 126 | 132 | 137 | setAttributes( { isOverflowTitle: ! isOverflowTitle } ) 138 | } 139 | /> 140 | 145 | setAttributes( { isOverflowDescription: ! isOverflowDescription } ) 146 | } 147 | /> 148 | 149 | 150 | ); 151 | 152 | const blockControls = ( 153 | 154 | 161 | { __( 'Reset' ) } 162 | 163 | 164 | ) 165 | 166 | return ( 167 | <> 168 | { blockControls } 169 | { inspectorControls } 170 |
171 | { dropZone } 172 | { image && ( 173 | 174 | { 178 | 179 | ) } 180 | 185 | 211 | 237 | 238 |
239 | 240 | ); 241 | } 242 | 243 | export default CardEdit; 244 | -------------------------------------------------------------------------------- /src/card/editor.scss: -------------------------------------------------------------------------------- 1 | .wp-block-tabor-card:not(.is-selected) { 2 | 3 | .wp-block-tabor-card__title, 4 | .wp-block-tabor-card__description { 5 | white-space: nowrap !important; 6 | } 7 | } 8 | 9 | .wp-block-tabor-card:active { 10 | transform: scale(1) !important; 11 | } 12 | -------------------------------------------------------------------------------- /src/card/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Registers a new block provided a unique name and an object defining its behavior. 3 | * 4 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 5 | */ 6 | import { registerBlockType } from '@wordpress/blocks'; 7 | 8 | /** 9 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. 10 | * All files containing `style` keyword are bundled together. The code used 11 | * gets applied both to the front of your site and to the editor. 12 | * 13 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css 14 | */ 15 | import './style.scss'; 16 | 17 | /** 18 | * Internal dependencies 19 | */ 20 | import Edit from './edit'; 21 | import metadata from './block.json'; 22 | 23 | /** 24 | * Every block starts by registering a new block type definition. 25 | * 26 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 27 | */ 28 | registerBlockType( metadata.name, { 29 | /** 30 | * @see ./edit.js 31 | */ 32 | edit: Edit, 33 | } ); 34 | -------------------------------------------------------------------------------- /src/card/render.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | > 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/card/style.scss: -------------------------------------------------------------------------------- 1 | .wp-block-tabor-card { 2 | align-items: flex-start; 3 | box-shadow: var(--wp--preset--shadow--inset, inset 0 0 0 1px hsl(0 0% 0% / 10%));; 4 | border-radius: 12px; 5 | padding: var(--wp--preset--spacing--20); 6 | font-size: var(--wp--preset--font-size--small); 7 | display: flex; 8 | flex-direction: row; 9 | text-decoration: none !important; 10 | position: relative; 11 | overflow: hidden; 12 | backface-visibility: hidden; 13 | transition: transform var(--wp--custom--transition--duration, 200ms) cubic-bezier(.4,0,.2,1); 14 | 15 | &:before { 16 | background-color: var(--wp--preset--color--theme-2); 17 | content: ''; 18 | position: absolute; 19 | top: 0; 20 | right: 0; 21 | bottom: 0; 22 | left: 0; 23 | border-radius: inherit; 24 | box-shadow: var(--wp--preset--shadow--inset, inset 0 0 0 1px hsl(0 0% 0% / 10%));; 25 | opacity: 0; 26 | transition: opacity var(--wp--custom--transition--duration, 200ms) ease-out; 27 | z-index: -1; 28 | } 29 | 30 | &:hover:before { 31 | box-shadow: var(--wp--preset--shadow--inset, inset 0 0 0 1px hsl(0 0% 0% / 10%));; 32 | opacity: 1; 33 | } 34 | 35 | &:hover .is-overflow { 36 | white-space: nowrap; 37 | text-overflow: none; 38 | display: block; 39 | transform: translateX(-60%); 40 | transition: transform 3s ease-out; 41 | } 42 | 43 | &:hover .wp-block-tabor-card__description.is-overflow { 44 | transition: transform 2.8s ease-out; 45 | } 46 | 47 | &:active { 48 | transform: scale(0.98); 49 | } 50 | 51 | } 52 | 53 | .wp-block-tabor-card__content { 54 | display: flex; 55 | flex-direction: column; 56 | width: 100%; 57 | justify-content: center; 58 | mask-image: linear-gradient(to left, transparent 2%, black 20%); 59 | 60 | &.has-image { 61 | mask-image: linear-gradient(to left, transparent 2%, black 20%, black 90%, transparent); 62 | width: calc(100% - 44px); 63 | } 64 | } 65 | 66 | .wp-block-tabor-card__title, 67 | .wp-block-tabor-card__description { 68 | white-space: nowrap; 69 | transition: transform 800ms ease-out; 70 | } 71 | 72 | .wp-block-tabor-card__description { 73 | opacity: 0.70; 74 | font-size: 90%; 75 | } 76 | 77 | // Positioning when an image is added. 78 | .wp-block-tabor-card > span + span { 79 | padding-left: 12px; 80 | } 81 | 82 | .wp-block-tabor-card__image { 83 | background-color: var(--wp--preset--color--theme-3); 84 | border-radius: 3px; 85 | display: block; 86 | width: 44px; 87 | height: 44px; 88 | aspect-ratio: 1/1; 89 | position: relative; 90 | 91 | &:after { 92 | content: ''; 93 | box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); 94 | position: absolute; 95 | top: 0; 96 | right: 0; 97 | bottom: 0; 98 | left: 0; 99 | height: 100%; 100 | width: 100%; 101 | border-radius: inherit; 102 | } 103 | 104 | img { 105 | width: 100%; 106 | height: 100%; 107 | object-fit: cover; 108 | border-radius: inherit; 109 | position: absolute; 110 | transition: transform var(--wp--custom--transition--duration, 200ms) ease-out; 111 | } 112 | } 113 | 114 | .wp-block-tabor-card__image-blur { 115 | box-shadow: none; 116 | filter: blur(8px); 117 | z-index: -1; 118 | transform: scale(0.75) translateY(4px); 119 | transition: transform var(--wp--custom--transition--duration, 200ms) ease-out; 120 | backface-visibility: hidden; 121 | 122 | .wp-block-tabor-card:hover & { 123 | transform: scale(0.8) translateY(4px); 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /src/edit.js: -------------------------------------------------------------------------------- 1 | /** 2 | * External dependencies 3 | */ 4 | import classnames from 'classnames'; 5 | 6 | /** 7 | * Retrieves the translation of text. 8 | * 9 | * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ 10 | */ 11 | import { __ } from '@wordpress/i18n'; 12 | 13 | /** 14 | * React hook that is used to mark the block wrapper element. 15 | * It provides all the necessary props like the class name. 16 | * 17 | * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops 18 | */ 19 | import { useBlockProps, useInnerBlocksProps, InnerBlocks } from '@wordpress/block-editor'; 20 | 21 | const DEFAULT_BLOCK = { 22 | name: 'tabor/card', 23 | attributesToCopy: [ 24 | 'backgroundColor', 25 | 'border', 26 | 'className', 27 | 'fontFamily', 28 | 'fontSize', 29 | 'gradient', 30 | 'style', 31 | 'textColor', 32 | 'width', 33 | ], 34 | }; 35 | 36 | /** 37 | * The edit function describes the structure of your block in the context of the 38 | * editor. This represents what the editor will render when the block is used. 39 | * 40 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit 41 | * 42 | * @return {WPElement} Element to render. 43 | */ 44 | export default function Edit( { attributes, className } ) { 45 | 46 | const { fontSize, layout, style } = attributes; 47 | const blockProps = useBlockProps( { 48 | className: classnames( className, { 49 | 'has-custom-font-size': fontSize || style?.typography?.fontSize, 50 | } ), 51 | } ); 52 | 53 | const innerBlocksProps = useInnerBlocksProps( blockProps, { 54 | defaultBlock: DEFAULT_BLOCK, 55 | // This check should be handled by the `Inserter` internally to be consistent across all blocks that use it. 56 | directInsert: true, 57 | template: [ 58 | [ 59 | 'tabor/card', 60 | ], 61 | [ 62 | 'tabor/card', 63 | ], 64 | [ 65 | 'tabor/card', 66 | ], 67 | [ 68 | 'tabor/card', 69 | ], 70 | ], 71 | allowedBlocks: [ 'tabor/card' ], 72 | templateInsertUpdatesSelection: true, 73 | orientation: layout?.orientation ?? 'horizontal', 74 | } ); 75 | 76 | return
; 77 | } 78 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Registers a new block provided a unique name and an object defining its behavior. 3 | * 4 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 5 | */ 6 | import { registerBlockType } from '@wordpress/blocks'; 7 | import { InnerBlocks } from "@wordpress/block-editor"; 8 | 9 | /** 10 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. 11 | * All files containing `style` keyword are bundled together. The code used 12 | * gets applied both to the front of your site and to the editor. 13 | * 14 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css 15 | */ 16 | import './style.scss'; 17 | 18 | /** 19 | * Internal dependencies 20 | */ 21 | import edit from './edit'; 22 | import metadata from './block.json'; 23 | 24 | /** 25 | * Every block starts by registering a new block type definition. 26 | * 27 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ 28 | */ 29 | registerBlockType( metadata.name, { 30 | edit, 31 | save: () => { 32 | return ; 33 | }, 34 | } ); 35 | -------------------------------------------------------------------------------- /src/render.php: -------------------------------------------------------------------------------- 1 | 6 | 7 |
> 8 | 9 |
10 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | .wp-block-tabor-cards { 2 | gap: 6px; 3 | 4 | &.is-layout-grid { 5 | // Always stay side-by-side. 6 | grid-template-columns: 1fr 1fr !important; 7 | } 8 | } 9 | --------------------------------------------------------------------------------