block.js
86 lines
| 1 | /** |
| 2 | * Table block type |
| 3 | */ |
| 4 | import React from "react"; |
| 5 | import {schema} from './schema'; |
| 6 | |
| 7 | const { lodash } = window; |
| 8 | const {__} = wp.i18n; // Import __() from wp.i18n |
| 9 | const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks |
| 10 | const {RichText} = wp.blockEditor && wp.blockEditor.BlockEdit ? wp.blockEditor : wp.editor; |
| 11 | const BlockIcon = ( |
| 12 | <svg xmlns="http://www.w3.org/2000/svg" width="576" height="512" viewBox="0 0 576 512"> |
| 13 | <path d="M63.6,432.7h448.9c24.8,0,44.9-20.1,44.9-44.9V125.1c0-24.8-20.1-44.9-44.9-44.9H63.6c-24.8,0-44.9,20.1-44.9,44.9v262.7 |
| 14 | C18.7,412.6,38.8,432.7,63.6,432.7z M63.6,377.9v-37h202v37H63.6z M265.6,275.9h-202V238h202V275.9z M310.4,228h202v57.9h-202V228z |
| 15 | M310.4,387.9v-57h202v57H310.4z M512.4,125.1v58h-202v-58H512.4z M265.6,135.1v38h-202v-38H265.6z"/> |
| 16 | </svg> |
| 17 | ); |
| 18 | |
| 19 | /** |
| 20 | * Register: a Gutenberg Block. |
| 21 | * |
| 22 | * Registers a new block provided a unique name and an object defining its |
| 23 | * behavior. Once registered, the block is made editor as an option to any |
| 24 | * editor interface where blocks are implemented. |
| 25 | * |
| 26 | * @link https://wordpress.org/gutenberg/handbook/block-api/ |
| 27 | * @param {string} name Block name. |
| 28 | * @param {Object} settings Block settings. |
| 29 | * @return {?WPBlock} The block, if it has been successfully |
| 30 | * registered; otherwise `undefined`. |
| 31 | */ |
| 32 | registerBlockType('vk-blocks/td', { |
| 33 | // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. |
| 34 | title: __('Td', 'vk-blocks'), // Block title. |
| 35 | icon: BlockIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. |
| 36 | category: 'vk-blocks-cat', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. |
| 37 | attributes: schema, |
| 38 | supports: { |
| 39 | inserter: false, |
| 40 | }, |
| 41 | |
| 42 | /** |
| 43 | * The edit function describes the structure of your block in the context of the editor. |
| 44 | * This represents what the editor will render when the block is used. |
| 45 | * |
| 46 | * The "edit" property must be a valid function. |
| 47 | * |
| 48 | * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
| 49 | */ |
| 50 | edit({attributes, setAttributes}) { |
| 51 | const { |
| 52 | content |
| 53 | } = attributes; |
| 54 | |
| 55 | return (<td><RichText |
| 56 | tagName="div" |
| 57 | className={'vk_td_content wp-block-table__cell-content'} |
| 58 | onChange={(value) => setAttributes({content: value})} |
| 59 | value={content} |
| 60 | // placeholder={__('Please enter content', 'vk-blocks')} |
| 61 | /></td>); |
| 62 | }, |
| 63 | |
| 64 | /** |
| 65 | * The save function define className }> which the different attributes should be combined |
| 66 | * into the final markup, which is then serialized by Gutenberg into post_content. |
| 67 | * |
| 68 | * The "save" property must be specified and must be a valid function. |
| 69 | * |
| 70 | * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
| 71 | */ |
| 72 | save({attributes}) { |
| 73 | const { |
| 74 | content |
| 75 | } = attributes; |
| 76 | return (<td><RichText.Content |
| 77 | tagName="div" |
| 78 | className={'vk_td_content wp-block-table__cell-content'} |
| 79 | value={content} |
| 80 | /></td>); |
| 81 | }, |
| 82 | |
| 83 | //Please comment out, when you need to use deprecated. |
| 84 | // deprecated:deprecated |
| 85 | }); |
| 86 |