From 91560929f0fd3d2abc5796c20deafd9a22593f6e Mon Sep 17 00:00:00 2001 From: Hardeep Asrani Date: Thu, 22 Dec 2022 10:24:00 +0530 Subject: [PATCH 1/7] [WiP] --- src/animation/count/editor.scss | 0 src/animation/count/index.js | 32 ++- src/animation/count/inline-controls.js | 117 ++++++++ src/animation/editor.js | 254 +++++++----------- src/animation/editor.scss | 13 + src/animation/index.js | 38 +-- src/animation/typing/index.js | 26 +- src/animation/typing/inline-controls.js | 117 ++++++++ src/blocks/components/index.js | 3 + .../otter-tools-inspector/editor.scss | 8 + .../otter-tools-inspector/index.tsx | 79 ++++++ src/blocks/components/otter-tools/index.tsx | 3 - src/blocks/plugins/conditions/edit.js | 21 +- src/blocks/plugins/conditions/index.js | 2 +- .../components/inline-controls.js | 4 +- src/css/index.js | 13 +- 16 files changed, 508 insertions(+), 222 deletions(-) delete mode 100644 src/animation/count/editor.scss create mode 100644 src/animation/count/inline-controls.js create mode 100644 src/animation/typing/inline-controls.js create mode 100644 src/blocks/components/otter-tools-inspector/editor.scss create mode 100644 src/blocks/components/otter-tools-inspector/index.tsx diff --git a/src/animation/count/editor.scss b/src/animation/count/editor.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/animation/count/index.js b/src/animation/count/index.js index 6804c3d56..73861a7d9 100644 --- a/src/animation/count/index.js +++ b/src/animation/count/index.js @@ -8,31 +8,34 @@ import { brush } from '@wordpress/icons'; */ import { __ } from '@wordpress/i18n'; +import { RichTextToolbarButton } from '@wordpress/block-editor'; + +import { Fragment } from '@wordpress/element'; + import { registerFormatType, toggleFormat } from '@wordpress/rich-text'; -import { - RichTextToolbarButton -} from '@wordpress/block-editor'; - -import { Fragment } from '@wordpress/element'; - /** * Internal dependencies. */ -import './editor.scss'; +import InlineControls from './inline-controls.js'; const name = 'themeisle-blocks/count-animation'; -registerFormatType( name, { +export const format = { name, title: __( 'Count Animation', 'otter-blocks' ), tagName: 'o-anim-count', className: null, - edit: ({ isActive, value, onChange }) => { + edit: ({ + isActive, + value, + onChange, + contentRef + }) => { const regex = /^\$?[\d,]+(\.\d*)?$/; const onToggle = () => { @@ -50,7 +53,16 @@ registerFormatType( name, { onClick={ onToggle } isActive={ isActive } /> + + { isActive && ( + + ) } ); } -}); +}; + +registerFormatType( name, format ); diff --git a/src/animation/count/inline-controls.js b/src/animation/count/inline-controls.js new file mode 100644 index 000000000..c7e1e8c4a --- /dev/null +++ b/src/animation/count/inline-controls.js @@ -0,0 +1,117 @@ +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; + +import { + __experimentalHeading as Heading, + Popover, + SelectControl +} from '@wordpress/components'; + +import { + useDispatch, + useSelect +} from '@wordpress/data'; + +import { + useEffect, + useState +} from '@wordpress/element'; + +import { applyFilters } from '@wordpress/hooks'; + +import { useAnchorRef } from '@wordpress/rich-text'; + +/** + * Internal dependencies. + */ +import { + delayList, + speedList +} from '../data.js'; + +import { format as settings } from './index.js'; + +import { updateAnimConfig } from '../editor.js'; + +const InlineControls = ({ + value, + contentRef +}) => { + useEffect( () => { + let classes; + + if ( attributes.className ) { + classes = attributes.className; + classes = classes.split( ' ' ); + + const countDelayClass = Array.from( delayList ).find( ( i ) => { + return classes.find( ( o ) => o === `o-count-${ i.value }` ); + }); + + const countSpeedClass = Array.from( speedList ).find( ( i ) => { + return classes.find( ( o ) => o === `o-count-${ i.value }` ); + }); + + setCountDelay( countDelayClass ? countDelayClass.value : 'none' ); + setCountSpeed( countSpeedClass ? countSpeedClass.value : 'none' ); + } + + }, []); + + const { + clientId, + attributes + } = useSelect( select => { + const { getSelectedBlock } = select( 'core/block-editor' ); + + const currentBlock = getSelectedBlock(); + + return { + clientId: currentBlock?.clientId, + attributes: currentBlock?.attributes + }; + }, []); + + const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); + + const setAttributes = attributes => updateBlockAttributes( clientId, attributes ); + + const [ countDelay, setCountDelay ] = useState( 'none' ); + const [ countSpeed, setCountSpeed ] = useState( 'none' ); + + const anchorRef = useAnchorRef({ ref: contentRef, value, settings }); + + return ( + + { __( 'Count Animation', 'otter-blocks' ) } + + updateAnimConfig( 'count', countDelay, value, () => setCountDelay( value ) ), attributes, setAttributes } + /> + + updateAnimConfig( 'count', countSpeed, value, () => setTypingSpeed( value ) ), attributes, setAttributes } + /> + + { applyFilters( 'otter.poweredBy', '' ) } + + ); +}; + +export default InlineControls; diff --git a/src/animation/editor.js b/src/animation/editor.js index 2be69906d..c383bd353 100644 --- a/src/animation/editor.js +++ b/src/animation/editor.js @@ -3,22 +3,21 @@ */ import { __ } from '@wordpress/i18n'; -import { serialize } from '@wordpress/blocks'; +import { InspectorControls } from '@wordpress/block-editor'; import { Button, + PanelBody, SelectControl } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; - import { Fragment, useState, useEffect } from '@wordpress/element'; -import { create } from '@wordpress/rich-text'; +import { applyFilters } from '@wordpress/hooks'; /** * Internal dependencies. @@ -46,6 +45,51 @@ const AnimationType = { import { memo } from '@wordpress/element'; +let Inspector = InspectorControls; + +export const updateAnimConfig = ( type, oldValue, newValue, callback, attributes, setAttributes ) => { + let template; + switch ( type ) { + case AnimationType.count: + template = 'o-count-'; + break; + case AnimationType.typing: + template = 'o-typing-'; + break; + case AnimationType.default: + template = ''; + break; + } + + const oldClassName = template + oldValue; + const newClassName = 'none' !== newValue ? template + newValue : ''; + let classes; + + if ( attributes.className ) { + classes = attributes.className; + classes = classes.split( ' ' ); + const exists = classes.find( ( i ) => i === oldClassName ); + + if ( exists ) { + classes = classes.join( ' ' ).replace( oldClassName, newClassName ); + } else { + classes.push( newClassName ); + classes = classes.join( ' ' ).trim(); + } + } else { + classes = newClassName; + } + + classes = classes.replace( /\s+/g, ' ' ); + + if ( '' === classes ) { + classes = undefined; + } + + setAttributes({ className: classes }); + callback?.(); +}; + function AnimationControls({ clientId, attributes, @@ -70,51 +114,14 @@ function AnimationControls({ return classes.find( ( o ) => o === i.value ); }); - const countDelayClass = Array.from( delayList ).find( ( i ) => { - return classes.find( ( o ) => o === `o-count-${ i.value }` ); - }); - - const countSpeedClass = Array.from( speedList ).find( ( i ) => { - return classes.find( ( o ) => o === `o-count-${ i.value }` ); - }); - - const typingDelayClass = Array.from( delayList ).find( ( i ) => { - return classes.find( ( o ) => o === `o-typing-${ i.value }` ); - }); - - const typingSpeedClass = Array.from( speedList ).find( ( i ) => { - return classes.find( ( o ) => o === `o-typing-${ i.value }` ); - }); - setAnimation( animationClass ? animationClass.value : 'none' ); setDelay( delayClass ? delayClass.value : 'none' ); setSpeed( speedClass ? speedClass.value : 'none' ); setCurrentAnimationLabel( animationClass ? animationClass.label : 'none' ); - - setCountDelay( countDelayClass ? countDelayClass.value : 'none' ); - setCountSpeed( countSpeedClass ? countSpeedClass.value : 'none' ); - - setTypingDelay( typingDelayClass ? typingDelayClass.value : 'none' ); - setTypingSpeed( typingSpeedClass ? typingSpeedClass.value : 'none' ); - } - - }, []); - - const { hasCountFormat, hasTypingFormat } = useSelect( select => { - const { getBlock } = select( 'core/block-editor' ); - const html = serialize( getBlock( clientId ) ); - const block = create({ html }); - let hasCountFormat = false; - let hasTypingFormat = false; - - if ( block.formats ) { - hasCountFormat = block.formats.some( format => true === format.some( format => 'themeisle-blocks/count-animation' === format.type ) ); - hasTypingFormat = block.formats.some( format => true === format.some( format => 'themeisle-blocks/typing-animation' === format.type ) ); } - return { hasCountFormat, hasTypingFormat }; }, []); const [ animation, setAnimation ] = useState( 'none' ); @@ -122,12 +129,6 @@ function AnimationControls({ const [ speed, setSpeed ] = useState( 'none' ); const [ currentAnimationLabel, setCurrentAnimationLabel ] = useState( __( 'None', 'otter-blocks' ) ); - const [ countDelay, setCountDelay ] = useState( 'none' ); - const [ countSpeed, setCountSpeed ] = useState( 'none' ); - - const [ typingDelay, setTypingDelay ] = useState( 'none' ); - const [ typingSpeed, setTypingSpeed ] = useState( 'none' ); - const updateAnimation = ( e ) => { let classes; let animationValue = 'none' !== e ? e : ''; @@ -192,48 +193,15 @@ function AnimationControls({ } }; - const updateAnimConfig = ( type, oldValue, newValue, callback ) => { - let template; - switch ( type ) { - case AnimationType.count: - template = 'o-count-'; - break; - case AnimationType.typing: - template = 'o-typing-'; - break; - case AnimationType.default: - template = ''; - break; - } - - const oldClassName = template + oldValue; - const newClassName = 'none' !== newValue ? template + newValue : ''; - let classes; - - if ( attributes.className ) { - classes = attributes.className; - classes = classes.split( ' ' ); - const exists = classes.find( ( i ) => i === oldClassName ); - - if ( exists ) { - classes = classes.join( ' ' ).replace( oldClassName, newClassName ); - } else { - classes.push( newClassName ); - classes = classes.join( ' ' ).trim(); - } - } else { - classes = newClassName; - } - - classes = classes.replace( /\s+/g, ' ' ); - - if ( '' === classes ) { - classes = undefined; + useEffect( () => { + if ( window?.otterComponents?.useOtterTools ) { + Inspector = window.otterComponents.useOtterTools({ + hasValue: () => Boolean( 'none' !== animation ), + label: __( 'Animations', 'otter-blocks' ), + onDeselect: () => updateAnimation( 'none' ) + }); } - - setAttributes({ className: classes }); - callback?.(); - }; + }, []); const replayAnimation = () => { let classes = attributes.className; @@ -245,9 +213,10 @@ function AnimationControls({ }; return ( - - +
updateAnimConfig( AnimationType.default, delay, value, () => setDelay( value ) ) } + onChange={ value => updateAnimConfig( AnimationType.default, delay, value, () => setDelay( value ), attributes, setAttributes ) } /> updateAnimConfig( AnimationType.default, speed, value, () => setSpeed( value ) ) } + onChange={ value => updateAnimConfig( AnimationType.default, speed, value, () => setSpeed( value ), attributes, setAttributes ) } />
- - - { hasCountFormat ? ( - - updateAnimConfig( AnimationType.count, countDelay, value, () => setCountDelay( value ) ) } - /> - - updateAnimConfig( AnimationType.count, countSpeed, value, () => setTypingSpeed( value ) ) } - /> - - ) : ( - - { - -

{ __( 'You can add counting animation from the format toolbar of this block. Once you have added them, you will see customization settings here.', 'otter-blocks' ) }

-

{ __( 'Note: This feature is not available in all the blocks.', 'otter-blocks' ) }

- - ) } - - - - { hasTypingFormat ? ( - - updateAnimConfig( AnimationType.typing, typingDelay, value, () => setTypingDelay( value ) ) } - /> - - updateAnimConfig( AnimationType.typing, typingSpeed, value, () => setTypingSpeed( value ) ) } - /> - - ) : ( - - { - -

{ __( 'You can add typing animation from the format toolbar of this block. Once you have added them, you will see customization settings here.', 'otter-blocks' ) }

-

{ __( 'Note: This feature is not available in all the blocks.', 'otter-blocks' ) }

- - ) } - - + + { + +

{ __( 'You can add counting animation from the format toolbar of this block.', 'otter-blocks' ) }

+

{ __( 'Note: This feature is not available in all the blocks.', 'otter-blocks' ) }

+ + + + { + +

{ __( 'You can add typing animation from the format toolbar of this block.', 'otter-blocks' ) }

+

{ __( 'Note: This feature is not available in all the blocks.', 'otter-blocks' ) }

+ + +
+ { applyFilters( 'otter.feedback', '', 'animations' ) } + { applyFilters( 'otter.poweredBy', '' ) } +
+ + ); } diff --git a/src/animation/editor.scss b/src/animation/editor.scss index 8c1703714..dfbc35273 100644 --- a/src/animation/editor.scss +++ b/src/animation/editor.scss @@ -53,6 +53,10 @@ display: flex; } + .components-button.is-secondary { + margin-top: 24px; + } + .o-animations-control__button { background: transparent; position: relative; @@ -103,6 +107,15 @@ width: 100%; } +.o-animation-popover .components-popover__content { + min-width: 240px; + padding: 20px; + + .components-heading { + margin-bottom: 12px; + } +} + @media screen { .hidden-animated { visibility: hidden; diff --git a/src/animation/index.js b/src/animation/index.js index 9a179b4c1..572f22a03 100644 --- a/src/animation/index.js +++ b/src/animation/index.js @@ -5,18 +5,11 @@ import { __ } from '@wordpress/i18n'; import { hasBlockSupport } from '@wordpress/blocks'; -import { PanelBody } from '@wordpress/components'; - import { createHigherOrderComponent } from '@wordpress/compose'; -import { InspectorControls } from '@wordpress/block-editor'; - import { Fragment } from '@wordpress/element'; -import { - addFilter, - applyFilters -} from '@wordpress/hooks'; +import { addFilter } from '@wordpress/hooks'; /** * Internal dependencies. @@ -38,33 +31,14 @@ const withInspectorControls = createHigherOrderComponent( BlockEdit => { ); if ( hasCustomClassName && props.isSelected && ! excludedBlocks.includes( props.name ) ) { - let Inspector = InspectorControls; - - if ( window?.otterComponents?.useInspectorSlot ) { - Inspector = window.otterComponents.useInspectorSlot( props.name ); - } - return ( - - - - -
- { applyFilters( 'otter.feedback', '', 'animations' ) } - { applyFilters( 'otter.poweredBy', '' ) } -
- - + ); } diff --git a/src/animation/typing/index.js b/src/animation/typing/index.js index 92270eba0..a92126e3d 100644 --- a/src/animation/typing/index.js +++ b/src/animation/typing/index.js @@ -8,9 +8,7 @@ import { brush } from '@wordpress/icons'; */ import { __ } from '@wordpress/i18n'; -import { - RichTextToolbarButton -} from '@wordpress/block-editor'; +import { RichTextToolbarButton } from '@wordpress/block-editor'; import { Fragment } from '@wordpress/element'; @@ -22,17 +20,22 @@ import { /** * Internal dependencies. */ +import InlineControls from './inline-controls.js'; const name = 'themeisle-blocks/typing-animation'; -registerFormatType( name, { +export const format = { name, title: __( 'Typing Animation', 'otter-blocks' ), tagName: 'o-anim-typing', className: null, - edit: ({ isActive, value, onChange }) => { - + edit: ({ + isActive, + value, + onChange, + contentRef + }) => { const onToggle = () => { onChange( toggleFormat( value, { type: name }) ); }; @@ -45,7 +48,16 @@ registerFormatType( name, { onClick={ onToggle } isActive={ isActive } /> + + { isActive && ( + + ) } ); } -}); +}; + +registerFormatType( name, format ); diff --git a/src/animation/typing/inline-controls.js b/src/animation/typing/inline-controls.js new file mode 100644 index 000000000..0714a872d --- /dev/null +++ b/src/animation/typing/inline-controls.js @@ -0,0 +1,117 @@ +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; + +import { + __experimentalHeading as Heading, + Popover, + SelectControl +} from '@wordpress/components'; + +import { + useDispatch, + useSelect +} from '@wordpress/data'; + +import { + useEffect, + useState +} from '@wordpress/element'; + +import { applyFilters } from '@wordpress/hooks'; + +import { useAnchorRef } from '@wordpress/rich-text'; + +/** + * Internal dependencies. + */ +import { + delayList, + speedList +} from '../data.js'; + +import { format as settings } from './index.js'; + +import { updateAnimConfig } from '../editor.js'; + +const InlineControls = ({ + value, + contentRef +}) => { + useEffect( () => { + let classes; + + if ( attributes.className ) { + classes = attributes.className; + classes = classes.split( ' ' ); + + const typingDelayClass = Array.from( delayList ).find( ( i ) => { + return classes.find( ( o ) => o === `o-typing-${ i.value }` ); + }); + + const typingSpeedClass = Array.from( speedList ).find( ( i ) => { + return classes.find( ( o ) => o === `o-typing-${ i.value }` ); + }); + + setTypingDelay( typingDelayClass ? typingDelayClass.value : 'none' ); + setTypingSpeed( typingSpeedClass ? typingSpeedClass.value : 'none' ); + } + + }, []); + + const { + clientId, + attributes + } = useSelect( select => { + const { getSelectedBlock } = select( 'core/block-editor' ); + + const currentBlock = getSelectedBlock(); + + return { + clientId: currentBlock?.clientId, + attributes: currentBlock?.attributes + }; + }, []); + + const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); + + const setAttributes = attributes => updateBlockAttributes( clientId, attributes ); + + const [ typingDelay, setTypingDelay ] = useState( 'none' ); + const [ typingSpeed, setTypingSpeed ] = useState( 'none' ); + + const anchorRef = useAnchorRef({ ref: contentRef, value, settings }); + + return ( + + { __( 'Typing Animation', 'otter-blocks' ) } + + updateAnimConfig( 'typing', typingDelay, value, () => setTypingDelay( value ), attributes, setAttributes ) } + /> + + updateAnimConfig( 'typing', typingSpeed, value, () => setTypingSpeed( value ), attributes, setAttributes ) } + /> + + { applyFilters( 'otter.poweredBy', '' ) } + + ); +}; + +export default InlineControls; diff --git a/src/blocks/components/index.js b/src/blocks/components/index.js index 1053173b0..609d574fa 100644 --- a/src/blocks/components/index.js +++ b/src/blocks/components/index.js @@ -4,6 +4,7 @@ import { useInspectorSlot } from './inspector-slot-fill/index.js'; import Notice from './notice/index.js'; import { OtterControlTools } from './otter-tools/index'; +import useOtterTools from './otter-tools-inspector/index'; import SelectProducts from './select-products-control/index.js'; window.otterComponents = {}; @@ -12,6 +13,7 @@ window.otterComponents.SelectProducts = SelectProducts; window.otterComponents.Notice = Notice; window.otterComponents.OtterControlTools = OtterControlTools; window.otterComponents.useInspectorSlot = useInspectorSlot; +window.otterComponents.useOtterTools = useOtterTools; export { default as BackgroundOverlayControl } from './background-overlay-control/index.js'; export { default as BackgroundSelectorControl } from './background-selector-control/index.js'; @@ -32,6 +34,7 @@ export { } from './inspector-slot-fill/index.js'; export { default as LinkControlToolbar } from './link-control/index.js'; export { default as Notice } from './notice/index.js'; +export { default as useOtterTools } from './otter-tools-inspector/index'; export { default as PanelTab } from './panel-tab/index.js'; export { default as ResponsiveControl } from './responsive-control/index.js'; export { default as SelectProducts } from './select-products-control/index.js'; diff --git a/src/blocks/components/otter-tools-inspector/editor.scss b/src/blocks/components/otter-tools-inspector/editor.scss new file mode 100644 index 000000000..90d599073 --- /dev/null +++ b/src/blocks/components/otter-tools-inspector/editor.scss @@ -0,0 +1,8 @@ +.o-block-tools.components-tools-panel { + padding: 0px; + display: block; + + .components-tools-panel-header { + padding: calc( 16px ); + } +} \ No newline at end of file diff --git a/src/blocks/components/otter-tools-inspector/index.tsx b/src/blocks/components/otter-tools-inspector/index.tsx new file mode 100644 index 000000000..df9536fb7 --- /dev/null +++ b/src/blocks/components/otter-tools-inspector/index.tsx @@ -0,0 +1,79 @@ +// @ts-nocheck + +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; + +import { + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, + createSlotFill +} from '@wordpress/components'; + +import { createHigherOrderComponent } from '@wordpress/compose'; + +import { addFilter } from '@wordpress/hooks'; + +/** + * Internal dependencies. + */ +import './editor.scss'; +import { useInspectorSlot } from '../inspector-slot-fill/index.js'; + +const { Fill, Slot } = createSlotFill( 'OtterInspectorTools' ); + +const withConditions = createHigherOrderComponent( BlockEdit => { + return props => { + const Inspector = useInspectorSlot( props.name ); + + return ( +
+ + + { props.isSelected && ( + + + + { fills => { + if ( ! fills.length ) { + return null; + } + + return fills; + } } + + + + ) } +
+ ); + }; +}, 'withConditions' ); + +addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/otter-tools-inspector', withConditions ); + +const useOtterTools = ({ + hasValue, + label, + onDeselect +}) => ({ children }) => { + + return ( + + + { children } + + + ); +}; + +export default useOtterTools; diff --git a/src/blocks/components/otter-tools/index.tsx b/src/blocks/components/otter-tools/index.tsx index b75a688ff..b9788f47a 100644 --- a/src/blocks/components/otter-tools/index.tsx +++ b/src/blocks/components/otter-tools/index.tsx @@ -9,7 +9,6 @@ import { sortBy } from 'lodash'; import { BlockControls } from '@wordpress/block-editor'; import { - Button, ToolbarDropdownMenu, ToolbarGroup, createSlotFill, @@ -22,12 +21,10 @@ import { Fragment, useState } from '@wordpress/element'; import { addFilter } from '@wordpress/hooks'; - /** * Internal dependencies. */ import { otterIcon } from '../../helpers/icons'; -import { FeedbackModalComponent } from '../../plugins/feedback'; import { isAppleOS } from '../../helpers/helper-functions'; const { Fill, Slot } = createSlotFill( 'OtterControlTools' ); diff --git a/src/blocks/plugins/conditions/edit.js b/src/blocks/plugins/conditions/edit.js index 05105aef8..119507abe 100644 --- a/src/blocks/plugins/conditions/edit.js +++ b/src/blocks/plugins/conditions/edit.js @@ -8,6 +8,7 @@ import { isEmpty } from 'lodash'; import { BaseControl, Button, + ExternalLink, FormTokenField, PanelBody, SelectControl, @@ -30,8 +31,10 @@ import { applyFilters } from '@wordpress/hooks'; * Internal dependencies. */ import StripeControls from './components/stripe-controls'; -import PanelTab from '../../components/panel-tab/index.js'; -import { useInspectorSlot } from '../../components/inspector-slot-fill/index.js'; +import { + PanelTab, + useOtterTools +} from '../../components/index.js'; const postTypes = Object.keys( window.themeisleGutenberg.postTypes ); @@ -259,13 +262,12 @@ const Separator = ({ label }) => { ); }; +let Inspector = Fragment; + const Edit = ({ - name, attributes, setAttributes: _setAttributes }) => { - const Inspector = useInspectorSlot( name ); - const [ buffer, setBuffer ] = useState( null ); const [ conditions, setConditions ] = useState({}); const [ flatConditions, setFlatConditions ] = useState([]); @@ -289,6 +291,14 @@ const Edit = ({ }; + useEffect( () => { + Inspector = useOtterTools({ + hasValue: () => undefined !== attributes.otterConditions && Boolean( attributes?.otterConditions?.length ), + label: __( 'Visibility Conditions', 'otter-blocks' ), + onDeselect: () => setAttributes({ otterConditions: undefined }) + }); + }, []); + /** * Use an intermediary buffer to add the real attributes to the block. */ @@ -409,7 +419,6 @@ const Edit = ({

