edit.js
44 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; |
| 3 | import { PanelBody } from '@wordpress/components'; |
| 4 | import Styler from '../../styler'; |
| 5 | import Wrapper from '../../wrapper'; |
| 6 | |
| 7 | const Inspector = ( { attributes, setAttributes, clientId } ) => { |
| 8 | return ( |
| 9 | <InspectorControls> |
| 10 | <PanelBody title={ __( 'Styles', 'shop-press' ) }> |
| 11 | <Styler |
| 12 | clientId={ clientId } |
| 13 | label={ __( 'SKU', 'shop-press' ) } |
| 14 | selector=".sp-loop-product-sku" |
| 15 | wrapper={ `.${ attributes[ 'wrapperID' ] }` } |
| 16 | attributes={ attributes } |
| 17 | setAttributes={ setAttributes } |
| 18 | /> |
| 19 | </PanelBody> |
| 20 | </InspectorControls> |
| 21 | ); |
| 22 | }; |
| 23 | |
| 24 | const Edit = ( props ) => { |
| 25 | const { attributes, setAttributes, clientId } = props; |
| 26 | const blockProps = useBlockProps(); |
| 27 | |
| 28 | return ( |
| 29 | <div { ...blockProps }> |
| 30 | <Inspector |
| 31 | attributes={ attributes } |
| 32 | setAttributes={ setAttributes } |
| 33 | clientId={ clientId } |
| 34 | /> |
| 35 | |
| 36 | <Wrapper { ...props }> |
| 37 | <div className="sp-loop-product-sku">tshirt-logo</div> |
| 38 | </Wrapper> |
| 39 | </div> |
| 40 | ); |
| 41 | }; |
| 42 | |
| 43 | export default Edit; |
| 44 |