jetformbuilder
/
modules
/
framework
/
blocks-style-manager
/
assets
/
src
/
hoc-wrappers
/
with-styles-controls.js
jetformbuilder
/
modules
/
framework
/
blocks-style-manager
/
assets
/
src
/
hoc-wrappers
Last commit date
with-block-class.js
3 months ago
with-styles-controls.js
3 months ago
with-styles-controls.js
54 lines
| 1 | import { createHigherOrderComponent } from '@wordpress/compose'; |
| 2 | import { useEffect } from '@wordpress/element'; |
| 3 | import ControlStack from '../components/control-stack'; |
| 4 | import { Generator } from '../css-engine/generator'; |
| 5 | import { isEmpty } from '../helpers/utils'; |
| 6 | import { generateUniqueClassName } from './with-block-class'; |
| 7 | |
| 8 | export const withStylesControls = createHigherOrderComponent( ( BlockEdit ) => { |
| 9 | |
| 10 | return ( props ) => { |
| 11 | |
| 12 | const { attributes, clientId, setAttributes } = props; |
| 13 | const supportName = window.crocoStyleEditorData.support_name; |
| 14 | |
| 15 | // We need to check it by attributes, because 'supports' are not available in the props |
| 16 | if ( ! attributes || ! attributes[ supportName ] ) { |
| 17 | return <BlockEdit { ...props } />; |
| 18 | } |
| 19 | |
| 20 | // Ensure block class is really unique and not inherited from default block definition |
| 21 | useEffect( () => { |
| 22 | if ( ! attributes[ supportName ][ '_uniqueClassName' ] ) { |
| 23 | setAttributes( { |
| 24 | [ supportName ]: { |
| 25 | ...attributes[ supportName ], |
| 26 | _uniqueClassName: generateUniqueClassName(), |
| 27 | }, |
| 28 | } ); |
| 29 | } |
| 30 | }, [ clientId ] ); |
| 31 | |
| 32 | const cssGenerator = new Generator( |
| 33 | props.name, |
| 34 | attributes[ supportName ] |
| 35 | ); |
| 36 | |
| 37 | const { |
| 38 | styles, |
| 39 | variables |
| 40 | } = cssGenerator.getCSS(); |
| 41 | |
| 42 | return ( |
| 43 | <> |
| 44 | { ! isEmpty( styles ) && <style>{ styles }</style> } |
| 45 | { ! isEmpty( variables ) && <div style={ variables } className="wp-block"> |
| 46 | <BlockEdit {...props}/> |
| 47 | </div> } |
| 48 | { isEmpty( variables ) && <BlockEdit { ...props } /> } |
| 49 | <ControlStack {...props} /> |
| 50 | </> |
| 51 | ); |
| 52 | }; |
| 53 | }, 'withStylesControls' ); |
| 54 |