{ __( 'Control the visibility of your blocks based on the following conditions.', 'otter-blocks' ) }

diff --git a/src/blocks/plugins/conditions/index.js b/src/blocks/plugins/conditions/index.js index 213cc6a23..bdbb18d3c 100644 --- a/src/blocks/plugins/conditions/index.js +++ b/src/blocks/plugins/conditions/index.js @@ -60,5 +60,5 @@ const withConditionsIndicator = createHigherOrderComponent( BlockListBlock => { if ( Boolean( window.themeisleGutenberg.hasModule.blockConditions ) ) { addFilter( 'blocks.registerBlockType', 'themeisle-gutenberg/conditions-register', addAttribute ); addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/conditions-inspector', withConditions ); - addFilter( 'editor.BlockListBlock', 'block-visibility/contextual-indicators', withConditionsIndicator ); + addFilter( 'editor.BlockListBlock', 'themeisle-gutenberg/contextual-indicators', withConditionsIndicator ); } diff --git a/src/blocks/plugins/dynamic-content/components/inline-controls.js b/src/blocks/plugins/dynamic-content/components/inline-controls.js index 62b5c6741..c7369260a 100644 --- a/src/blocks/plugins/dynamic-content/components/inline-controls.js +++ b/src/blocks/plugins/dynamic-content/components/inline-controls.js @@ -76,8 +76,10 @@ const InlineControls = ({ return ( { if ( hasCustomClassName && props.isSelected ) { let Inspector = InspectorControls; - if ( window?.otterComponents?.useInspectorSlot ) { - Inspector = window.otterComponents.useInspectorSlot( props.name ); + if ( window?.otterComponents?.useOtterTools ) { + Inspector = window.otterComponents.useOtterTools({ + hasValue: () => Boolean( props.attributes?.hasCustomCSS ), + label: __( 'Custom CSS', 'otter-blocks' ), + onDeselect: () => { + props.setAttributes({ + hasCustomCSS: false, + customCSS: null + }); + } + }); } return ( From 49355c49dac6dde72635a4414c0af6967e23a6a2 Mon Sep 17 00:00:00 2001 From: Hardeep Asrani Date: Sat, 24 Dec 2022 03:35:10 +0530 Subject: [PATCH 2/7] Stop panels from auto-closing --- inc/class-blocks-animation.php | 12 + inc/class-blocks-css.php | 12 + src/animation/editor.js | 150 ++++---- src/animation/index.js | 42 ++- src/blocks/components/index.js | 3 - .../otter-tools-inspector/index.tsx | 79 ----- src/blocks/plugins/conditions/edit.js | 335 +++++++++--------- src/blocks/plugins/conditions/index.js | 32 +- .../otter-tools-inspector/editor.scss | 0 .../plugins/otter-tools-inspector/index.tsx | 45 +++ src/blocks/plugins/registerPlugin.tsx | 1 + src/css/index.js | 99 ++++-- src/css/inject-css.js | 8 + 13 files changed, 429 insertions(+), 389 deletions(-) delete mode 100644 src/blocks/components/otter-tools-inspector/index.tsx rename src/blocks/{components => plugins}/otter-tools-inspector/editor.scss (100%) create mode 100644 src/blocks/plugins/otter-tools-inspector/index.tsx diff --git a/inc/class-blocks-animation.php b/inc/class-blocks-animation.php index 6e8bf8e30..87fff1f98 100644 --- a/inc/class-blocks-animation.php +++ b/inc/class-blocks-animation.php @@ -67,6 +67,10 @@ public function enqueue_editor_assets() { $asset_file['version'] ); + if ( defined( 'OTTER_BLOCKS_VERSION' ) ) { + array_push( $asset_file['dependencies'], 'otter-blocks' ); + } + wp_enqueue_script( 'otter-animation', BLOCKS_ANIMATION_URL . 'build/animation/index.js', @@ -75,6 +79,14 @@ public function enqueue_editor_assets() { true ); + wp_localize_script( + 'otter-animation', + 'blocksAnimation', + array( + 'hasOtter' => defined( 'OTTER_BLOCKS_VERSION' ), + ) + ); + wp_set_script_translations( 'otter-animation', 'otter-blocks' ); $asset_file = include BLOCKS_ANIMATION_PATH . '/build/animation/anim-count.asset.php'; diff --git a/inc/class-blocks-css.php b/inc/class-blocks-css.php index 408eaa0cf..7022335fb 100644 --- a/inc/class-blocks-css.php +++ b/inc/class-blocks-css.php @@ -56,6 +56,10 @@ public function enqueue_editor_assets() { $asset_file = include BLOCKS_CSS_PATH . '/build/css/index.asset.php'; + if ( defined( 'OTTER_BLOCKS_VERSION' ) ) { + array_push( $asset_file['dependencies'], 'otter-blocks' ); + } + wp_enqueue_script( 'otter-css', BLOCKS_CSS_URL . 'build/css/index.js', @@ -64,6 +68,14 @@ public function enqueue_editor_assets() { true ); + wp_localize_script( + 'otter-css', + 'blocksCSS', + array( + 'hasOtter' => defined( 'OTTER_BLOCKS_VERSION' ), + ) + ); + wp_set_script_translations( 'otter-css', 'otter-blocks' ); wp_enqueue_style( diff --git a/src/animation/editor.js b/src/animation/editor.js index c383bd353..231faa3ba 100644 --- a/src/animation/editor.js +++ b/src/animation/editor.js @@ -3,8 +3,6 @@ */ import { __ } from '@wordpress/i18n'; -import { InspectorControls } from '@wordpress/block-editor'; - import { Button, PanelBody, @@ -45,8 +43,6 @@ const AnimationType = { import { memo } from '@wordpress/element'; -let Inspector = InspectorControls; - export const updateAnimConfig = ( type, oldValue, newValue, callback, attributes, setAttributes ) => { let template; switch ( type ) { @@ -194,12 +190,8 @@ function AnimationControls({ }; useEffect( () => { - if ( window?.otterComponents?.useOtterTools ) { - Inspector = window.otterComponents.useOtterTools({ - hasValue: () => Boolean( 'none' !== animation ), - label: __( 'Animations', 'otter-blocks' ), - onDeselect: () => updateAnimation( 'none' ) - }); + if ( undefined !== window?.blocksAnimation ) { + window.blocksAnimation.removeAnimation = () => updateAnimation( 'none' ); } }, []); @@ -213,77 +205,75 @@ function AnimationControls({ }; return ( - - +
+ + + { 'none' !== animation && ( + + updateAnimConfig( AnimationType.default, delay, value, () => setDelay( value ), attributes, setAttributes ) } + /> + + updateAnimConfig( AnimationType.default, speed, value, () => setSpeed( value ), attributes, setAttributes ) } + /> + + + + ) } +
+ + + { + +

{ __( 'You can add counting animation from the format toolbar of this block.', 'otter-blocks' ) }

+

{ __( 'Note: This feature is not available in all the blocks.', 'otter-blocks' ) }

+ + + -
- - - { 'none' !== animation && ( - - updateAnimConfig( AnimationType.default, delay, value, () => setDelay( value ), attributes, setAttributes ) } - /> - - updateAnimConfig( AnimationType.default, speed, value, () => setSpeed( value ), attributes, setAttributes ) } - /> - - - - ) } -
- - - { - -

{ __( 'You can add counting animation from the format toolbar of this block.', 'otter-blocks' ) }

-

{ __( 'Note: This feature is not available in all the blocks.', 'otter-blocks' ) }

- - - - { - -

{ __( 'You can add typing animation from the format toolbar of this block.', 'otter-blocks' ) }

-

{ __( 'Note: This feature is not available in all the blocks.', 'otter-blocks' ) }

- - -
- { applyFilters( 'otter.feedback', '', 'animations' ) } - { applyFilters( 'otter.poweredBy', '' ) } -
- - + { + +

{ __( 'You can add typing animation from the format toolbar of this block.', 'otter-blocks' ) }

+

{ __( 'Note: This feature is not available in all the blocks.', 'otter-blocks' ) }

+ + +
+ { applyFilters( 'otter.feedback', '', 'animations' ) } + { applyFilters( 'otter.poweredBy', '' ) } +
+ ); } diff --git a/src/animation/index.js b/src/animation/index.js index 572f22a03..ecfc3ed61 100644 --- a/src/animation/index.js +++ b/src/animation/index.js @@ -5,6 +5,10 @@ import { __ } from '@wordpress/i18n'; import { hasBlockSupport } from '@wordpress/blocks'; +import { InspectorControls } from '@wordpress/block-editor'; + +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; + import { createHigherOrderComponent } from '@wordpress/compose'; import { Fragment } from '@wordpress/element'; @@ -16,12 +20,33 @@ import { addFilter } from '@wordpress/hooks'; */ import './editor.scss'; -import AnimationControls from './editor.js'; +import Edit from './editor.js'; import './count/index.js'; import './typing/index.js'; const excludedBlocks = [ 'themeisle-blocks/popup' ]; +const BlockAnimation = ( el, props ) => { + if ( hasBlockSupport( props.name, 'customClassName', true ) && ! excludedBlocks.includes( props.name ) ) { + return ( + + { el } + + Boolean( props?.attributes?.className?.includes( 'animated' ) ) } + label={ __( 'Animations', 'otter-blocks' ) } + onDeselect={ () => window?.blocksAnimation?.removeAnimation() } + isShownByDefault={ false } + > + + + + ); + } + + return el; +}; + const withInspectorControls = createHigherOrderComponent( BlockEdit => { return props => { const hasCustomClassName = hasBlockSupport( @@ -34,11 +59,10 @@ const withInspectorControls = createHigherOrderComponent( BlockEdit => { return ( - + + + + ); } @@ -47,4 +71,8 @@ const withInspectorControls = createHigherOrderComponent( BlockEdit => { }; }, 'withInspectorControl' ); -addFilter( 'editor.BlockEdit', 'themeisle-custom-css/with-inspector-controls', withInspectorControls ); +if ( Boolean( window?.blocksAnimation?.hasOtter ) ) { + addFilter( 'otter.blockTools', 'themeisle-animations/with-inspector-controls', BlockAnimation ); +} else { + addFilter( 'editor.BlockEdit', 'themeisle-animations/with-inspector-controls', withInspectorControls ); +} diff --git a/src/blocks/components/index.js b/src/blocks/components/index.js index 609d574fa..1053173b0 100644 --- a/src/blocks/components/index.js +++ b/src/blocks/components/index.js @@ -4,7 +4,6 @@ import { useInspectorSlot } from './inspector-slot-fill/index.js'; import Notice from './notice/index.js'; import { OtterControlTools } from './otter-tools/index'; -import useOtterTools from './otter-tools-inspector/index'; import SelectProducts from './select-products-control/index.js'; window.otterComponents = {}; @@ -13,7 +12,6 @@ window.otterComponents.SelectProducts = SelectProducts; window.otterComponents.Notice = Notice; window.otterComponents.OtterControlTools = OtterControlTools; window.otterComponents.useInspectorSlot = useInspectorSlot; -window.otterComponents.useOtterTools = useOtterTools; export { default as BackgroundOverlayControl } from './background-overlay-control/index.js'; export { default as BackgroundSelectorControl } from './background-selector-control/index.js'; @@ -34,7 +32,6 @@ export { } from './inspector-slot-fill/index.js'; export { default as LinkControlToolbar } from './link-control/index.js'; export { default as Notice } from './notice/index.js'; -export { default as useOtterTools } from './otter-tools-inspector/index'; export { default as PanelTab } from './panel-tab/index.js'; export { default as ResponsiveControl } from './responsive-control/index.js'; export { default as SelectProducts } from './select-products-control/index.js'; diff --git a/src/blocks/components/otter-tools-inspector/index.tsx b/src/blocks/components/otter-tools-inspector/index.tsx deleted file mode 100644 index df9536fb7..000000000 --- a/src/blocks/components/otter-tools-inspector/index.tsx +++ /dev/null @@ -1,79 +0,0 @@ -// @ts-nocheck - -/** - * WordPress dependencies. - */ -import { __ } from '@wordpress/i18n'; - -import { - __experimentalToolsPanel as ToolsPanel, - __experimentalToolsPanelItem as ToolsPanelItem, - createSlotFill -} from '@wordpress/components'; - -import { createHigherOrderComponent } from '@wordpress/compose'; - -import { addFilter } from '@wordpress/hooks'; - -/** - * Internal dependencies. - */ -import './editor.scss'; -import { useInspectorSlot } from '../inspector-slot-fill/index.js'; - -const { Fill, Slot } = createSlotFill( 'OtterInspectorTools' ); - -const withConditions = createHigherOrderComponent( BlockEdit => { - return props => { - const Inspector = useInspectorSlot( props.name ); - - return ( -
- - - { props.isSelected && ( - - - - { fills => { - if ( ! fills.length ) { - return null; - } - - return fills; - } } - - - - ) } -
- ); - }; -}, 'withConditions' ); - -addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/otter-tools-inspector', withConditions ); - -const useOtterTools = ({ - hasValue, - label, - onDeselect -}) => ({ children }) => { - - return ( - - - { children } - - - ); -}; - -export default useOtterTools; diff --git a/src/blocks/plugins/conditions/edit.js b/src/blocks/plugins/conditions/edit.js index 119507abe..8f2da5684 100644 --- a/src/blocks/plugins/conditions/edit.js +++ b/src/blocks/plugins/conditions/edit.js @@ -31,10 +31,7 @@ import { applyFilters } from '@wordpress/hooks'; * Internal dependencies. */ import StripeControls from './components/stripe-controls'; -import { - PanelTab, - useOtterTools -} from '../../components/index.js'; +import { PanelTab } from '../../components/index.js'; const postTypes = Object.keys( window.themeisleGutenberg.postTypes ); @@ -262,8 +259,6 @@ const Separator = ({ label }) => { ); }; -let Inspector = Fragment; - const Edit = ({ attributes, setAttributes: _setAttributes @@ -291,14 +286,6 @@ const Edit = ({ }; - useEffect( () => { - Inspector = useOtterTools({ - hasValue: () => undefined !== attributes.otterConditions && Boolean( attributes?.otterConditions?.length ), - label: __( 'Visibility Conditions', 'otter-blocks' ), - onDeselect: () => setAttributes({ otterConditions: undefined }) - }); - }, []); - /** * Use an intermediary buffer to add the real attributes to the block. */ @@ -415,170 +402,168 @@ const Edit = ({ }; return ( - - +

