components
1 year ago
utils
1 year ago
block.json
1 year ago
edit.js
1 year ago
editor.scss
1 year ago
index.js
1 year ago
save.js
1 year ago
index.js
99 lines
| 1 | import { registerBlockType, registerBlockVariation } from '@wordpress/blocks'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | |
| 4 | import { getAtRuleValue } from '@edge22/styles-builder'; |
| 5 | |
| 6 | import { Edit } from './edit'; |
| 7 | import metadata from './block.json'; |
| 8 | import { Save } from './save'; |
| 9 | import { getElementType } from './utils/getElementType'; |
| 10 | import { getIcon } from '@utils'; |
| 11 | |
| 12 | import './editor.scss'; |
| 13 | |
| 14 | const mobileAtRule = getAtRuleValue( 'smallWidth' ); |
| 15 | |
| 16 | registerBlockType( metadata, { |
| 17 | edit: Edit, |
| 18 | save: Save, |
| 19 | icon: getIcon( 'container' ), |
| 20 | __experimentalLabel: ( attrs, { context } ) => { |
| 21 | if ( 'list-view' === context ) { |
| 22 | if ( attrs?.metadata?.name ) { |
| 23 | return attrs.metadata.name; |
| 24 | } |
| 25 | |
| 26 | if ( attrs.tagName ) { |
| 27 | if ( 'figure' === attrs.tagName ) { |
| 28 | return __( 'Figure', 'generateblocks' ); |
| 29 | } |
| 30 | |
| 31 | if ( 'li' === attrs.tagName ) { |
| 32 | return __( 'List Item', 'generateblocks' ); |
| 33 | } |
| 34 | |
| 35 | if ( 'ol' === attrs.tagName || 'ul' === attrs.tagName ) { |
| 36 | return __( 'List', 'generateblocks' ); |
| 37 | } |
| 38 | } |
| 39 | } |
| 40 | }, |
| 41 | } ); |
| 42 | |
| 43 | registerBlockVariation( |
| 44 | 'generateblocks/element', |
| 45 | { |
| 46 | name: 'generateblocks/container', |
| 47 | description: __( 'A container to add your blocks to.', 'generateblocks' ), |
| 48 | title: 'Container', |
| 49 | attributes: { |
| 50 | tagName: 'div', |
| 51 | }, |
| 52 | isActive: ( blockAttributes ) => { |
| 53 | if ( 'grid' === blockAttributes?.styles?.display ) { |
| 54 | return false; |
| 55 | } |
| 56 | |
| 57 | return 'container' === getElementType( blockAttributes.tagName ); |
| 58 | }, |
| 59 | isDefault: true, |
| 60 | }, |
| 61 | ); |
| 62 | |
| 63 | registerBlockVariation( |
| 64 | 'generateblocks/element', |
| 65 | { |
| 66 | name: 'generateblocks/grid', |
| 67 | description: __( 'Organize your content into sections and rows.', 'generateblocks' ), |
| 68 | icon: getIcon( 'grid' ), |
| 69 | title: 'Grid', |
| 70 | attributes: { |
| 71 | tagName: 'div', |
| 72 | styles: { |
| 73 | display: 'grid', |
| 74 | gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', |
| 75 | columnGap: '1em', |
| 76 | rowGap: '1em', |
| 77 | [ mobileAtRule ]: { |
| 78 | gridTemplateColumns: '1fr', |
| 79 | }, |
| 80 | }, |
| 81 | }, |
| 82 | innerBlocks: [ |
| 83 | [ |
| 84 | 'generateblocks/element', |
| 85 | { |
| 86 | tagName: 'div', |
| 87 | }, |
| 88 | ], |
| 89 | [ |
| 90 | 'generateblocks/element', |
| 91 | { |
| 92 | tagName: 'div', |
| 93 | }, |
| 94 | ], |
| 95 | ], |
| 96 | isActive: ( blockAttributes ) => 'grid' === blockAttributes?.styles?.display, |
| 97 | }, |
| 98 | ); |
| 99 |