index.js (1916B)
1 /** 2 * WordPress dependencies. 3 */ 4 const { assign } = lodash; 5 6 const { __ } = wp.i18n; 7 8 const { hasBlockSupport } = wp.blocks; 9 10 const { PanelBody } = wp.components; 11 12 const { createHigherOrderComponent } = wp.compose; 13 14 const { InspectorControls } = wp.blockEditor || wp.editor; 15 16 const { Fragment } = wp.element; 17 18 const { addFilter, removeFilter } = wp.hooks; 19 20 /** 21 * Internal dependencies. 22 */ 23 import './style.scss'; 24 25 import CSSEditor from './editor.js'; 26 27 import './inject-css.js'; 28 29 const addAttribute = ( settings ) => { 30 if ( hasBlockSupport( settings, 'customClassName', true ) ) { 31 settings.attributes = assign( settings.attributes, { 32 hasCustomCSS: { 33 type: 'boolean', 34 default: false 35 }, 36 customCSS: { 37 type: 'string', 38 default: null 39 } 40 }); 41 } 42 43 return settings; 44 }; 45 46 const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => { 47 return ( props ) => { 48 const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true ); 49 if ( hasCustomClassName && props.isSelected ) { 50 return ( 51 <Fragment> 52 <BlockEdit { ...props } /> 53 <InspectorControls> 54 <PanelBody 55 title={ __( 'Custom CSS' ) } 56 icon={<i className={'fa fa'}></i>} 57 initialOpen={ false } 58 > 59 <CSSEditor 60 clientId={ props.clientId } 61 setAttributes={ props.setAttributes } 62 attributes={ props.attributes } 63 /> 64 </PanelBody> 65 </InspectorControls> 66 </Fragment> 67 ); 68 } 69 70 return <BlockEdit { ...props } />; 71 }; 72 }, 'withInspectorControl' ); 73 74 // Remove block-css fields. 75 removeFilter( 'blocks.registerBlockType', 'themeisle-custom-css/attribute' ); 76 removeFilter( 'editor.BlockEdit', 'themeisle-custom-css/with-inspector-controls' ); 77 78 addFilter( 'blocks.registerBlockType', 'redux-custom-css/attribute', addAttribute ); 79 addFilter( 'editor.BlockEdit', 'redux-custom-css/with-inspector-controls', withInspectorControls ); 80