{ __( 'Control the visibility of your blocks based on the following conditions.', 'otter-blocks' ) }

+ +

{ __( 'Display the block if…', 'otter-blocks' ) }

+ + { attributes.otterConditions && attributes.otterConditions.map( ( group, index ) => { + return ( + + removeGroup( index ) } + > + { group && group.map( ( i, n ) => ( + + condition.value === ( i.type || 'none' ) )?.help } + id={ `o-conditions-${ index }-${ n }` } + > + + + + { 'userRoles' === i.type && ( + changeArrayValue( roles, index, n, 'roles' ) } + __experimentalExpandOnFocus={ true } + __experimentalValidateInput={ newValue => Object.keys( window.themeisleGutenberg.userRoles ).includes( newValue ) } + /> + ) } + + { 'postAuthor' === i.type && ( + changeArrayValue( authors, index, n, 'authors' ) } + /> + ) } + + { 'postCategory' === i.type && ( + changeArrayValue( categories, index, n, 'categories' ) } + /> + ) } + + { 'postType' === i.type && ( + changeArrayValue( types, index, n, 'post_types' ) } + __experimentalExpandOnFocus={ true } + __experimentalValidateInput={ newValue => postTypes.includes( newValue ) } + /> + ) } + + { 'stripePurchaseHistory' === i.type && ( + + { Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( + changeValue( product, index, n, 'product' ) } + /> + ) } + + { ! Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( +

+ { __( 'You need to set your Stripe API keys in the Otter Dashboard.', 'otter-blocks' ) } + { ' ' } + { __( 'Visit Dashboard', 'otter-blocks' ) } +

+ ) } + + ) } + + { applyFilters( 'otter.blockConditions.controls', '', index, n, i, attributes.otterConditions, setAttributes, changeValue ) } + + { toggleVisibility.includes( i.type ) && ( + changeVisibility( e, index, n ) } + /> + ) } + + + + { ( 1 < group.length && n !== group.length - 1 ) && ( + + ) } + + ) ) } + + + + + { ( 1 < attributes.otterConditions.length && index !== attributes.otterConditions.length - 1 ) && ( + + ) } + + ); + }) } + + -

