disable-blocks.js
1 year ago
editor.scss
1 year ago
global-max-width.js
1 year ago
index.js
1 year ago
stores.js
1 year ago
style-html-attribute.js
1 year ago
toolbar-appenders.js
1 year ago
global-max-width.js
72 lines
| 1 | import { Tooltip, Button } from '@wordpress/components'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { addFilter } from '@wordpress/hooks'; |
| 4 | |
| 5 | function GlobeIcon( { size, ...props } ) { |
| 6 | return ( |
| 7 | <svg |
| 8 | viewBox="0 0 256 256" |
| 9 | width={ size ? size : 24 } |
| 10 | height={ size ? size : 24 } |
| 11 | aria-hidden="true" |
| 12 | focusable="false" |
| 13 | { ...props } |
| 14 | > |
| 15 | <rect width="256" height="256" fill="none" /> |
| 16 | <line x1="32" y1="128" x2="224" y2="128" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="12" /> |
| 17 | <circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="12" /> |
| 18 | <path d="M168,128c0,64-40,96-40,96s-40-32-40-96,40-96,40-96S168,64,168,128Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="12" /> |
| 19 | </svg> |
| 20 | ); |
| 21 | } |
| 22 | |
| 23 | function GlobalMaxWidthButton( { value, onChange } ) { |
| 24 | const valueKey = 'var(--gb-container-width)'; |
| 25 | |
| 26 | return ( |
| 27 | <Tooltip |
| 28 | text={ valueKey === value |
| 29 | ? __( 'Remove global max-width', 'generateblocks' ) |
| 30 | : __( 'Set global max-width', 'generateblocks' ) |
| 31 | } |
| 32 | > |
| 33 | <Button |
| 34 | icon={ <GlobeIcon /> } |
| 35 | variant={ valueKey === value ? 'primary' : '' } |
| 36 | onClick={ () => { |
| 37 | if ( valueKey === value ) { |
| 38 | onChange( '' ); |
| 39 | } else { |
| 40 | onChange( valueKey ); |
| 41 | } |
| 42 | } } |
| 43 | /> |
| 44 | </Tooltip> |
| 45 | ); |
| 46 | } |
| 47 | |
| 48 | function addGlobalMaxWidth( componentProps, data ) { |
| 49 | if ( 'maxWidth' !== data.cssProp ) { |
| 50 | return componentProps; |
| 51 | } |
| 52 | |
| 53 | return { |
| 54 | ...componentProps, |
| 55 | overrideAction: ( onChange ) => ( |
| 56 | <GlobalMaxWidthButton |
| 57 | value={ componentProps.value } |
| 58 | onChange={ onChange } |
| 59 | /> |
| 60 | ), |
| 61 | disabled: 'var(--gb-container-width)' === componentProps.value |
| 62 | ? true |
| 63 | : componentProps.disabled, |
| 64 | }; |
| 65 | } |
| 66 | |
| 67 | addFilter( |
| 68 | 'generateblocks.control.props', |
| 69 | 'generateblocks/add-global-max-width', |
| 70 | addGlobalMaxWidth, |
| 71 | ); |
| 72 |