block.js
214 lines
| 1 | /** |
| 2 | * Baloon block type |
| 3 | * |
| 4 | */ |
| 5 | |
| 6 | const { __ } = wp.i18n; // Import __() from wp.i18n |
| 7 | const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks |
| 8 | const { RangeControl, RadioControl, PanelBody, Button } = wp.components; |
| 9 | const { Fragment } = wp.element; |
| 10 | const { RichText, InspectorControls, MediaUpload, ColorPalette } = |
| 11 | wp.blockEditor && wp.blockEditor.BlockEdit ? wp.blockEditor : wp.editor; |
| 12 | const BlockIcon = ( |
| 13 | <svg |
| 14 | xmlns="http://www.w3.org/2000/svg" |
| 15 | width="576" |
| 16 | height="512" |
| 17 | viewBox="0 0 576 512" |
| 18 | > |
| 19 | <path d="M544 450.583c0 22.75 13.014 42.454 32 52.092v7.969c-5.313 0.727-10.736 1.112-16.25 1.112-34.004 0-64.674-14.264-86.361-37.132-13.111 3.491-27.001 5.376-41.389 5.376-79.529 0-144-57.308-144-128s64.471-128 144-128c79.529 0 144 57.308 144 128 0 27.674-9.882 53.296-26.678 74.233-3.412 7.412-5.322 15.656-5.322 24.35zM115.339 110.593c-33.107 26.899-51.339 61.492-51.339 97.407 0 20.149 5.594 39.689 16.626 58.075 11.376 18.96 28.491 36.293 49.494 50.126 15.178 9.996 25.39 25.974 28.088 43.947 0.9 5.992 1.464 12.044 1.685 18.062 3.735-3.097 7.375-6.423 10.94-9.988 12.077-12.076 28.39-18.745 45.251-18.745 2.684 0 5.381 0.168 8.078 0.512 10.474 1.331 21.172 2.008 31.797 2.010v64c-13.564-0.001-26.877-0.869-39.871-2.521-54.989 54.989-120.625 64.85-184.088 66.298v-13.458c34.268-16.789 64-47.37 64-82.318 0-4.877-0.379-9.665-1.082-14.348-57.898-38.132-94.918-96.377-94.918-161.652 0-114.875 114.615-208 256-208 139.229 0 252.496 90.307 255.918 202.76-20.548-9.158-42.92-14.711-66.131-16.289-5.765-28.034-22.701-54.408-49.126-75.878-17.661-14.349-38.458-25.695-61.814-33.722-24.853-8.54-51.38-12.871-78.847-12.871s-53.994 4.331-78.847 12.871c-23.356 8.027-44.153 19.372-61.814 33.722z" /> |
| 20 | </svg> |
| 21 | ); |
| 22 | |
| 23 | /** |
| 24 | * Register: aa Gutenberg Block. |
| 25 | * |
| 26 | * Registers a new block provided a unique name and an object defining its |
| 27 | * behavior. Once registered, the block is made editor as an option to any |
| 28 | * editor interface where blocks are implemented. |
| 29 | * |
| 30 | * @link https://wordpress.org/gutenberg/handbook/block-api/ |
| 31 | * @param {string} name Block name. |
| 32 | * @param {Object} settings Block settings. |
| 33 | * @return {?WPBlock} The block, if it has been successfully |
| 34 | * registered; otherwise `undefined`. |
| 35 | */ |
| 36 | registerBlockType("vk-blocks/balloon", { |
| 37 | // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. |
| 38 | title: __("Ballon", "vk-blocks"), // Block title. |
| 39 | icon: BlockIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. |
| 40 | category: "vk-blocks-cat", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. |
| 41 | attributes: { |
| 42 | content: { |
| 43 | source: "html", |
| 44 | selector: "p" |
| 45 | }, |
| 46 | balloonName: { |
| 47 | source: "html", |
| 48 | selector: "figcaption" |
| 49 | }, |
| 50 | balloonType: { |
| 51 | type: "string", |
| 52 | default: "type-serif" |
| 53 | }, |
| 54 | balloonBgColor: { |
| 55 | type: "string" |
| 56 | }, |
| 57 | balloonAlign: { |
| 58 | type: "string", |
| 59 | default: "position-left" |
| 60 | }, |
| 61 | IconImage: { |
| 62 | type: "string", |
| 63 | default: null // no image by default! |
| 64 | } |
| 65 | }, |
| 66 | |
| 67 | /** |
| 68 | * The edit function describes the structure of your block in the context of the editor. |
| 69 | * This represents what the editor will render when the block is used. |
| 70 | * |
| 71 | * The "edit" property must be a valid function. |
| 72 | * |
| 73 | * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
| 74 | */ |
| 75 | edit({ attributes, className, setAttributes }) { |
| 76 | const { |
| 77 | content, |
| 78 | balloonName, |
| 79 | balloonType, |
| 80 | balloonBgColor, |
| 81 | balloonAlign, |
| 82 | IconImage |
| 83 | } = attributes; |
| 84 | |
| 85 | return ( |
| 86 | <Fragment> |
| 87 | <InspectorControls> |
| 88 | <PanelBody title={__("Balloon setting", "vk-blocks")}> |
| 89 | <RadioControl |
| 90 | label={__("Position", "vk-blocks")} |
| 91 | help={__( |
| 92 | "Please specify the layout of the balloon.", |
| 93 | "vk-blocks" |
| 94 | )} |
| 95 | selected={balloonAlign} |
| 96 | options={[ |
| 97 | { label: __("Left", "vk-blocks"), value: "position-left" }, |
| 98 | { label: __("Right", "vk-blocks"), value: "position-right" } |
| 99 | ]} |
| 100 | onChange={value => setAttributes({ balloonAlign: value })} |
| 101 | /> |
| 102 | <RadioControl |
| 103 | label={__("Type", "vk-blocks")} |
| 104 | help={__("Please select the type of balloon.", "vk-blocks")} |
| 105 | selected={balloonType} |
| 106 | options={[ |
| 107 | { label: __("Serif", "vk-blocks"), value: "type-serif" }, |
| 108 | { label: __("Thinking", "vk-blocks"), value: "type-think" } |
| 109 | ]} |
| 110 | onChange={value => setAttributes({ balloonType: value })} |
| 111 | /> |
| 112 | <ColorPalette |
| 113 | value={balloonBgColor} |
| 114 | onChange={value => setAttributes({ balloonBgColor: value })} |
| 115 | /> |
| 116 | </PanelBody> |
| 117 | </InspectorControls> |
| 118 | |
| 119 | <div |
| 120 | className={`${className} vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType}`} |
| 121 | > |
| 122 | <div className={"vk_balloon_icon"}> |
| 123 | <MediaUpload |
| 124 | onSelect={value => |
| 125 | setAttributes({ IconImage: value.sizes.full.url }) |
| 126 | } |
| 127 | type="image" |
| 128 | className={"vk_balloon_icon_image"} |
| 129 | value={IconImage} |
| 130 | render={({ open }) => ( |
| 131 | <Button |
| 132 | onClick={open} |
| 133 | className={IconImage ? "image-button" : "button button-large"} |
| 134 | > |
| 135 | {!IconImage ? ( |
| 136 | __("Select image", "vk-blocks") |
| 137 | ) : ( |
| 138 | <img |
| 139 | className={"vk_balloon_icon_image"} |
| 140 | src={IconImage} |
| 141 | alt={__("Upload image", "vk-blocks")} |
| 142 | /> |
| 143 | )} |
| 144 | </Button> |
| 145 | )} |
| 146 | /> |
| 147 | <RichText |
| 148 | tagName="figcaption" |
| 149 | className={"vk_balloon_icon_name"} |
| 150 | onChange={value => setAttributes({ balloonName: value })} |
| 151 | value={balloonName} |
| 152 | placeholder={__("Icon Name", "vk-blocks")} |
| 153 | /> |
| 154 | </div> |
| 155 | <RichText |
| 156 | style={{ background: balloonBgColor, border: balloonBgColor }} |
| 157 | tagName="p" |
| 158 | className={"vk_balloon_content"} |
| 159 | onChange={value => setAttributes({ content: value })} |
| 160 | value={content} |
| 161 | placeholder={__("Input text", "vk-blocks")} |
| 162 | /> |
| 163 | </div> |
| 164 | </Fragment> |
| 165 | ); |
| 166 | }, |
| 167 | |
| 168 | /** |
| 169 | * The save function defin className }> which the different attributes should be combined |
| 170 | * into the final markup, which is then serialized by Gutenberg into post_content. |
| 171 | * |
| 172 | * The "save" property must be specified and must be a valid function. |
| 173 | * |
| 174 | * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
| 175 | */ |
| 176 | save({ attributes, className }) { |
| 177 | const { |
| 178 | content, |
| 179 | balloonName, |
| 180 | balloonType, |
| 181 | balloonBgColor, |
| 182 | balloonAlign, |
| 183 | IconImage |
| 184 | } = attributes; |
| 185 | |
| 186 | return ( |
| 187 | <div |
| 188 | className={`vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType}`} |
| 189 | > |
| 190 | <div className={"vk_balloon_icon"}> |
| 191 | {IconImage ? ( |
| 192 | <figure> |
| 193 | <img className={"vk_balloon_icon_image"} src={IconImage} alt="" /> |
| 194 | <RichText.Content |
| 195 | tagName="figcaption" |
| 196 | className={"vk_balloon_icon_name"} |
| 197 | value={balloonName} |
| 198 | /> |
| 199 | </figure> |
| 200 | ) : ( |
| 201 | "" |
| 202 | )} |
| 203 | </div> |
| 204 | <RichText.Content |
| 205 | className={"vk_balloon_content"} |
| 206 | style={{ background: balloonBgColor, border: balloonBgColor }} |
| 207 | tagName="p" |
| 208 | value={content} |
| 209 | /> |
| 210 | </div> |
| 211 | ); |
| 212 | } |
| 213 | }); |
| 214 |