{ __( 'Display the block if…', 'otter-blocks' ) }

+ { applyFilters( 'otter.blockConditions.notices', '' ) } - { attributes.otterConditions && attributes.otterConditions.map( ( group, index ) => { - return ( - - removeGroup( index ) } - > - { group && group.map( ( i, n ) => ( - - condition.value === ( i.type || 'none' ) )?.help } - id={ `o-conditions-${ index }-${ n }` } - > - - - - { 'userRoles' === i.type && ( - changeArrayValue( roles, index, n, 'roles' ) } - __experimentalExpandOnFocus={ true } - __experimentalValidateInput={ newValue => Object.keys( window.themeisleGutenberg.userRoles ).includes( newValue ) } - /> - ) } - - { 'postAuthor' === i.type && ( - changeArrayValue( authors, index, n, 'authors' ) } - /> - ) } - - { 'postCategory' === i.type && ( - changeArrayValue( categories, index, n, 'categories' ) } - /> - ) } - - { 'postType' === i.type && ( - changeArrayValue( types, index, n, 'post_types' ) } - __experimentalExpandOnFocus={ true } - __experimentalValidateInput={ newValue => postTypes.includes( newValue ) } - /> - ) } - - { 'stripePurchaseHistory' === i.type && ( - - { Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( - changeValue( product, index, n, 'product' ) } - /> - ) } - - { ! Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( -

- { __( 'You need to set your Stripe API keys in the Otter Dashboard.', 'otter-blocks' ) } - { ' ' } - { __( 'Visit Dashboard', 'otter-blocks' ) } -

- ) } - - ) } - - { applyFilters( 'otter.blockConditions.controls', '', index, n, i, attributes.otterConditions, setAttributes, changeValue ) } - - { toggleVisibility.includes( i.type ) && ( - changeVisibility( e, index, n ) } - /> - ) } - - - - { ( 1 < group.length && n !== group.length - 1 ) && ( - - ) } - - ) ) } - - - - - { ( 1 < attributes.otterConditions.length && index !== attributes.otterConditions.length - 1 ) && ( - - ) } - - ); - }) } - - - - { applyFilters( 'otter.blockConditions.notices', '' ) } - -
- { applyFilters( 'otter.feedback', '', 'conditions' ) } - { applyFilters( 'otter.poweredBy', '' ) } -
- - +
+ { applyFilters( 'otter.feedback', '', 'conditions' ) } + { applyFilters( 'otter.poweredBy', '' ) } +
+ ); }; diff --git a/src/blocks/plugins/conditions/index.js b/src/blocks/plugins/conditions/index.js index bdbb18d3c..d2844fa64 100644 --- a/src/blocks/plugins/conditions/index.js +++ b/src/blocks/plugins/conditions/index.js @@ -6,8 +6,12 @@ import classnames from 'classnames'; /** * WordPress dependencies. */ +import { __ } from '@wordpress/i18n'; + import { assign } from 'lodash'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; + import { createHigherOrderComponent } from '@wordpress/compose'; import { Fragment } from '@wordpress/element'; @@ -31,16 +35,22 @@ const addAttribute = ( props ) => { return props; }; -const withConditions = createHigherOrderComponent( BlockEdit => { - return props => { - return ( - - - { props.isSelected && } - - ); - }; -}, 'withConditions' ); +const BlockConditions = ( el, props ) => { + return ( + + { el } + + undefined !== props.attributes.otterConditions && Boolean( props.attributes?.otterConditions?.length ) } + label={ __( 'Visibility Conditions', 'otter-blocks' ) } + onDeselect={ () => props.setAttributes({ otterConditions: undefined }) } + isShownByDefault={ false } + > + + + + ); +}; const withConditionsIndicator = createHigherOrderComponent( BlockListBlock => { return props => { @@ -59,6 +69,6 @@ const withConditionsIndicator = createHigherOrderComponent( BlockListBlock => { if ( Boolean( window.themeisleGutenberg.hasModule.blockConditions ) ) { addFilter( 'blocks.registerBlockType', 'themeisle-gutenberg/conditions-register', addAttribute ); - addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/conditions-inspector', withConditions ); + addFilter( 'otter.blockTools', 'themeisle-gutenberg/conditions-inspector', BlockConditions ); addFilter( 'editor.BlockListBlock', 'themeisle-gutenberg/contextual-indicators', withConditionsIndicator ); } diff --git a/src/blocks/components/otter-tools-inspector/editor.scss b/src/blocks/plugins/otter-tools-inspector/editor.scss similarity index 100% rename from src/blocks/components/otter-tools-inspector/editor.scss rename to src/blocks/plugins/otter-tools-inspector/editor.scss diff --git a/src/blocks/plugins/otter-tools-inspector/index.tsx b/src/blocks/plugins/otter-tools-inspector/index.tsx new file mode 100644 index 000000000..ecdd65291 --- /dev/null +++ b/src/blocks/plugins/otter-tools-inspector/index.tsx @@ -0,0 +1,45 @@ +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; + +// @ts-ignore +import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components'; + +import { createHigherOrderComponent } from '@wordpress/compose'; + +import { + addFilter, + applyFilters +} from '@wordpress/hooks'; + +/** + * Internal dependencies. + */ +import './editor.scss'; +import { useInspectorSlot } from '../../components/inspector-slot-fill/index.js'; + +const withConditions = createHigherOrderComponent( BlockEdit => { + return props => { + const Inspector = useInspectorSlot( props.name ); + + return ( +
+ + + { props.isSelected && ( + + + { applyFilters( 'otter.blockTools', '', props ) } + + + ) } +
+ ); + }; +}, 'withConditions' ); + +addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/otter-tools-inspector', withConditions ); diff --git a/src/blocks/plugins/registerPlugin.tsx b/src/blocks/plugins/registerPlugin.tsx index b2b9b228d..2bf6d487f 100644 --- a/src/blocks/plugins/registerPlugin.tsx +++ b/src/blocks/plugins/registerPlugin.tsx @@ -30,6 +30,7 @@ import './welcome-guide/index.js'; import '../components/otter-tools/index'; import './feedback/index.js'; import './bf-deal/index.js'; +import './otter-tools-inspector/index'; const icon = ; diff --git a/src/css/index.js b/src/css/index.js index eabd22cbc..18cdf382b 100644 --- a/src/css/index.js +++ b/src/css/index.js @@ -9,12 +9,13 @@ import { hasBlockSupport } from '@wordpress/blocks'; import { InspectorControls } from '@wordpress/block-editor'; -import { PanelBody } from '@wordpress/components'; +import { + __experimentalToolsPanelItem as ToolsPanelItem, + PanelBody +} from '@wordpress/components'; import { createHigherOrderComponent } from '@wordpress/compose'; -import { select } from '@wordpress/data'; - import { Fragment } from '@wordpress/element'; import { @@ -31,6 +32,8 @@ import CSSEditor from './editor.js'; import './inject-css.js'; +import { onDeselect } from './inject-css.js'; + const addAttribute = ( settings ) => { if ( hasBlockSupport( settings, 'customClassName', true ) ) { settings.attributes = assign( settings.attributes, { @@ -48,45 +51,68 @@ const addAttribute = ( settings ) => { return settings; }; -const withInspectorControls = createHigherOrderComponent( BlockEdit => { - return props => { - const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true ); - if ( hasCustomClassName && props.isSelected ) { - let Inspector = InspectorControls; +const Edit = ({ + clientId, + setAttributes, + attributes +}) => { + return ( + + + +
+ { applyFilters( 'otter.feedback', '', 'custom-css' ) } + { applyFilters( 'otter.poweredBy', '' ) } +
+ + ); +}; - if ( window?.otterComponents?.useOtterTools ) { - Inspector = window.otterComponents.useOtterTools({ - hasValue: () => Boolean( props.attributes?.hasCustomCSS ), - label: __( 'Custom CSS', 'otter-blocks' ), - onDeselect: () => { +const BlockCSSWrapper = ( el, props ) => { + if ( hasBlockSupport( props.name, 'customClassName', true ) ) { + return ( + + { el } + + Boolean( props.attributes?.hasCustomCSS ) } + label={ __( 'Custom CSS', 'otter-blocks' ) } + onDeselect={ () => { props.setAttributes({ hasCustomCSS: false, customCSS: null }); - } - }); - } + onDeselect(); + } } + isShownByDefault={ false } + > + + + + ); + } + + return el; +}; + +const withInspectorControls = createHigherOrderComponent( BlockEdit => { + return props => { + const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true ); + if ( hasCustomClassName && props.isSelected ) { return ( - - - - -
- { applyFilters( 'otter.feedback', '', 'custom-css' ) } - { applyFilters( 'otter.poweredBy', '' ) } -
- - + + + ); } @@ -96,4 +122,9 @@ const withInspectorControls = createHigherOrderComponent( BlockEdit => { }, 'withInspectorControl' ); addFilter( 'blocks.registerBlockType', 'themeisle-custom-css/attribute', addAttribute ); -addFilter( 'editor.BlockEdit', 'themeisle-custom-css/with-inspector-controls', withInspectorControls ); + +if ( Boolean( window?.blocksCSS?.hasOtter ) ) { + addFilter( 'otter.blockTools', 'themeisle-custom-css/with-inspector-controls', BlockCSSWrapper ); +} else { + addFilter( 'editor.BlockEdit', 'themeisle-custom-css/with-inspector-controls', withInspectorControls ); +} diff --git a/src/css/inject-css.js b/src/css/inject-css.js index e270b036f..74e1f2f1d 100644 --- a/src/css/inject-css.js +++ b/src/css/inject-css.js @@ -98,6 +98,14 @@ const getCustomCssFromBlocks = ( blocks, reusableBlocks ) => { let previousBlocks = []; let previewView = false; +export const onDeselect = () => { + const { getBlocks } = select( 'core/block-editor' ); + const blocks = getBlocks(); + const reusableBlocks = select( 'core' ).getEntityRecords( 'postType', 'wp_block', { context: 'view' }); + const blocksStyle = getCustomCssFromBlocks( blocks, reusableBlocks ); + addStyle( blocksStyle ); +}; + subscribe( () => { const { getBlocks } = select( 'core/block-editor' ); const __experimentalGetPreviewDeviceType = select( 'core/edit-post' ) ? select( 'core/edit-post' ).__experimentalGetPreviewDeviceType() : false; From bd84eb118ee66c3cf40ef76d2f49532fe26d3270 Mon Sep 17 00:00:00 2001 From: Hardeep Asrani Date: Sat, 24 Dec 2022 04:49:56 +0530 Subject: [PATCH 3/7] Remove Otter Tool Icon --- inc/class-registration.php | 4 +- src/blocks/components/index.js | 2 - src/blocks/components/otter-tools/index.tsx | 117 ------- src/blocks/global.d.ts | 9 +- src/blocks/plugins/conditions/edit.js | 324 +++++++++--------- src/blocks/plugins/conditions/index.js | 11 +- src/blocks/plugins/copy-paste/index.js | 102 +++--- .../plugins/otter-tools-inspector/index.tsx | 11 +- src/blocks/plugins/registerPlugin.tsx | 1 - src/blocks/plugins/sticky/index.js | 33 +- src/export-import/exporter.js | 34 +- 11 files changed, 237 insertions(+), 411 deletions(-) delete mode 100644 src/blocks/components/otter-tools/index.tsx diff --git a/inc/class-registration.php b/inc/class-registration.php index 8e22dd46a..0eb0a7b9b 100644 --- a/inc/class-registration.php +++ b/inc/class-registration.php @@ -262,7 +262,9 @@ public function enqueue_block_editor_assets() { 'showOnboarding' => $this->show_onboarding(), 'ratingScale' => get_option( 'themeisle_blocks_settings_review_scale', false ), 'hasModule' => array( - 'blockConditions' => get_option( 'themeisle_blocks_settings_block_conditions', true ), + 'blockCSS' => boolval( get_option( 'themeisle_blocks_settings_css_module', true ) ), + 'blockAnimations' => boolval( get_option( 'themeisle_blocks_settings_blocks_animation', true ) ), + 'blockConditions' => boolval( get_option( 'themeisle_blocks_settings_block_conditions', true ) ), ), 'isLegacyPre59' => version_compare( get_bloginfo( 'version' ), '5.8.22', '<=' ), 'isAncestorTypeAvailable' => version_compare( get_bloginfo( 'version' ), '5.9.22', '>=' ), diff --git a/src/blocks/components/index.js b/src/blocks/components/index.js index 1053173b0..ffb3ee54a 100644 --- a/src/blocks/components/index.js +++ b/src/blocks/components/index.js @@ -3,14 +3,12 @@ */ import { useInspectorSlot } from './inspector-slot-fill/index.js'; import Notice from './notice/index.js'; -import { OtterControlTools } from './otter-tools/index'; import SelectProducts from './select-products-control/index.js'; window.otterComponents = {}; window.otterComponents.SelectProducts = SelectProducts; window.otterComponents.Notice = Notice; -window.otterComponents.OtterControlTools = OtterControlTools; window.otterComponents.useInspectorSlot = useInspectorSlot; export { default as BackgroundOverlayControl } from './background-overlay-control/index.js'; diff --git a/src/blocks/components/otter-tools/index.tsx b/src/blocks/components/otter-tools/index.tsx deleted file mode 100644 index b9788f47a..000000000 --- a/src/blocks/components/otter-tools/index.tsx +++ /dev/null @@ -1,117 +0,0 @@ -// @ts-nocheck -/** - * WordPress dependencies. - */ -import { __ } from '@wordpress/i18n'; - -import { sortBy } from 'lodash'; - -import { BlockControls } from '@wordpress/block-editor'; - -import { - ToolbarDropdownMenu, - ToolbarGroup, - createSlotFill, - KeyboardShortcuts -} from '@wordpress/components'; - -import { createHigherOrderComponent } from '@wordpress/compose'; - -import { Fragment, useState } from '@wordpress/element'; - -import { addFilter } from '@wordpress/hooks'; - -/** - * Internal dependencies. - */ -import { otterIcon } from '../../helpers/icons'; -import { isAppleOS } from '../../helpers/helper-functions'; - -const { Fill, Slot } = createSlotFill( 'OtterControlTools' ); - -export const OtterControlTools = ({ children, order, source }) => { - return -
- {children} -
- ; -}; - -const withOtterTools = createHigherOrderComponent( BlockEdit => { - return ( props ) => { - - const [ isOpen, setIsOpen ] = useState( false ); - const [ status, setStatus ] = useState( 'notSubmitted' ); - - const closeModal = () => { - setIsOpen( false ); - setStatus( 'notSubmitted' ); - }; - - return ( - - - - {( props.isSelected ) && ( - - - { - fills => { - - if ( ! Boolean( fills.length ) ) { - return null; - } - - return ( - - { - fills.some( x => 'copy-paste' === x[0].props?.source ) && ( - - ) - } - - - - { - ({ onClose }) => ( -
- { - sortBy( fills ?? [], fill => { - return fill[0]?.props.order; - }).map( fill => { - return fill[0]?.props?.children; - }) - } -
- ) - } - - - - ); - } - } - - - )} - - - ); - }; -}, 'withOtterTools' ); - -addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/otter-tools', withOtterTools ); diff --git a/src/blocks/global.d.ts b/src/blocks/global.d.ts index 4dd08a0cc..0215b965f 100644 --- a/src/blocks/global.d.ts +++ b/src/blocks/global.d.ts @@ -32,7 +32,9 @@ declare global { } rootUrl: string hasModule: { - blocksConditions: boolean + blockCSS: boolean + blockAnimations: boolean + blockConditions: boolean } blocksIDs: string[] isAncestorTypeAvailable: boolean @@ -83,11 +85,6 @@ declare global { SelectProducts?: ( props: any ) => JSX.Element Notice?: ( props: { notice: any, variant: string, instructions: 'string'}) => JSX.Element useInspectorSlot?: ( name: string ) => any - OtterControlTools?: ( props: any ) => any - }, - oPlugins: { - copy?: () => void, - paste?: () => void } } } diff --git a/src/blocks/plugins/conditions/edit.js b/src/blocks/plugins/conditions/edit.js index 8f2da5684..72ad9de0b 100644 --- a/src/blocks/plugins/conditions/edit.js +++ b/src/blocks/plugins/conditions/edit.js @@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n'; import { isEmpty } from 'lodash'; import { + __experimentalToolsPanelItem as ToolsPanelItem, BaseControl, Button, ExternalLink, @@ -402,168 +403,175 @@ const Edit = ({ }; return ( - undefined !== attributes.otterConditions && Boolean( attributes.otterConditions?.length ) } + label={ __( 'Visibility Conditions', 'otter-blocks' ) } + onDeselect={ () => setAttributes({ otterConditions: undefined }) } + isShownByDefault={ false } > -

{ __( 'Control the visibility of your blocks based on the following conditions.', 'otter-blocks' ) }

- -

{ __( 'Display the block if…', 'otter-blocks' ) }

- - { attributes.otterConditions && attributes.otterConditions.map( ( group, index ) => { - return ( - - removeGroup( index ) } - > - { group && group.map( ( i, n ) => ( - - condition.value === ( i.type || 'none' ) )?.help } - id={ `o-conditions-${ index }-${ n }` } - > - - - - { 'userRoles' === i.type && ( - changeArrayValue( roles, index, n, 'roles' ) } - __experimentalExpandOnFocus={ true } - __experimentalValidateInput={ newValue => Object.keys( window.themeisleGutenberg.userRoles ).includes( newValue ) } - /> - ) } - - { 'postAuthor' === i.type && ( - changeArrayValue( authors, index, n, 'authors' ) } - /> - ) } - - { 'postCategory' === i.type && ( - changeArrayValue( categories, index, n, 'categories' ) } - /> - ) } - - { 'postType' === i.type && ( - changeArrayValue( types, index, n, 'post_types' ) } - __experimentalExpandOnFocus={ true } - __experimentalValidateInput={ newValue => postTypes.includes( newValue ) } - /> - ) } - - { 'stripePurchaseHistory' === i.type && ( - - { Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( - changeValue( product, index, n, 'product' ) } - /> - ) } - - { ! Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( -

- { __( 'You need to set your Stripe API keys in the Otter Dashboard.', 'otter-blocks' ) } - { ' ' } - { __( 'Visit Dashboard', 'otter-blocks' ) } -

- ) } - - ) } - - { applyFilters( 'otter.blockConditions.controls', '', index, n, i, attributes.otterConditions, setAttributes, changeValue ) } - - { toggleVisibility.includes( i.type ) && ( - changeVisibility( e, index, n ) } - /> - ) } - - - - { ( 1 < group.length && n !== group.length - 1 ) && ( - - ) } - - ) ) } - - - - - { ( 1 < attributes.otterConditions.length && index !== attributes.otterConditions.length - 1 ) && ( - - ) } - - ); - }) } - - +

{ __( 'Control the visibility of your blocks based on the following conditions.', 'otter-blocks' ) }

- { applyFilters( 'otter.blockConditions.notices', '' ) } +

{ __( 'Display the block if…', 'otter-blocks' ) }

-
- { applyFilters( 'otter.feedback', '', 'conditions' ) } - { applyFilters( 'otter.poweredBy', '' ) } -
- + { attributes.otterConditions && attributes.otterConditions.map( ( group, index ) => { + return ( + + removeGroup( index ) } + > + { group && group.map( ( i, n ) => ( + + condition.value === ( i.type || 'none' ) )?.help } + id={ `o-conditions-${ index }-${ n }` } + > + + + + { 'userRoles' === i.type && ( + changeArrayValue( roles, index, n, 'roles' ) } + __experimentalExpandOnFocus={ true } + __experimentalValidateInput={ newValue => Object.keys( window.themeisleGutenberg.userRoles ).includes( newValue ) } + /> + ) } + + { 'postAuthor' === i.type && ( + changeArrayValue( authors, index, n, 'authors' ) } + /> + ) } + + { 'postCategory' === i.type && ( + changeArrayValue( categories, index, n, 'categories' ) } + /> + ) } + + { 'postType' === i.type && ( + changeArrayValue( types, index, n, 'post_types' ) } + __experimentalExpandOnFocus={ true } + __experimentalValidateInput={ newValue => postTypes.includes( newValue ) } + /> + ) } + + { 'stripePurchaseHistory' === i.type && ( + + { Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( + changeValue( product, index, n, 'product' ) } + /> + ) } + + { ! Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( +

+ { __( 'You need to set your Stripe API keys in the Otter Dashboard.', 'otter-blocks' ) } + { ' ' } + { __( 'Visit Dashboard', 'otter-blocks' ) } +

+ ) } + + ) } + + { applyFilters( 'otter.blockConditions.controls', '', index, n, i, attributes.otterConditions, setAttributes, changeValue ) } + + { toggleVisibility.includes( i.type ) && ( + changeVisibility( e, index, n ) } + /> + ) } + + + + { ( 1 < group.length && n !== group.length - 1 ) && ( + + ) } + + ) ) } + + + + + { ( 1 < attributes.otterConditions.length && index !== attributes.otterConditions.length - 1 ) && ( + + ) } + + ); + }) } + + + + { applyFilters( 'otter.blockConditions.notices', '' ) } + +
+ { applyFilters( 'otter.feedback', '', 'conditions' ) } + { applyFilters( 'otter.poweredBy', '' ) } +
+ + ); }; diff --git a/src/blocks/plugins/conditions/index.js b/src/blocks/plugins/conditions/index.js index d2844fa64..c08e51257 100644 --- a/src/blocks/plugins/conditions/index.js +++ b/src/blocks/plugins/conditions/index.js @@ -10,8 +10,6 @@ import { __ } from '@wordpress/i18n'; import { assign } from 'lodash'; -import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; - import { createHigherOrderComponent } from '@wordpress/compose'; import { Fragment } from '@wordpress/element'; @@ -40,14 +38,7 @@ const BlockConditions = ( el, props ) => { { el } - undefined !== props.attributes.otterConditions && Boolean( props.attributes?.otterConditions?.length ) } - label={ __( 'Visibility Conditions', 'otter-blocks' ) } - onDeselect={ () => props.setAttributes({ otterConditions: undefined }) } - isShownByDefault={ false } - > - - + ); }; diff --git a/src/blocks/plugins/copy-paste/index.js b/src/blocks/plugins/copy-paste/index.js index 2b3821096..23238a835 100644 --- a/src/blocks/plugins/copy-paste/index.js +++ b/src/blocks/plugins/copy-paste/index.js @@ -2,12 +2,24 @@ * WordPress dependencies. */ import { __ } from '@wordpress/i18n'; + +import { pick } from 'lodash'; + +import { KeyboardShortcuts } from '@wordpress/components'; + import { createHigherOrderComponent } from '@wordpress/compose'; -import { select, dispatch } from '@wordpress/data'; + +import { + select, + dispatch +} from '@wordpress/data'; + import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post'; + import { Fragment } from '@wordpress/element'; + import { addFilter } from '@wordpress/hooks'; -import { MenuGroup, MenuItem } from '@wordpress/components'; + import { displayShortcut } from '@wordpress/keycodes'; /** @@ -15,16 +27,12 @@ import { displayShortcut } from '@wordpress/keycodes'; */ import { adaptors } from './adaptors'; import CopyPaste from './copy-paste'; -import { pick } from 'lodash'; import { extractThemeCSSVar } from './utils'; -import { OtterControlTools } from '../../components/otter-tools'; import { isAppleOS } from '../../helpers/helper-functions'; - const copyPaste = new CopyPaste(); function copy() { - if ( 'undefined' !== typeof window && window.oThemeStyles === undefined ) { const settings = pick( select( 'core/block-editor' )?.getSettings?.() ?? {}, [ 'colors', 'gradients', 'styles' ]); extractThemeCSSVar( settings ); @@ -127,25 +135,37 @@ const iconTextWrapper = ( text ) => ( const CopyPasteComponent = ( ) => { return ( - { - window?.themeisleGutenberg?.isBlockEditor && ( - - + { window?.themeisleGutenberg?.isBlockEditor && ( + - { - ! copyPaste.isExpired && ( - - ) + - ) - } + bindGlobal={ true } + /> + + + + { ! copyPaste.isExpired && ( + + ) } + + ) } ); }; @@ -155,36 +175,11 @@ const withCopyPasteExtension = createHigherOrderComponent( BlockEdit => { return ( props ) => { if ( adaptors?.[props.name] && props.isSelected ) { - return ( - - { - - /** - Might be useful in the future. - - */ - } - - - - - { __( 'Copy Style', 'otter-blocks' ) } - - - - { __( 'Paste Style', 'otter-blocks' ) } - - - + + ); } @@ -196,10 +191,3 @@ const withCopyPasteExtension = createHigherOrderComponent( BlockEdit => { if ( select?.( 'core/editor' ) !== undefined ) { addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/copy-paste-extension', withCopyPasteExtension ); } - -// Load to global scope -window.oPlugins = { - copy: copy, - paste: paste -}; - diff --git a/src/blocks/plugins/otter-tools-inspector/index.tsx b/src/blocks/plugins/otter-tools-inspector/index.tsx index ecdd65291..7eea5a68b 100644 --- a/src/blocks/plugins/otter-tools-inspector/index.tsx +++ b/src/blocks/plugins/otter-tools-inspector/index.tsx @@ -8,6 +8,8 @@ import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components'; import { createHigherOrderComponent } from '@wordpress/compose'; +import { Fragment } from '@wordpress/element'; + import { addFilter, applyFilters @@ -19,15 +21,18 @@ import { import './editor.scss'; import { useInspectorSlot } from '../../components/inspector-slot-fill/index.js'; +// @ts-ignore +const shouldAppear = Object.keys( window.themeisleGutenberg?.hasModule ).some( ( i: string ) => Boolean( window.themeisleGutenberg?.hasModule[ i ]) ); + const withConditions = createHigherOrderComponent( BlockEdit => { return props => { const Inspector = useInspectorSlot( props.name ); return ( -
+ - { props.isSelected && ( + { ( props.isSelected && shouldAppear ) && ( { ) } -
+ ); }; }, 'withConditions' ); diff --git a/src/blocks/plugins/registerPlugin.tsx b/src/blocks/plugins/registerPlugin.tsx index 2bf6d487f..186a42c3e 100644 --- a/src/blocks/plugins/registerPlugin.tsx +++ b/src/blocks/plugins/registerPlugin.tsx @@ -27,7 +27,6 @@ import './copy-paste/index.js'; import './sticky/index.js'; import './dynamic-content/index.js'; import './welcome-guide/index.js'; -import '../components/otter-tools/index'; import './feedback/index.js'; import './bf-deal/index.js'; import './otter-tools-inspector/index'; diff --git a/src/blocks/plugins/sticky/index.js b/src/blocks/plugins/sticky/index.js index a6daa38c1..ae85834f7 100644 --- a/src/blocks/plugins/sticky/index.js +++ b/src/blocks/plugins/sticky/index.js @@ -20,8 +20,6 @@ import { addFilter } from '@wordpress/hooks'; */ import './editor.scss'; import Edit from './edit'; -import { MenuGroup, MenuItem } from '@wordpress/components'; -import { OtterControlTools } from '../../components/otter-tools'; const EXCEPTED_BLOCK_CONDITIONS = [ '-item', 'form-' ]; // Exclude sub-blocks @@ -53,31 +51,12 @@ const withStickyExtension = createHigherOrderComponent( BlockEdit => { - { ! EXCEPTED_BLOCK_CONDITIONS.some( cond => props.name?.includes( cond ) ) && ( - - - { - window?.themeisleGutenberg?.isBlockEditor && OtterControlTools === undefined && ( - - ) - } - - - - - - { ! isSticky ? __( 'Transform to Sticky', 'otter-blocks' ) : __( 'Remove Sticky Element', 'otter-blocks' ) } - - - - + { ( ! EXCEPTED_BLOCK_CONDITIONS.some( cond => props.name?.includes( cond ) ) && Boolean( window?.themeisleGutenberg?.isBlockEditor ) ) && ( + ) } { props.attributes?.className?.includes( 'o-sticky' ) && ( diff --git a/src/export-import/exporter.js b/src/export-import/exporter.js index ea278751c..a17f21bb3 100644 --- a/src/export-import/exporter.js +++ b/src/export-import/exporter.js @@ -20,11 +20,8 @@ import { } from '@wordpress/data'; import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post'; -import { Fragment } from '@wordpress/element'; -import { MenuGroup, MenuItem } from '@wordpress/components'; const BlocksExporter = () => { - const OtterControlTools = window?.otterComponents?.OtterControlTools; const { blocks, count } = useSelect( ( select ) => { const { getSelectedBlockCount, @@ -121,32 +118,11 @@ const BlocksExporter = () => { }; return ( - - { - OtterControlTools === undefined && ( - - ) - } - - { - OtterControlTools !== undefined && ( - - - - { __( 'Export as JSON', 'otter-blocks' ) } - - - - ) - } - + ); }; From 55c92d93ee09af11d49135d08941a34b12582f8a Mon Sep 17 00:00:00 2001 From: Hardeep Asrani Date: Sat, 24 Dec 2022 06:01:45 +0530 Subject: [PATCH 4/7] Migrate Sticky Here --- src/blocks/plugins/conditions/edit.js | 324 +++++++++--------- src/blocks/plugins/conditions/index.js | 11 +- .../plugins/otter-tools-inspector/index.tsx | 5 +- src/blocks/plugins/sticky/edit.tsx | 68 ++-- src/blocks/plugins/sticky/index.js | 92 +++-- 5 files changed, 238 insertions(+), 262 deletions(-) diff --git a/src/blocks/plugins/conditions/edit.js b/src/blocks/plugins/conditions/edit.js index 72ad9de0b..8f2da5684 100644 --- a/src/blocks/plugins/conditions/edit.js +++ b/src/blocks/plugins/conditions/edit.js @@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n'; import { isEmpty } from 'lodash'; import { - __experimentalToolsPanelItem as ToolsPanelItem, BaseControl, Button, ExternalLink, @@ -403,175 +402,168 @@ const Edit = ({ }; return ( - undefined !== attributes.otterConditions && Boolean( attributes.otterConditions?.length ) } - label={ __( 'Visibility Conditions', 'otter-blocks' ) } - onDeselect={ () => setAttributes({ otterConditions: undefined }) } - isShownByDefault={ false } + - { __( 'Control the visibility of your blocks based on the following conditions.', 'otter-blocks' ) }

