BlockControls.js
4 years ago
ComponentCSS.js
4 years ago
HeadlineContentRenderer.js
4 years ago
InspectorControls.js
4 years ago
ToolbarGroup.js
4 years ago
BlockControls.js
74 lines
| 1 | import ToolbarGroup from './ToolbarGroup'; |
| 2 | import { memo } from '@wordpress/element'; |
| 3 | import { AlignmentToolbar, BlockControls } from '@wordpress/block-editor'; |
| 4 | |
| 5 | function HeadlineBlockControls( props ) { |
| 6 | const { |
| 7 | attributes, |
| 8 | setAttributes, |
| 9 | deviceType, |
| 10 | } = props; |
| 11 | |
| 12 | const { |
| 13 | element, |
| 14 | alignment, |
| 15 | alignmentTablet, |
| 16 | alignmentMobile, |
| 17 | inlineWidth, |
| 18 | inlineWidthTablet, |
| 19 | inlineWidthMobile, |
| 20 | isCaption, |
| 21 | } = attributes; |
| 22 | |
| 23 | return ( |
| 24 | <BlockControls> |
| 25 | <ToolbarGroup |
| 26 | setAttributes={ setAttributes } |
| 27 | element={ element } |
| 28 | isCaption={ isCaption } |
| 29 | /> |
| 30 | |
| 31 | { 'Desktop' === deviceType && ! inlineWidth && |
| 32 | <AlignmentToolbar |
| 33 | value={ alignment } |
| 34 | onChange={ ( value ) => { |
| 35 | setAttributes( { alignment: value } ); |
| 36 | } } |
| 37 | /> |
| 38 | } |
| 39 | |
| 40 | { 'Tablet' === deviceType && ! inlineWidthTablet && |
| 41 | <AlignmentToolbar |
| 42 | value={ alignmentTablet } |
| 43 | onChange={ ( value ) => { |
| 44 | setAttributes( { alignmentTablet: value } ); |
| 45 | } } |
| 46 | /> |
| 47 | } |
| 48 | |
| 49 | { 'Mobile' === deviceType && ! inlineWidthMobile && |
| 50 | <AlignmentToolbar |
| 51 | value={ alignmentMobile } |
| 52 | onChange={ ( value ) => { |
| 53 | setAttributes( { alignmentMobile: value } ); |
| 54 | } } |
| 55 | /> |
| 56 | } |
| 57 | </BlockControls> |
| 58 | ); |
| 59 | } |
| 60 | |
| 61 | export default memo( HeadlineBlockControls, ( prevProps, nextProps ) => { |
| 62 | return [ |
| 63 | 'element', |
| 64 | 'alignment', |
| 65 | 'alignmentTablet', |
| 66 | 'alignmentMobile', |
| 67 | 'inlineWidth', |
| 68 | 'inlineWidthTablet', |
| 69 | 'inlineWidthMobile', |
| 70 | ].every( ( key ) => { |
| 71 | return prevProps.attributes[ key ] === nextProps.attributes[ key ]; |
| 72 | } ) && prevProps.deviceType === nextProps.deviceType; |
| 73 | } ); |
| 74 |