BlockAppender.js
3 years ago
BlockControls.js
2 years ago
ComponentCSS.js
1 year ago
ContainerContentRenderer.js
2 years ago
GridItem.js
4 years ago
InspectorAdvancedControls.js
2 years ago
LegacyLayoutControls.js
3 years ago
ShapeDividers.js
4 years ago
TagName.js
3 years ago
ComponentCSS.js
65 lines
| 1 | import { memo } from '@wordpress/element'; |
| 2 | import { useSelect } from '@wordpress/data'; |
| 3 | import DesktopCSS from '../css/desktop'; |
| 4 | import TabletCSS from '../css/tablet'; |
| 5 | import TabletOnlyCSS from '../css/tablet-only'; |
| 6 | import MobileCSS from '../css/mobile'; |
| 7 | import MainCSS from '../css/main'; |
| 8 | import shouldRebuildCSS from '../../../utils/should-rebuild-css'; |
| 9 | |
| 10 | function ComponentCSS( props ) { |
| 11 | const deviceType = useSelect( ( select ) => { |
| 12 | const { getDeviceType } = select( 'core/editor' ) || {}; |
| 13 | |
| 14 | if ( 'function' === typeof getDeviceType ) { |
| 15 | return getDeviceType(); |
| 16 | } |
| 17 | |
| 18 | const { |
| 19 | __experimentalGetPreviewDeviceType: experimentalGetPreviewDeviceType, |
| 20 | } = select( 'core/edit-post' ); |
| 21 | |
| 22 | if ( 'function' === typeof experimentalGetPreviewDeviceType ) { |
| 23 | return experimentalGetPreviewDeviceType(); |
| 24 | } |
| 25 | |
| 26 | return ''; |
| 27 | }, [] ); |
| 28 | |
| 29 | const { |
| 30 | isBlockPreview = false, |
| 31 | } = props?.attributes; |
| 32 | |
| 33 | if ( isBlockPreview ) { |
| 34 | return null; |
| 35 | } |
| 36 | |
| 37 | return ( |
| 38 | <> |
| 39 | <MainCSS device={ deviceType } { ...props } /> |
| 40 | |
| 41 | { deviceType && |
| 42 | <> |
| 43 | { 'Desktop' === deviceType && |
| 44 | <DesktopCSS { ...props } /> |
| 45 | } |
| 46 | |
| 47 | { ( 'Tablet' === deviceType || 'Mobile' === deviceType ) && |
| 48 | <TabletCSS { ...props } /> |
| 49 | } |
| 50 | |
| 51 | { 'Tablet' === deviceType && |
| 52 | <TabletOnlyCSS { ...props } /> |
| 53 | } |
| 54 | |
| 55 | { 'Mobile' === deviceType && |
| 56 | <MobileCSS { ...props } /> |
| 57 | } |
| 58 | </> |
| 59 | } |
| 60 | </> |
| 61 | ); |
| 62 | } |
| 63 | |
| 64 | export default memo( ComponentCSS, shouldRebuildCSS ); |
| 65 |