+ +

{ __( 'Display the block if…', 'otter-blocks' ) }

+ + { attributes.otterConditions && attributes.otterConditions.map( ( group, index ) => { + return ( + + removeGroup( index ) } + > + { group && group.map( ( i, n ) => ( + + condition.value === ( i.type || 'none' ) )?.help } + id={ `o-conditions-${ index }-${ n }` } + > + + + + { 'userRoles' === i.type && ( + changeArrayValue( roles, index, n, 'roles' ) } + __experimentalExpandOnFocus={ true } + __experimentalValidateInput={ newValue => Object.keys( window.themeisleGutenberg.userRoles ).includes( newValue ) } + /> + ) } + + { 'postAuthor' === i.type && ( + changeArrayValue( authors, index, n, 'authors' ) } + /> + ) } + + { 'postCategory' === i.type && ( + changeArrayValue( categories, index, n, 'categories' ) } + /> + ) } + + { 'postType' === i.type && ( + changeArrayValue( types, index, n, 'post_types' ) } + __experimentalExpandOnFocus={ true } + __experimentalValidateInput={ newValue => postTypes.includes( newValue ) } + /> + ) } + + { 'stripePurchaseHistory' === i.type && ( + + { Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( + changeValue( product, index, n, 'product' ) } + /> + ) } + + { ! Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( +

+ { __( 'You need to set your Stripe API keys in the Otter Dashboard.', 'otter-blocks' ) } + { ' ' } + { __( 'Visit Dashboard', 'otter-blocks' ) } +

+ ) } + + ) } + + { applyFilters( 'otter.blockConditions.controls', '', index, n, i, attributes.otterConditions, setAttributes, changeValue ) } + + { toggleVisibility.includes( i.type ) && ( + changeVisibility( e, index, n ) } + /> + ) } + + + + { ( 1 < group.length && n !== group.length - 1 ) && ( + + ) } + + ) ) } + + + + + { ( 1 < attributes.otterConditions.length && index !== attributes.otterConditions.length - 1 ) && ( + + ) } + + ); + }) } + + -

