| 1 |
import './reveal'; |
| 2 |
import './pro-effects'; |
| 3 |
|
| 4 |
import { BlockControls, InspectorControls } from '@wordpress/block-editor'; |
| 5 |
import { hasBlockSupport } from '@wordpress/blocks'; |
| 6 |
import { |
| 7 |
__experimentalToolsPanel as ExperimentalToolsPanel, |
| 8 |
__stableToolsPanel as StableToolsPanel, |
| 9 |
Button, |
| 10 |
MenuGroup, |
| 11 |
ToolbarDropdownMenu, |
| 12 |
} from '@wordpress/components'; |
| 13 |
import { addFilter } from '@wordpress/hooks'; |
| 14 |
import { __ } from '@wordpress/i18n'; |
| 15 |
|
| 16 |
import ApplyFilters from '../../components/apply-filters'; |
| 17 |
import getIcon from '../../utils/get-icon'; |
| 18 |
|
| 19 |
const ToolsPanel = StableToolsPanel || ExperimentalToolsPanel; |
| 20 |
|
| 21 |
/** |
| 22 |
* Add inspector controls. |
| 23 |
* |
| 24 |
* @param original |
| 25 |
* @param root0 |
| 26 |
* @param root0.props |
| 27 |
*/ |
| 28 |
function GhostKitExtensionEffectsInspector(original, { props }) { |
| 29 |
const { name, attributes, setAttributes } = props; |
| 30 |
|
| 31 |
const hasEffectsSupport = hasBlockSupport(name, ['ghostkit', 'effects']); |
| 32 |
|
| 33 |
if (!hasEffectsSupport) { |
| 34 |
return original; |
| 35 |
} |
| 36 |
|
| 37 |
return ( |
| 38 |
<> |
| 39 |
{original} |
| 40 |
<InspectorControls group="styles"> |
| 41 |
<ToolsPanel |
| 42 |
label={ |
| 43 |
<> |
| 44 |
<span className="ghostkit-ext-icon"> |
| 45 |
{getIcon('extension-sr')} |
| 46 |
</span> |
| 47 |
<span>{__('Effects', 'ghostkit')}</span> |
| 48 |
</> |
| 49 |
} |
| 50 |
resetAll={() => { |
| 51 |
const ghostkitData = { |
| 52 |
...(attributes?.ghostkit || {}), |
| 53 |
}; |
| 54 |
|
| 55 |
if (typeof ghostkitData?.effects !== 'undefined') { |
| 56 |
delete ghostkitData?.effects; |
| 57 |
|
| 58 |
setAttributes({ ghostkit: ghostkitData }); |
| 59 |
} |
| 60 |
}} |
| 61 |
> |
| 62 |
<div className="ghostkit-tools-panel-effects"> |
| 63 |
<ApplyFilters |
| 64 |
name="ghostkit.extension.effects.tools" |
| 65 |
props={props} |
| 66 |
/> |
| 67 |
</div> |
| 68 |
</ToolsPanel> |
| 69 |
</InspectorControls> |
| 70 |
</> |
| 71 |
); |
| 72 |
} |
| 73 |
|
| 74 |
/** |
| 75 |
* Add toolbar controls. |
| 76 |
* |
| 77 |
* @param original |
| 78 |
* @param root0 |
| 79 |
* @param root0.props |
| 80 |
*/ |
| 81 |
function GhostKitExtensionEffectsToolbar(original, { props }) { |
| 82 |
const { name, attributes, setAttributes } = props; |
| 83 |
|
| 84 |
const hasEffectsSupport = hasBlockSupport(name, ['ghostkit', 'effects']); |
| 85 |
|
| 86 |
if (!hasEffectsSupport) { |
| 87 |
return original; |
| 88 |
} |
| 89 |
|
| 90 |
const hasEffects = attributes?.ghostkit?.effects; |
| 91 |
|
| 92 |
if (!hasEffects) { |
| 93 |
return original; |
| 94 |
} |
| 95 |
|
| 96 |
return ( |
| 97 |
<> |
| 98 |
{original} |
| 99 |
<BlockControls group="other"> |
| 100 |
<ToolbarDropdownMenu |
| 101 |
icon={getIcon('extension-sr')} |
| 102 |
label={__('Effects', 'ghostkit')} |
| 103 |
menuProps={{ |
| 104 |
style: { width: '260px' }, |
| 105 |
}} |
| 106 |
popoverProps={{ focusOnMount: false }} |
| 107 |
> |
| 108 |
{() => ( |
| 109 |
<> |
| 110 |
<MenuGroup> |
| 111 |
{__( |
| 112 |
'There are effects added to the current block. To change these options open the "Effects" block settings panel.', |
| 113 |
'ghostkit' |
| 114 |
)} |
| 115 |
</MenuGroup> |
| 116 |
<MenuGroup> |
| 117 |
{__( |
| 118 |
'Reset all effects of the current block:', |
| 119 |
'ghostkit' |
| 120 |
)} |
| 121 |
<Button |
| 122 |
variant="link" |
| 123 |
onClick={() => { |
| 124 |
const ghostkitData = { |
| 125 |
...(attributes?.ghostkit || {}), |
| 126 |
}; |
| 127 |
|
| 128 |
if ( |
| 129 |
typeof ghostkitData?.effects !== |
| 130 |
'undefined' |
| 131 |
) { |
| 132 |
delete ghostkitData?.effects; |
| 133 |
|
| 134 |
setAttributes({ |
| 135 |
ghostkit: ghostkitData, |
| 136 |
}); |
| 137 |
} |
| 138 |
}} |
| 139 |
> |
| 140 |
{__('Reset All', 'ghostkit')} |
| 141 |
</Button> |
| 142 |
</MenuGroup> |
| 143 |
</> |
| 144 |
)} |
| 145 |
</ToolbarDropdownMenu> |
| 146 |
</BlockControls> |
| 147 |
</> |
| 148 |
); |
| 149 |
} |
| 150 |
|
| 151 |
// Init filters. |
| 152 |
addFilter( |
| 153 |
'ghostkit.editor.extensions', |
| 154 |
'ghostkit/extension/effects/inspector', |
| 155 |
GhostKitExtensionEffectsInspector, |
| 156 |
11 |
| 157 |
); |
| 158 |
addFilter( |
| 159 |
'ghostkit.editor.extensions', |
| 160 |
'ghostkit/extension/effects/toolbar', |
| 161 |
GhostKitExtensionEffectsToolbar |
| 162 |
); |
| 163 |
|
