BlockControls.js
4 years ago
ComponentCSS.js
4 years ago
InspectorAdvancedControls.js
4 years ago
InspectorControls.js
4 years ago
LayoutSelector.js
4 years ago
LayoutSelector.js
87 lines
| 1 | import { Placeholder } from '@wordpress/components'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import classnames from 'classnames'; |
| 4 | |
| 5 | /** |
| 6 | * Get columns sizes array from layout string |
| 7 | * |
| 8 | * @param {string} layout The layout string. Example: `3-6-3` |
| 9 | * @param {string} uniqueId The grid block uniqueId attribute |
| 10 | * @return {Array} The columns attributes |
| 11 | */ |
| 12 | export const getColumnsFromLayout = ( layout, uniqueId ) => { |
| 13 | const { |
| 14 | gridItemPaddingTop, |
| 15 | gridItemPaddingRight, |
| 16 | gridItemPaddingBottom, |
| 17 | gridItemPaddingLeft, |
| 18 | } = generateBlocksStyling.container; |
| 19 | |
| 20 | const columnsData = layout.split( '-' ) || []; |
| 21 | |
| 22 | return columnsData.map( ( col ) => ( { |
| 23 | isGrid: true, |
| 24 | gridId: uniqueId, |
| 25 | paddingTop: gridItemPaddingTop || '', |
| 26 | paddingRight: gridItemPaddingRight || '', |
| 27 | paddingBottom: gridItemPaddingBottom || '', |
| 28 | paddingLeft: gridItemPaddingLeft || '', |
| 29 | widthMobile: 100, |
| 30 | width: Number( col ), |
| 31 | } ) ); |
| 32 | }; |
| 33 | |
| 34 | export default ( { uniqueId, onClick, isDisabled = false } ) => { |
| 35 | if ( isDisabled ) { |
| 36 | return false; |
| 37 | } |
| 38 | |
| 39 | const layouts = [ |
| 40 | '100', |
| 41 | '50-50', |
| 42 | '33.33-33.33-33.33', |
| 43 | '25-25-25-25', |
| 44 | |
| 45 | '25-75', |
| 46 | '75-25', |
| 47 | '25-25-50', |
| 48 | '25-50-25', |
| 49 | |
| 50 | '50-25-25', |
| 51 | '20-60-20', |
| 52 | '20-20-20-20-20', |
| 53 | '16-16-16-16-16-16', |
| 54 | ]; |
| 55 | |
| 56 | return ( |
| 57 | <Placeholder |
| 58 | label={ __( 'Grid', 'generateblocks' ) } |
| 59 | instructions={ __( 'Choose how many Containers to start with.', 'generateblocks' ) } |
| 60 | className="gb-select-layout" |
| 61 | > |
| 62 | <div className="gb-grid-wrapper-layout-preview"> |
| 63 | { layouts.map( ( layout ) => { |
| 64 | const columnsData = getColumnsFromLayout( layout, uniqueId ); |
| 65 | |
| 66 | return ( |
| 67 | <button |
| 68 | key={ `layout-${ layout }` } |
| 69 | className="gb-grid-wrapper-layout-preview-btn" |
| 70 | onClick={ () => onClick( layout ) } |
| 71 | > |
| 72 | { columnsData.map( ( colAttrs, idx ) => { |
| 73 | return ( |
| 74 | <div |
| 75 | key={ `layout-${ layout }-col-${ idx }` } |
| 76 | className={ classnames( 'gb-col', `gb-col-${ colAttrs.width.toString().replace( '.', '-' ) }` ) } |
| 77 | /> |
| 78 | ); |
| 79 | } ) } |
| 80 | </button> |
| 81 | ); |
| 82 | } ) } |
| 83 | </div> |
| 84 | </Placeholder> |
| 85 | ); |
| 86 | }; |
| 87 |