{ __( 'Display the block if…', 'otter-blocks' ) }

+ { applyFilters( 'otter.blockConditions.notices', '' ) } - { attributes.otterConditions && attributes.otterConditions.map( ( group, index ) => { - return ( - - removeGroup( index ) } - > - { group && group.map( ( i, n ) => ( - - condition.value === ( i.type || 'none' ) )?.help } - id={ `o-conditions-${ index }-${ n }` } - > - - - - { 'userRoles' === i.type && ( - changeArrayValue( roles, index, n, 'roles' ) } - __experimentalExpandOnFocus={ true } - __experimentalValidateInput={ newValue => Object.keys( window.themeisleGutenberg.userRoles ).includes( newValue ) } - /> - ) } - - { 'postAuthor' === i.type && ( - changeArrayValue( authors, index, n, 'authors' ) } - /> - ) } - - { 'postCategory' === i.type && ( - changeArrayValue( categories, index, n, 'categories' ) } - /> - ) } - - { 'postType' === i.type && ( - changeArrayValue( types, index, n, 'post_types' ) } - __experimentalExpandOnFocus={ true } - __experimentalValidateInput={ newValue => postTypes.includes( newValue ) } - /> - ) } - - { 'stripePurchaseHistory' === i.type && ( - - { Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( - changeValue( product, index, n, 'product' ) } - /> - ) } - - { ! Boolean( window.themeisleGutenberg.hasStripeAPI ) && ( -

- { __( 'You need to set your Stripe API keys in the Otter Dashboard.', 'otter-blocks' ) } - { ' ' } - { __( 'Visit Dashboard', 'otter-blocks' ) } -

- ) } - - ) } - - { applyFilters( 'otter.blockConditions.controls', '', index, n, i, attributes.otterConditions, setAttributes, changeValue ) } - - { toggleVisibility.includes( i.type ) && ( - changeVisibility( e, index, n ) } - /> - ) } - - - - { ( 1 < group.length && n !== group.length - 1 ) && ( - - ) } - - ) ) } - - - - - { ( 1 < attributes.otterConditions.length && index !== attributes.otterConditions.length - 1 ) && ( - - ) } - - ); - }) } - - - - { applyFilters( 'otter.blockConditions.notices', '' ) } - -
- { applyFilters( 'otter.feedback', '', 'conditions' ) } - { applyFilters( 'otter.poweredBy', '' ) } -
- - +
+ { applyFilters( 'otter.feedback', '', 'conditions' ) } + { applyFilters( 'otter.poweredBy', '' ) } +
+ ); }; diff --git a/src/blocks/plugins/conditions/index.js b/src/blocks/plugins/conditions/index.js index c08e51257..761788ec6 100644 --- a/src/blocks/plugins/conditions/index.js +++ b/src/blocks/plugins/conditions/index.js @@ -10,6 +10,8 @@ import { __ } from '@wordpress/i18n'; import { assign } from 'lodash'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; + import { createHigherOrderComponent } from '@wordpress/compose'; import { Fragment } from '@wordpress/element'; @@ -38,7 +40,14 @@ const BlockConditions = ( el, props ) => { { el } - + undefined !== props.attributes.otterConditions && Boolean( props.attributes.otterConditions?.length ) } + label={ __( 'Visibility Conditions', 'otter-blocks' ) } + onDeselect={ () => props.setAttributes({ otterConditions: undefined }) } + isShownByDefault={ false } + > + + ); }; diff --git a/src/blocks/plugins/otter-tools-inspector/index.tsx b/src/blocks/plugins/otter-tools-inspector/index.tsx index 7eea5a68b..3e84563eb 100644 --- a/src/blocks/plugins/otter-tools-inspector/index.tsx +++ b/src/blocks/plugins/otter-tools-inspector/index.tsx @@ -21,9 +21,6 @@ import { import './editor.scss'; import { useInspectorSlot } from '../../components/inspector-slot-fill/index.js'; -// @ts-ignore -const shouldAppear = Object.keys( window.themeisleGutenberg?.hasModule ).some( ( i: string ) => Boolean( window.themeisleGutenberg?.hasModule[ i ]) ); - const withConditions = createHigherOrderComponent( BlockEdit => { return props => { const Inspector = useInspectorSlot( props.name ); @@ -32,7 +29,7 @@ const withConditions = createHigherOrderComponent( BlockEdit => { - { ( props.isSelected && shouldAppear ) && ( + { props.isSelected && ( ) => { - const Inspector = useInspectorSlot( name ); - const [ containerOptions, setContainerOptions ] = useState([{ label: __( 'Screen', 'otter-blocks' ), value: 'o-sticky-scope-screen' @@ -411,43 +406,40 @@ const Edit = ({ }, [ clientId ]); return ( - - {/* @ts-ignore */} - +

+ { __( 'Set any block as Sticky, so that it sticks to another element on the page.', 'otter-blocks' ) } +

+ + -

- { __( 'Set any block as Sticky, so that it sticks to another element on the page.', 'otter-blocks' ) } -

- - - { __( 'Learn more about Sticky', 'otter-blocks' ) } - - - addOption( value, FILTER_OPTIONS.scope ) } - /> + { __( 'Learn more about Sticky', 'otter-blocks' ) } + - + addOption( value, FILTER_OPTIONS.scope ) } + /> - { applyFilters( 'otter.sticky.controls', , attributes, FILTER_OPTIONS, addOption ) } + - {/* @ts-ignore */} -
- { applyFilters( 'otter.feedback', '', 'sticky' ) } - { applyFilters( 'otter.poweredBy', '' ) } -
- - + { applyFilters( 'otter.sticky.controls', , attributes, FILTER_OPTIONS, addOption ) } + + {/* @ts-ignore */} +
+ { applyFilters( 'otter.feedback', '', 'sticky' ) } + { applyFilters( 'otter.poweredBy', '' ) } +
+ ); }; diff --git a/src/blocks/plugins/sticky/index.js b/src/blocks/plugins/sticky/index.js index ae85834f7..02aa1d027 100644 --- a/src/blocks/plugins/sticky/index.js +++ b/src/blocks/plugins/sticky/index.js @@ -5,11 +5,7 @@ import { __ } from '@wordpress/i18n'; import { hasBlockSupport } from '@wordpress/blocks'; -import { createHigherOrderComponent } from '@wordpress/compose'; - -import { select } from '@wordpress/data'; - -import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; @@ -23,54 +19,44 @@ import Edit from './edit'; const EXCEPTED_BLOCK_CONDITIONS = [ '-item', 'form-' ]; // Exclude sub-blocks -const withStickyExtension = createHigherOrderComponent( BlockEdit => { - return props => { - const hasCustomClassName = hasBlockSupport( - props.name, - 'customClassName', - true +const toggleSticky = ( + classes, + isSticky, + setAttributes +) => { + let className = classes?.filter( c => ! c.includes( 'o-sticky' ) ) || []; + + if ( ! isSticky ) { + className.push( 'o-sticky', 'o-sticky-scope-main-area', 'o-sticky-pos-top', 'o-sticky-bhvr-keep' ); + } + + className = className.join( ' ' ); + setAttributes({ className: '' !== className ? className : undefined }); +}; + +const StickyExtension = ( el, props ) => { + if ( hasBlockSupport( props.name, 'customClassName', true ) && ! EXCEPTED_BLOCK_CONDITIONS.some( cond => props.name?.includes( cond ) ) ) { + const classes = props.attributes?.className?.split( ' ' ); + const isSticky = classes?.includes( 'o-sticky' ) || false; + + return ( + + { el } + + isSticky } + label={ __( 'Transform to Sticky', 'otter-blocks' ) } + onSelect={ () => toggleSticky( classes, isSticky, props.setAttributes ) } + onDeselect={ () => toggleSticky( classes, isSticky, props.setAttributes ) } + isShownByDefault={ false } + > + { isSticky && } + + ); + } + return el; +}; - if ( hasCustomClassName && props.isSelected ) { - const classes = props.attributes?.className?.split( ' ' ); - const isSticky = classes?.includes( 'o-sticky' ) || false; - - const toggleSticky = () => { - let className = classes?.filter( c => ! c.includes( 'o-sticky' ) ) || []; - - if ( ! isSticky ) { - className.push( 'o-sticky', 'o-sticky-scope-main-area', 'o-sticky-pos-top', 'o-sticky-bhvr-keep' ); - } - - className = className.join( ' ' ); - props.setAttributes({ className }); - }; - - return ( - - - - { ( ! EXCEPTED_BLOCK_CONDITIONS.some( cond => props.name?.includes( cond ) ) && Boolean( window?.themeisleGutenberg?.isBlockEditor ) ) && ( - - ) } - - { props.attributes?.className?.includes( 'o-sticky' ) && ( - - ) } - - ); - } - - return ; - - }; -}, 'withStickyExtension' ); - -if ( select( 'core/editor' ) !== undefined ) { - addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/sticky-extension', withStickyExtension ); -} +addFilter( 'otter.blockTools', 'themeisle-gutenberg/sticky-extension', StickyExtension ); From 14ed07cd8c323c210799d09d167b363e3fef68c5 Mon Sep 17 00:00:00 2001 From: Hardeep Asrani Date: Sat, 24 Dec 2022 06:08:45 +0530 Subject: [PATCH 5/7] Set Priority --- src/animation/index.js | 2 +- src/blocks/plugins/conditions/index.js | 2 +- src/blocks/plugins/sticky/index.js | 2 +- src/css/index.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/animation/index.js b/src/animation/index.js index ecfc3ed61..44542b32b 100644 --- a/src/animation/index.js +++ b/src/animation/index.js @@ -72,7 +72,7 @@ const withInspectorControls = createHigherOrderComponent( BlockEdit => { }, 'withInspectorControl' ); if ( Boolean( window?.blocksAnimation?.hasOtter ) ) { - addFilter( 'otter.blockTools', 'themeisle-animations/with-inspector-controls', BlockAnimation ); + addFilter( 'otter.blockTools', 'themeisle-animations/with-inspector-controls', BlockAnimation, 1 ); } else { addFilter( 'editor.BlockEdit', 'themeisle-animations/with-inspector-controls', withInspectorControls ); } diff --git a/src/blocks/plugins/conditions/index.js b/src/blocks/plugins/conditions/index.js index 761788ec6..0214b543e 100644 --- a/src/blocks/plugins/conditions/index.js +++ b/src/blocks/plugins/conditions/index.js @@ -69,6 +69,6 @@ const withConditionsIndicator = createHigherOrderComponent( BlockListBlock => { if ( Boolean( window.themeisleGutenberg.hasModule.blockConditions ) ) { addFilter( 'blocks.registerBlockType', 'themeisle-gutenberg/conditions-register', addAttribute ); - addFilter( 'otter.blockTools', 'themeisle-gutenberg/conditions-inspector', BlockConditions ); + addFilter( 'otter.blockTools', 'themeisle-gutenberg/conditions-inspector', BlockConditions, 3 ); addFilter( 'editor.BlockListBlock', 'themeisle-gutenberg/contextual-indicators', withConditionsIndicator ); } diff --git a/src/blocks/plugins/sticky/index.js b/src/blocks/plugins/sticky/index.js index 02aa1d027..ef9568dbf 100644 --- a/src/blocks/plugins/sticky/index.js +++ b/src/blocks/plugins/sticky/index.js @@ -59,4 +59,4 @@ const StickyExtension = ( el, props ) => { return el; }; -addFilter( 'otter.blockTools', 'themeisle-gutenberg/sticky-extension', StickyExtension ); +addFilter( 'otter.blockTools', 'themeisle-gutenberg/sticky-extension', StickyExtension, 4 ); diff --git a/src/css/index.js b/src/css/index.js index 18cdf382b..2aadc8ab6 100644 --- a/src/css/index.js +++ b/src/css/index.js @@ -124,7 +124,7 @@ const withInspectorControls = createHigherOrderComponent( BlockEdit => { addFilter( 'blocks.registerBlockType', 'themeisle-custom-css/attribute', addAttribute ); if ( Boolean( window?.blocksCSS?.hasOtter ) ) { - addFilter( 'otter.blockTools', 'themeisle-custom-css/with-inspector-controls', BlockCSSWrapper ); + addFilter( 'otter.blockTools', 'themeisle-custom-css/with-inspector-controls', BlockCSSWrapper, 2 ); } else { addFilter( 'editor.BlockEdit', 'themeisle-custom-css/with-inspector-controls', withInspectorControls ); } From 52a7751eeddd293079361dd94f5e854e3e53a824 Mon Sep 17 00:00:00 2001 From: Hardeep Asrani Date: Tue, 27 Dec 2022 00:22:14 +0530 Subject: [PATCH 6/7] Bump minimum version --- plugins/blocks-animation/readme.md | 2 +- plugins/blocks-animation/readme.txt | 2 +- plugins/blocks-css/readme.md | 2 +- plugins/blocks-css/readme.txt | 2 +- plugins/blocks-export-import/readme.md | 2 +- plugins/blocks-export-import/readme.txt | 2 +- readme.md | 2 +- readme.txt | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/plugins/blocks-animation/readme.md b/plugins/blocks-animation/readme.md index ea2400f50..6a1d5a55f 100644 --- a/plugins/blocks-animation/readme.md +++ b/plugins/blocks-animation/readme.md @@ -1,7 +1,7 @@ # Blocks Animation: CSS Animations for Gutenberg Blocks # **Contributors:** [themeisle](https://profiles.wordpress.org/themeisle/), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani/), [mariamunteanu1](https://profiles.wordpress.org/mariamunteanu1/) **Tags:** gutenberg, block, block editor, editor, animation, animations, animate, styles, block animations -**Requires at least:** 5.4 +**Requires at least:** 5.9 **Tested up to:** 6.1 **Requires PHP:** 5.4 **Stable tag:** trunk diff --git a/plugins/blocks-animation/readme.txt b/plugins/blocks-animation/readme.txt index 77cd840a0..025648bba 100644 --- a/plugins/blocks-animation/readme.txt +++ b/plugins/blocks-animation/readme.txt @@ -1,7 +1,7 @@ === Blocks Animation: CSS Animations for Gutenberg Blocks === Contributors: themeisle, hardeepasrani, mariamunteanu1 Tags: gutenberg, block, block editor, editor, animation, animations, animate, styles, block animations -Requires at least: 5.4 +Requires at least: 5.9 Tested up to: 6.1 Requires PHP: 5.4 Stable tag: trunk diff --git a/plugins/blocks-css/readme.md b/plugins/blocks-css/readme.md index 981cbbfb4..9d7ff8df5 100644 --- a/plugins/blocks-css/readme.md +++ b/plugins/blocks-css/readme.md @@ -1,7 +1,7 @@ # Blocks CSS: CSS Editor for Gutenberg Blocks # **Contributors:** [themeisle](https://profiles.wordpress.org/themeisle/), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani/) **Tags:** gutenberg, block, css, css editor, blocks css -**Requires at least:** 5.2 +**Requires at least:** 5.9 **Tested up to:** 6.1 **Requires PHP:** 5.4 **Stable tag:** trunk diff --git a/plugins/blocks-css/readme.txt b/plugins/blocks-css/readme.txt index be3cf2f6b..4b0bcb4af 100644 --- a/plugins/blocks-css/readme.txt +++ b/plugins/blocks-css/readme.txt @@ -1,7 +1,7 @@ === Blocks CSS: CSS Editor for Gutenberg Blocks === Contributors: themeisle, hardeepasrani Tags: gutenberg, block, css, css editor, blocks css -Requires at least: 5.2 +Requires at least: 5.9 Tested up to: 6.1 Requires PHP: 5.4 Stable tag: trunk diff --git a/plugins/blocks-export-import/readme.md b/plugins/blocks-export-import/readme.md index 715837626..80fb31b46 100644 --- a/plugins/blocks-export-import/readme.md +++ b/plugins/blocks-export-import/readme.md @@ -1,7 +1,7 @@ # Blocks Export Import # **Contributors:** [themeisle](https://profiles.wordpress.org/themeisle/), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani/) **Tags:** gutenberg, block, blocks, export, import, exporter, importer, block exporter, block export, block import, block importer -**Requires at least:** 5.3 +**Requires at least:** 5.9 **Tested up to:** 6.1 **Requires PHP:** 5.4 **Stable tag:** trunk diff --git a/plugins/blocks-export-import/readme.txt b/plugins/blocks-export-import/readme.txt index 0de3e5ced..a2bbadae0 100644 --- a/plugins/blocks-export-import/readme.txt +++ b/plugins/blocks-export-import/readme.txt @@ -1,7 +1,7 @@ === Blocks Export Import === Contributors: themeisle, hardeepasrani Tags: gutenberg, block, blocks, export, import, exporter, importer, block exporter, block export, block import, block importer -Requires at least: 5.3 +Requires at least: 5.9 Tested up to: 6.1 Requires PHP: 5.4 Stable tag: trunk diff --git a/readme.md b/readme.md index 543ca66af..a92e99991 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # Otter - Gutenberg Blocks – Page Builder for Gutenberg Editor & FSE # **Contributors:** [themeisle](https://profiles.wordpress.org/themeisle/), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani/), [soarerobertdaniel7](https://profiles.wordpress.org/soarerobertdaniel7/), [mariamunteanu1](https://profiles.wordpress.org/mariamunteanu1/), [arinat](https://profiles.wordpress.org/arinat/), [uriahs-victor](https://profiles.wordpress.org/uriahs-victor/), [john_pixle](https://profiles.wordpress.org/john_pixle/), [wildmisha](https://profiles.wordpress.org/wildmisha/), [irinelenache](https://profiles.wordpress.org/irinelenache/) **Tags:** gutenberg blocks, gutenberg, block,post grid block, google map block, columns block, advanced columns, section, row, layout, templates, lottie, progress bar, product review, review, accordion, tabs, page builder, countdown, contact form, masonry, popup, review builder -**Requires at least:** 5.8 +**Requires at least:** 5.9 **Tested up to:** 6.1 **Requires PHP:** 5.4 **Stable tag:** trunk diff --git a/readme.txt b/readme.txt index 2f79ae16c..b54ab4df6 100644 --- a/readme.txt +++ b/readme.txt @@ -1,7 +1,7 @@ === Otter - Gutenberg Blocks – Page Builder for Gutenberg Editor & FSE === Contributors: themeisle, hardeepasrani, soarerobertdaniel7, mariamunteanu1, arinat, uriahs-victor, john_pixle, wildmisha, irinelenache Tags: gutenberg blocks, gutenberg, block,post grid block, google map block, columns block, advanced columns, section, row, layout, templates, lottie, progress bar, product review, review, accordion, tabs, page builder, countdown, contact form, masonry, popup, review builder -Requires at least: 5.8 +Requires at least: 5.9 Tested up to: 6.1 Requires PHP: 5.4 Stable tag: trunk From addc059d2a2bd0b7dc252d1cb0f7bb5bb22d1fcb Mon Sep 17 00:00:00 2001 From: Hardeep Asrani Date: Tue, 3 Jan 2023 14:02:05 +0530 Subject: [PATCH 7/7] Make sure it works with FSE --- inc/class-blocks-export-import.php | 6 -- src/blocks/plugins/copy-paste/index.js | 79 +++++++++++++------------- src/export-import/exporter.js | 19 +++++-- 3 files changed, 54 insertions(+), 50 deletions(-) diff --git a/inc/class-blocks-export-import.php b/inc/class-blocks-export-import.php index b6f777d9b..c858ac5f2 100644 --- a/inc/class-blocks-export-import.php +++ b/inc/class-blocks-export-import.php @@ -38,12 +38,6 @@ public function init() { * @access public */ public function enqueue_editor_assets() { - $current_screen = get_current_screen(); - - if ( 'post' !== $current_screen->base ) { - return; - } - $asset_file = include BLOCKS_EXPORT_IMPORT_PATH . '/build/export-import/index.asset.php'; wp_enqueue_script( diff --git a/src/blocks/plugins/copy-paste/index.js b/src/blocks/plugins/copy-paste/index.js index 23238a835..dfb641c85 100644 --- a/src/blocks/plugins/copy-paste/index.js +++ b/src/blocks/plugins/copy-paste/index.js @@ -5,7 +5,12 @@ import { __ } from '@wordpress/i18n'; import { pick } from 'lodash'; -import { KeyboardShortcuts } from '@wordpress/components'; +import { BlockSettingsMenuControls } from '@wordpress/block-editor'; + +import { + MenuItem, + KeyboardShortcuts +} from '@wordpress/components'; import { createHigherOrderComponent } from '@wordpress/compose'; @@ -14,8 +19,6 @@ import { dispatch } from '@wordpress/data'; -import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post'; - import { Fragment } from '@wordpress/element'; import { addFilter } from '@wordpress/hooks'; @@ -135,42 +138,44 @@ const iconTextWrapper = ( text ) => ( const CopyPasteComponent = ( ) => { return ( - { window?.themeisleGutenberg?.isBlockEditor && ( - - - - - - - { ! copyPaste.isExpired && ( - - ) } - - ) } + + + + { () => ( + + + { __( 'Copy Style', 'otter-blocks' ) } + + + { ! copyPaste.isExpired && ( + + { __( 'Paste Style', 'otter-blocks' ) } + + ) } + + ) } + ); }; - const withCopyPasteExtension = createHigherOrderComponent( BlockEdit => { return ( props ) => { @@ -188,6 +193,4 @@ const withCopyPasteExtension = createHigherOrderComponent( BlockEdit => { }; }, 'withCopyPasteExtension' ); -if ( select?.( 'core/editor' ) !== undefined ) { - addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/copy-paste-extension', withCopyPasteExtension ); -} +addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/copy-paste-extension', withCopyPasteExtension ); diff --git a/src/export-import/exporter.js b/src/export-import/exporter.js index a17f21bb3..36ce02ea6 100644 --- a/src/export-import/exporter.js +++ b/src/export-import/exporter.js @@ -14,12 +14,14 @@ import apiFetch from '@wordpress/api-fetch'; import { serialize } from '@wordpress/blocks'; +import { MenuItem } from '@wordpress/components'; + import { useDispatch, useSelect } from '@wordpress/data'; -import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post'; +import { BlockSettingsMenuControls } from '@wordpress/block-editor'; const BlocksExporter = () => { const { blocks, count } = useSelect( ( select ) => { @@ -118,11 +120,16 @@ const BlocksExporter = () => { }; return ( - + + { () => ( + + { __( 'Export as JSON', 'otter-blocks' ) } + + ) } + ); };