deprecated
5 years ago
block.js
5 years ago
component.js
5 years ago
icon.svg
5 years ago
style.css
6 years ago
style.css.map
6 years ago
style.scss
5 years ago
block.js
364 lines
| 1 | /** |
| 2 | * Button block type |
| 3 | * |
| 4 | */ |
| 5 | import { VKBButton } from "./component"; |
| 6 | import { deprecated } from "./deprecated/deprecated"; |
| 7 | import { vkbBlockEditor } from "./../_helper/depModules"; |
| 8 | import { FontAwesome } from "../_helper/font-awesome-new" |
| 9 | import BlockIcon from "./icon.svg"; |
| 10 | |
| 11 | const { __ } = wp.i18n; |
| 12 | const { registerBlockType } = wp.blocks; |
| 13 | const { RadioControl, PanelBody, BaseControl, CheckboxControl, TextControl, Dashicon, ButtonGroup, Button } = wp.components; |
| 14 | const { Fragment } = wp.element; |
| 15 | const { RichText, InspectorControls, ColorPalette, URLInput, } = vkbBlockEditor; |
| 16 | |
| 17 | registerBlockType('vk-blocks/button', { |
| 18 | title: __('Button', 'vk-blocks'), |
| 19 | icon: <BlockIcon />, |
| 20 | category: 'vk-blocks-cat', |
| 21 | attributes: { |
| 22 | content: { |
| 23 | type: 'string', |
| 24 | source: 'html', |
| 25 | selector: 'span', |
| 26 | }, |
| 27 | subCaption: { |
| 28 | type: 'string', |
| 29 | default: "", |
| 30 | }, |
| 31 | buttonUrl: { |
| 32 | type: 'string', |
| 33 | default: "", |
| 34 | }, |
| 35 | buttonTarget: { |
| 36 | type: 'Boolean', |
| 37 | default: false, |
| 38 | }, |
| 39 | buttonSize: { |
| 40 | type: 'string', |
| 41 | default: 'md', |
| 42 | }, |
| 43 | buttonType: { |
| 44 | type: 'string', |
| 45 | default: '0', |
| 46 | }, |
| 47 | buttonColor: { |
| 48 | type: 'string', |
| 49 | default: 'primary', |
| 50 | }, |
| 51 | buttonColorCustom: { |
| 52 | type: 'string', |
| 53 | default: 'undefined', |
| 54 | }, |
| 55 | buttonAlign: { |
| 56 | type: 'string', |
| 57 | default: 'left', |
| 58 | }, |
| 59 | fontAwesomeIconBefore: { |
| 60 | type: 'string', |
| 61 | default: '', |
| 62 | }, |
| 63 | fontAwesomeIconAfter: { |
| 64 | type: 'string', |
| 65 | default: '', |
| 66 | } |
| 67 | }, |
| 68 | supports:{ |
| 69 | anchor:true, |
| 70 | }, |
| 71 | |
| 72 | edit(props) { |
| 73 | const { attributes, className, setAttributes, isSelected } = props |
| 74 | const { |
| 75 | content, |
| 76 | subCaption, |
| 77 | buttonUrl, |
| 78 | buttonTarget, |
| 79 | buttonSize, |
| 80 | buttonType, |
| 81 | buttonColor, |
| 82 | buttonColorCustom, |
| 83 | buttonAlign, |
| 84 | fontAwesomeIconBefore, |
| 85 | fontAwesomeIconAfter, |
| 86 | } = attributes; |
| 87 | |
| 88 | let containerClass; |
| 89 | if (buttonColorCustom) { |
| 90 | containerClass = `vk_button vk_button-align-${buttonAlign} vk_button-color-custom`; |
| 91 | } else { |
| 92 | containerClass = `vk_button vk_button-align-${buttonAlign}`; |
| 93 | } |
| 94 | |
| 95 | if (className) { |
| 96 | containerClass = `${className} vk_button vk_button-align-${buttonAlign}`; |
| 97 | } else { |
| 98 | containerClass = `vk_button vk_button-align-${buttonAlign}`; |
| 99 | } |
| 100 | |
| 101 | return ( |
| 102 | <Fragment> |
| 103 | <InspectorControls> |
| 104 | <PanelBody title={ __('Button setting', 'vk-blocks') }> |
| 105 | <TextControl |
| 106 | label={ __('Sub Caption', 'vk-blocks') } |
| 107 | value={ subCaption } |
| 108 | onChange={ (value) => setAttributes({ subCaption: value }) } |
| 109 | placeholder={ 'Sub Caption' } |
| 110 | /> |
| 111 | |
| 112 | <TextControl |
| 113 | label={ __('Button URL', 'vk-blocks') } |
| 114 | value={ buttonUrl } |
| 115 | onChange={ (value) => setAttributes({ buttonUrl: value }) } |
| 116 | placeholder={ 'Button URL' } |
| 117 | /> |
| 118 | |
| 119 | <CheckboxControl |
| 120 | label={ __('Open link new tab.', 'vk-blocks') } |
| 121 | checked={ buttonTarget } |
| 122 | onChange={ (checked) => setAttributes({ buttonTarget: checked }) } |
| 123 | /> |
| 124 | |
| 125 | <h4 className="mt-0 mb-2">{ __('Button Size:', 'vk-blocks') }</h4> |
| 126 | <ButtonGroup className="mb-3"> |
| 127 | <Button |
| 128 | isSmall |
| 129 | isPrimary={ buttonSize === 'lg' } |
| 130 | isSecondary={ buttonSize !== 'lg' } |
| 131 | onClick={ () => setAttributes({ buttonSize: 'lg' }) } |
| 132 | > |
| 133 | { __('Large', 'vk-blocks') } |
| 134 | </Button> |
| 135 | <Button |
| 136 | isSmall |
| 137 | isPrimary={ buttonSize === 'md' } |
| 138 | isSecondary={ buttonSize !== 'md' } |
| 139 | onClick={ () => setAttributes({ buttonSize: 'md' }) } |
| 140 | > |
| 141 | { __('Normal', 'vk-blocks') } |
| 142 | </Button> |
| 143 | <Button |
| 144 | isSmall |
| 145 | isPrimary={ buttonSize === 'sm' } |
| 146 | isSecondary={ buttonSize !== 'sm' } |
| 147 | onClick={ () => setAttributes({ buttonSize: 'sm' }) } |
| 148 | > |
| 149 | { __('Small', 'vk-blocks') } |
| 150 | </Button> |
| 151 | </ButtonGroup> |
| 152 | |
| 153 | <h4 className="mt-0 mb-2">{ __('Button Position:', 'vk-blocks') }</h4> |
| 154 | <ButtonGroup className="mb-3"> |
| 155 | <Button |
| 156 | isSmall |
| 157 | isPrimary={ buttonAlign === 'left' } |
| 158 | isSecondary={ buttonAlign !== 'left' } |
| 159 | onClick={ () => setAttributes({ buttonAlign: 'left' }) } |
| 160 | > |
| 161 | { __('Left', 'vk-blocks') } |
| 162 | </Button> |
| 163 | <Button |
| 164 | isSmall |
| 165 | isPrimary={ buttonAlign === 'center' } |
| 166 | isSecondary={ buttonAlign !== 'center' } |
| 167 | onClick={ () => setAttributes({ buttonAlign: 'center' }) } |
| 168 | > |
| 169 | { __('Center', 'vk-blocks') } |
| 170 | </Button> |
| 171 | <Button |
| 172 | isSmall |
| 173 | isPrimary={ buttonAlign === 'right' } |
| 174 | isSecondary={ buttonAlign !== 'right' } |
| 175 | onClick={ () => setAttributes({ buttonAlign: 'right' }) } |
| 176 | > |
| 177 | { __('Right', 'vk-blocks') } |
| 178 | </Button> |
| 179 | <Button |
| 180 | isSmall |
| 181 | isPrimary={ buttonAlign === 'wide' } |
| 182 | isSecondary={ buttonAlign !== 'wide' } |
| 183 | onClick={ () => setAttributes({ buttonAlign: 'wide' }) } |
| 184 | > |
| 185 | { __('Wide', 'vk-blocks') } |
| 186 | </Button> |
| 187 | <Button |
| 188 | isSmall |
| 189 | isPrimary={ buttonAlign === 'block' } |
| 190 | isSecondary={ buttonAlign !== 'block' } |
| 191 | onClick={ () => setAttributes({ buttonAlign: 'block' }) } |
| 192 | > |
| 193 | { __('Block', 'vk-blocks') } |
| 194 | </Button> |
| 195 | </ButtonGroup> |
| 196 | |
| 197 | <h4 className="mt-0 mb-2">{ __('Button Style:', 'vk-blocks') }</h4> |
| 198 | <ButtonGroup className="mb-2"> |
| 199 | <Button |
| 200 | isSmall |
| 201 | isPrimary={ buttonType === '0' } |
| 202 | isSecondary={ buttonType !== '0' } |
| 203 | onClick={ () => setAttributes({ buttonType: '0' }) } |
| 204 | > |
| 205 | { __('Solid color', 'vk-blocks') } |
| 206 | </Button> |
| 207 | <Button |
| 208 | isSmall |
| 209 | isPrimary={ buttonType === '1' } |
| 210 | isSecondary={ buttonType !== '1' } |
| 211 | onClick={ () => setAttributes({ buttonType: '1' }) } |
| 212 | > |
| 213 | { __('No background', 'vk-blocks') } |
| 214 | </Button> |
| 215 | <Button |
| 216 | isSmall |
| 217 | isPrimary={ buttonType === '2' } |
| 218 | isSecondary={ buttonType !== '2' } |
| 219 | onClick={ () => setAttributes({ buttonType: '2' }) } |
| 220 | > |
| 221 | { __('Text only', 'vk-blocks') } |
| 222 | </Button> |
| 223 | </ButtonGroup> |
| 224 | <p className="mb-3">{ __('If you select "No background", that you need to select a Custom Color.', 'vk-blocks') }</p> |
| 225 | |
| 226 | <RadioControl |
| 227 | label={ __('Default Color:', 'vk-blocks') } |
| 228 | selected={ buttonColor } |
| 229 | options={ [ |
| 230 | { label: __('Primary', 'vk-blocks'), value: 'primary' }, |
| 231 | { label: __('Secondary', 'vk-blocks'), value: 'secondary' }, |
| 232 | { label: __('Success', 'vk-blocks'), value: 'success' }, |
| 233 | { label: __('Info', 'vk-blocks'), value: 'info' }, |
| 234 | { label: __('Warning', 'vk-blocks'), value: 'warning' }, |
| 235 | { label: __('Danger', 'vk-blocks'), value: 'danger' }, |
| 236 | { label: __('Light', 'vk-blocks'), value: 'light' }, |
| 237 | { label: __('Dark', 'vk-blocks'), value: 'dark' }, |
| 238 | ] } |
| 239 | onChange={ (value) => setAttributes({ buttonColor: value }) } |
| 240 | /> |
| 241 | <BaseControl |
| 242 | label={ __('Custom Color', 'vk-blocks') } |
| 243 | help={ __('This custom color overrides the default color. If you want to use the default color, click the clear button.', 'vk-blocks') } |
| 244 | > |
| 245 | <ColorPalette |
| 246 | value={ buttonColorCustom } |
| 247 | onChange={ (value) => setAttributes({ buttonColorCustom: value }) } |
| 248 | /> |
| 249 | </BaseControl> |
| 250 | |
| 251 | <BaseControl> |
| 252 | <h4 className="mt-0 mb-2">{ __('Icon ( Font Awesome )', 'vk-blocks') }</h4> |
| 253 | <BaseControl |
| 254 | label={ __("Before text", "vk-blocks") } |
| 255 | > |
| 256 | <FontAwesome |
| 257 | attributeName={ "fontAwesomeIconBefore" } |
| 258 | { ...props } |
| 259 | /> |
| 260 | </BaseControl> |
| 261 | <BaseControl |
| 262 | label={ __("After text", "vk-blocks") } |
| 263 | > |
| 264 | <FontAwesome |
| 265 | attributeName={ "fontAwesomeIconAfter" } |
| 266 | { ...props } |
| 267 | /> |
| 268 | </BaseControl> |
| 269 | </BaseControl> |
| 270 | |
| 271 | </PanelBody> |
| 272 | </InspectorControls> |
| 273 | <div className={ containerClass }> |
| 274 | <VKBButton lbColorCustom={ buttonColorCustom } lbColor={ buttonColor } lbType={ buttonType } |
| 275 | lbAlign={ buttonAlign } |
| 276 | lbSize={ buttonSize } |
| 277 | lbFontAwesomeIconBefore={ fontAwesomeIconBefore } |
| 278 | lbFontAwesomeIconAfter={ fontAwesomeIconAfter } |
| 279 | lbsubCaption={ subCaption } |
| 280 | lbRichtext={ |
| 281 | <RichText |
| 282 | tagName="span" |
| 283 | className={ 'vk_button_link_txt' } |
| 284 | onChange={ (value) => setAttributes({ content: value }) } |
| 285 | value={ content } |
| 286 | placeholder={ __('Input text', 'vk-blocks') } |
| 287 | allowedFormats={ [ |
| 288 | 'core/bold', |
| 289 | // 'core/code', |
| 290 | // 'core/image', |
| 291 | 'core/italic', |
| 292 | // 'core/link', |
| 293 | 'core/strikethrough', |
| 294 | // 'core/underline', |
| 295 | // 'core/text-color', |
| 296 | 'core/superscript', |
| 297 | 'core/subscript', |
| 298 | // 'vk-blocks/highlighter', |
| 299 | 'vk-blocks/responsive-br' |
| 300 | ] } |
| 301 | isSelected={ true } |
| 302 | /> |
| 303 | } |
| 304 | /> |
| 305 | </div> |
| 306 | </Fragment> |
| 307 | ); |
| 308 | }, |
| 309 | |
| 310 | save({ attributes, className }) { |
| 311 | const { |
| 312 | content, |
| 313 | subCaption, |
| 314 | buttonUrl, |
| 315 | buttonTarget, |
| 316 | buttonSize, |
| 317 | buttonType, |
| 318 | buttonColor, |
| 319 | buttonColorCustom, |
| 320 | buttonAlign, |
| 321 | fontAwesomeIconBefore, |
| 322 | fontAwesomeIconAfter, |
| 323 | } = attributes; |
| 324 | |
| 325 | let containerClass = ''; |
| 326 | if (buttonColorCustom && "undefined" !== buttonColorCustom) { |
| 327 | |
| 328 | containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`; |
| 329 | |
| 330 | } else { |
| 331 | |
| 332 | containerClass = `vk_button vk_button-align-${buttonAlign}`; |
| 333 | |
| 334 | } |
| 335 | |
| 336 | if (className) { |
| 337 | containerClass = className + ' ' + containerClass; |
| 338 | } |
| 339 | |
| 340 | return ( |
| 341 | <div className={ containerClass }> |
| 342 | |
| 343 | <VKBButton lbColorCustom={ buttonColorCustom } lbColor={ buttonColor } lbType={ buttonType } |
| 344 | lbAlign={ buttonAlign } |
| 345 | lbSize={ buttonSize } |
| 346 | lbUrl={ buttonUrl } |
| 347 | lbTarget={ buttonTarget } |
| 348 | lbFontAwesomeIconBefore={ fontAwesomeIconBefore } |
| 349 | lbFontAwesomeIconAfter={ fontAwesomeIconAfter } |
| 350 | lbsubCaption={ subCaption } |
| 351 | lbRichtext={ |
| 352 | <RichText.Content |
| 353 | tagName="span" |
| 354 | className={ 'vk_button_link_txt' } |
| 355 | value={ content } |
| 356 | /> |
| 357 | } /> |
| 358 | </div> |
| 359 | ); |
| 360 | }, |
| 361 | |
| 362 | deprecated |
| 363 | }); |
| 364 |