@wordpress/block-editor 11.6.0 → 11.8.0

package/build/components/global-styles/effects-panel.js

@@ -0,0 +1,244 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EffectsPanel;
+exports.useHasEffectsPanel = useHasEffectsPanel;
+
+var _element = require("@wordpress/element");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _icons = require("@wordpress/icons");
+
+var _utils = require("./utils");
+
+var _object = require("../../utils/object");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function useHasEffectsPanel(settings) {
+  const hasShadowControl = useHasShadowControl(settings);
+  return hasShadowControl;
+}
+
+function useHasShadowControl(settings) {
+  return !!(settings !== null && settings !== void 0 && settings.shadow);
+}
+
+function EffectsToolsPanel(_ref) {
+  let {
+    resetAllFilter,
+    onChange,
+    value,
+    panelId,
+    children
+  } = _ref;
+
+  const resetAll = () => {
+    const updatedValue = resetAllFilter(value);
+    onChange(updatedValue);
+  };
+
+  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    label: (0, _i18n.__)('Effects'),
+    resetAll: resetAll,
+    panelId: panelId
+  }, children);
+}
+
+const DEFAULT_CONTROLS = {
+  shadow: true
+};
+
+function EffectsPanel(_ref2) {
+  let {
+    as: Wrapper = EffectsToolsPanel,
+    value,
+    onChange,
+    inheritedValue = value,
+    settings,
+    panelId,
+    defaultControls = DEFAULT_CONTROLS
+  } = _ref2;
+
+  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
+    settings
+  }, '', rawValue); // Shadow
+
+
+  const hasShadowEnabled = useHasShadowControl(settings);
+  const shadow = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : inheritedValue.shadow);
+
+  const setShadow = newValue => {
+    onChange((0, _object.immutableSet)(value, ['shadow'], newValue));
+  };
+
+  const hasShadow = () => !!(value !== null && value !== void 0 && value.shadow);
+
+  const resetShadow = () => setShadow(undefined);
+
+  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+    return { ...previousValue,
+      shadow: undefined
+    };
+  }, []);
+  return (0, _element.createElement)(Wrapper, {
+    resetAllFilter: resetAllFilter,
+    value: value,
+    onChange: onChange,
+    panelId: panelId
+  }, hasShadowEnabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    label: (0, _i18n.__)('Shadow'),
+    hasValue: hasShadow,
+    onDeselect: resetShadow,
+    isShownByDefault: defaultControls.shadow,
+    panelId: panelId
+  }, (0, _element.createElement)(_components.__experimentalItemGroup, {
+    isBordered: true,
+    isSeparated: true
+  }, (0, _element.createElement)(ShadowPopover, {
+    shadow: shadow,
+    onShadowChange: setShadow,
+    settings: settings
+  }))));
+}
+
+const ShadowPopover = _ref3 => {
+  let {
+    shadow,
+    onShadowChange,
+    settings
+  } = _ref3;
+  const popoverProps = {
+    placement: 'left-start',
+    offset: 36,
+    shift: true
+  };
+  return (0, _element.createElement)(_components.Dropdown, {
+    popoverProps: popoverProps,
+    className: "block-editor-global-styles-effects-panel__shadow-dropdown",
+    renderToggle: renderShadowToggle(),
+    renderContent: () => (0, _element.createElement)(_components.__experimentalDropdownContentWrapper, {
+      paddingSize: "medium"
+    }, (0, _element.createElement)(ShadowPopoverContainer, {
+      shadow: shadow,
+      onShadowChange: onShadowChange,
+      settings: settings
+    }))
+  });
+};
+
+function renderShadowToggle() {
+  return _ref4 => {
+    let {
+      onToggle,
+      isOpen
+    } = _ref4;
+    const toggleProps = {
+      onClick: onToggle,
+      className: (0, _classnames.default)({
+        'is-open': isOpen
+      }),
+      'aria-expanded': isOpen
+    };
+    return (0, _element.createElement)(_components.Button, toggleProps, (0, _element.createElement)(_components.__experimentalHStack, {
+      justify: "flex-start"
+    }, (0, _element.createElement)(_icons.Icon, {
+      className: "block-editor-global-styles-effects-panel__toggle-icon",
+      icon: _icons.shadow,
+      size: 24
+    }), (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Shadow'))));
+  };
+}
+
+function ShadowPopoverContainer(_ref5) {
+  var _settings$shadow, _settings$shadow$pres, _settings$shadow2, _settings$shadow2$pre, _settings$shadow3;
+
+  let {
+    shadow,
+    onShadowChange,
+    settings
+  } = _ref5;
+  const defaultShadows = settings === null || settings === void 0 ? void 0 : (_settings$shadow = settings.shadow) === null || _settings$shadow === void 0 ? void 0 : (_settings$shadow$pres = _settings$shadow.presets) === null || _settings$shadow$pres === void 0 ? void 0 : _settings$shadow$pres.default;
+  const themeShadows = settings === null || settings === void 0 ? void 0 : (_settings$shadow2 = settings.shadow) === null || _settings$shadow2 === void 0 ? void 0 : (_settings$shadow2$pre = _settings$shadow2.presets) === null || _settings$shadow2$pre === void 0 ? void 0 : _settings$shadow2$pre.theme;
+  const defaultPresetsEnabled = settings === null || settings === void 0 ? void 0 : (_settings$shadow3 = settings.shadow) === null || _settings$shadow3 === void 0 ? void 0 : _settings$shadow3.defaultPresets;
+  const shadows = [...(defaultPresetsEnabled ? defaultShadows : []), ...(themeShadows || [])];
+  return (0, _element.createElement)("div", {
+    className: "block-editor-global-styles-effects-panel__shadow-popover-container"
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 4
+  }, (0, _element.createElement)(_components.__experimentalHeading, {
+    level: 5
+  }, (0, _i18n.__)('Shadow')), (0, _element.createElement)(ShadowPresets, {
+    presets: shadows,
+    activeShadow: shadow,
+    onSelect: onShadowChange
+  })));
+}
+
+function ShadowPresets(_ref6) {
+  let {
+    presets,
+    activeShadow,
+    onSelect
+  } = _ref6;
+  return !presets ? null : (0, _element.createElement)(_components.__experimentalGrid, {
+    columns: 6,
+    gap: 0,
+    align: "center",
+    justify: "center"
+  }, presets.map(_ref7 => {
+    let {
+      name,
+      slug,
+      shadow
+    } = _ref7;
+    return (0, _element.createElement)(ShadowIndicator, {
+      key: slug,
+      label: name,
+      isActive: shadow === activeShadow,
+      onSelect: () => onSelect(shadow === activeShadow ? undefined : shadow),
+      shadow: shadow
+    });
+  }));
+}
+
+function ShadowIndicator(_ref8) {
+  let {
+    label,
+    isActive,
+    onSelect,
+    shadow
+  } = _ref8;
+  return (0, _element.createElement)("div", {
+    className: "block-editor-global-styles-effects-panel__shadow-indicator-wrapper"
+  }, (0, _element.createElement)(_components.Button, {
+    className: "block-editor-global-styles-effects-panel__shadow-indicator",
+    onClick: onSelect,
+    label: label,
+    style: {
+      boxShadow: shadow
+    },
+    showTooltip: true
+  }, isActive && (0, _element.createElement)(_icons.Icon, {
+    icon: _icons.check
+  })));
+}
+//# sourceMappingURL=effects-panel.js.map

package/build/components/global-styles/effects-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/global-styles/effects-panel.js"],"names":["useHasEffectsPanel","settings","hasShadowControl","useHasShadowControl","shadow","EffectsToolsPanel","resetAllFilter","onChange","value","panelId","children","resetAll","updatedValue","DEFAULT_CONTROLS","EffectsPanel","as","Wrapper","inheritedValue","defaultControls","decodeValue","rawValue","hasShadowEnabled","setShadow","newValue","hasShadow","resetShadow","undefined","previousValue","ShadowPopover","onShadowChange","popoverProps","placement","offset","shift","renderShadowToggle","onToggle","isOpen","toggleProps","onClick","className","shadowIcon","ShadowPopoverContainer","defaultShadows","presets","default","themeShadows","theme","defaultPresetsEnabled","defaultPresets","shadows","ShadowPresets","activeShadow","onSelect","map","name","slug","ShadowIndicator","label","isActive","boxShadow","check"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalGrid as Grid,\n\t__experimentalHeading as Heading,\n\tFlexItem,\n\tDropdown,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\nimport { shadow as shadowIcon, Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getValueFromVariable } from './utils';\nimport { immutableSet } from '../../utils/object';\n\nexport function useHasEffectsPanel( settings ) {\n\tconst hasShadowControl = useHasShadowControl( settings );\n\treturn hasShadowControl;\n}\n\nfunction useHasShadowControl( settings ) {\n\treturn !! settings?.shadow;\n}\n\nfunction EffectsToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n} ) {\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Effects' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tshadow: true,\n};\n\nexport default function EffectsPanel( {\n\tas: Wrapper = EffectsToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n} ) {\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\n\t// Shadow\n\tconst hasShadowEnabled = useHasShadowControl( settings );\n\tconst shadow = decodeValue( inheritedValue?.shadow );\n\tconst setShadow = ( newValue ) => {\n\t\tonChange( immutableSet( value, [ 'shadow' ], newValue ) );\n\t};\n\tconst hasShadow = () => !! value?.shadow;\n\tconst resetShadow = () => setShadow( undefined );\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tshadow: undefined,\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ hasShadowEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Shadow' ) }\n\t\t\t\t\thasValue={ hasShadow }\n\t\t\t\t\tonDeselect={ resetShadow }\n\t\t\t\t\tisShownByDefault={ defaultControls.shadow }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\t\tonShadowChange={ setShadow }\n\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ItemGroup>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n\nconst ShadowPopover = ( { shadow, onShadowChange, settings } ) => {\n\tconst popoverProps = {\n\t\tplacement: 'left-start',\n\t\toffset: 36,\n\t\tshift: true,\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName=\"block-editor-global-styles-effects-panel__shadow-dropdown\"\n\t\t\trenderToggle={ renderShadowToggle() }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t\t<ShadowPopoverContainer\n\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\tonShadowChange={ onShadowChange }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nfunction renderShadowToggle() {\n\treturn ( { onToggle, isOpen } ) => {\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames( { 'is-open': isOpen } ),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclassName=\"block-editor-global-styles-effects-panel__toggle-icon\"\n\t\t\t\t\t\ticon={ shadowIcon }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t/>\n\t\t\t\t\t<FlexItem>{ __( 'Shadow' ) }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t);\n\t};\n}\n\nfunction ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {\n\tconst defaultShadows = settings?.shadow?.presets?.default;\n\tconst themeShadows = settings?.shadow?.presets?.theme;\n\tconst defaultPresetsEnabled = settings?.shadow?.defaultPresets;\n\n\tconst shadows = [\n\t\t...( defaultPresetsEnabled ? defaultShadows : [] ),\n\t\t...( themeShadows || [] ),\n\t];\n\n\treturn (\n\t\t<div className=\"block-editor-global-styles-effects-panel__shadow-popover-container\">\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>\n\t\t\t\t<ShadowPresets\n\t\t\t\t\tpresets={ shadows }\n\t\t\t\t\tactiveShadow={ shadow }\n\t\t\t\t\tonSelect={ onShadowChange }\n\t\t\t\t/>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nfunction ShadowPresets( { presets, activeShadow, onSelect } ) {\n\treturn ! presets ? null : (\n\t\t<Grid columns={ 6 } gap={ 0 } align=\"center\" justify=\"center\">\n\t\t\t{ presets.map( ( { name, slug, shadow } ) => (\n\t\t\t\t<ShadowIndicator\n\t\t\t\t\tkey={ slug }\n\t\t\t\t\tlabel={ name }\n\t\t\t\t\tisActive={ shadow === activeShadow }\n\t\t\t\t\tonSelect={ () =>\n\t\t\t\t\t\tonSelect( shadow === activeShadow ? undefined : shadow )\n\t\t\t\t\t}\n\t\t\t\t\tshadow={ shadow }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n\nfunction ShadowIndicator( { label, isActive, onSelect, shadow } ) {\n\treturn (\n\t\t<div className=\"block-editor-global-styles-effects-panel__shadow-indicator-wrapper\">\n\t\t\t<Button\n\t\t\t\tclassName=\"block-editor-global-styles-effects-panel__shadow-indicator\"\n\t\t\t\tonClick={ onSelect }\n\t\t\t\tlabel={ label }\n\t\t\t\tstyle={ { boxShadow: shadow } }\n\t\t\t\tshowTooltip\n\t\t\t>\n\t\t\t\t{ isActive && <Icon icon={ check } /> }\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"]}

package/build/components/global-styles/filters-panel.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FiltersPanel;
+exports.useHasFiltersPanel = useHasFiltersPanel;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _utils = require("./utils");
+
+var _object = require("../../utils/object");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const EMPTY_ARRAY = [];
+
+function useMultiOriginColorPresets(settings, _ref) {
+  var _settings$color, _settings$color2, _settings$color2$pres, _settings$color3, _settings$color3$pres, _settings$color4, _settings$color4$pres;
+
+  let {
+    presetSetting,
+    defaultSetting
+  } = _ref;
+  const disableDefault = !(settings !== null && settings !== void 0 && (_settings$color = settings.color) !== null && _settings$color !== void 0 && _settings$color[defaultSetting]);
+  const userPresets = (settings === null || settings === void 0 ? void 0 : (_settings$color2 = settings.color) === null || _settings$color2 === void 0 ? void 0 : (_settings$color2$pres = _settings$color2[presetSetting]) === null || _settings$color2$pres === void 0 ? void 0 : _settings$color2$pres.custom) || EMPTY_ARRAY;
+  const themePresets = (settings === null || settings === void 0 ? void 0 : (_settings$color3 = settings.color) === null || _settings$color3 === void 0 ? void 0 : (_settings$color3$pres = _settings$color3[presetSetting]) === null || _settings$color3$pres === void 0 ? void 0 : _settings$color3$pres.theme) || EMPTY_ARRAY;
+  const defaultPresets = (settings === null || settings === void 0 ? void 0 : (_settings$color4 = settings.color) === null || _settings$color4 === void 0 ? void 0 : (_settings$color4$pres = _settings$color4[presetSetting]) === null || _settings$color4$pres === void 0 ? void 0 : _settings$color4$pres.default) || EMPTY_ARRAY;
+  return (0, _element.useMemo)(() => [...userPresets, ...themePresets, ...(disableDefault ? EMPTY_ARRAY : defaultPresets)], [disableDefault, userPresets, themePresets, defaultPresets]);
+}
+
+function useHasFiltersPanel(settings) {
+  const hasDuotone = useHasDuotoneControl(settings);
+  return hasDuotone;
+}
+
+function useHasDuotoneControl(settings) {
+  return settings.color.customDuotone || settings.color.defaultDuotone;
+}
+
+function FiltersToolsPanel(_ref2) {
+  let {
+    resetAllFilter,
+    onChange,
+    value,
+    panelId,
+    children
+  } = _ref2;
+
+  const resetAll = () => {
+    const updatedValue = resetAllFilter(value);
+    onChange(updatedValue);
+  };
+
+  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    label: (0, _i18n.__)('Filters'),
+    resetAll: resetAll,
+    panelId: panelId
+  }, children);
+}
+
+const DEFAULT_CONTROLS = {
+  duotone: true
+};
+
+function FiltersPanel(_ref3) {
+  var _inheritedValue$filte;
+
+  let {
+    as: Wrapper = FiltersToolsPanel,
+    value,
+    onChange,
+    inheritedValue = value,
+    settings,
+    panelId,
+    defaultControls = DEFAULT_CONTROLS
+  } = _ref3;
+
+  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
+    settings
+  }, '', rawValue); // Duotone
+
+
+  const hasDuotoneEnabled = useHasDuotoneControl(settings);
+  const duotonePalette = useMultiOriginColorPresets(settings, {
+    presetSetting: 'duotone',
+    defaultSetting: 'defaultDuotone'
+  });
+  const colorPalette = useMultiOriginColorPresets(settings, {
+    presetSetting: 'palette',
+    defaultSetting: 'defaultPalette'
+  });
+  const duotone = decodeValue(inheritedValue === null || inheritedValue === void 0 ? void 0 : (_inheritedValue$filte = inheritedValue.filter) === null || _inheritedValue$filte === void 0 ? void 0 : _inheritedValue$filte.duotone);
+
+  const setDuotone = newValue => {
+    const duotonePreset = duotonePalette.find(_ref4 => {
+      let {
+        colors
+      } = _ref4;
+      return colors === newValue;
+    });
+    const settedValue = duotonePreset ? `var:preset|duotone|${duotonePreset.slug}` : newValue;
+    onChange((0, _object.immutableSet)(value, ['filter', 'duotone'], settedValue));
+  };
+
+  const hasDuotone = () => {
+    var _value$filter;
+
+    return !!(value !== null && value !== void 0 && (_value$filter = value.filter) !== null && _value$filter !== void 0 && _value$filter.duotone);
+  };
+
+  const resetDuotone = () => setDuotone(undefined);
+
+  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+    return { ...previousValue,
+      filter: { ...previousValue.filter,
+        duotone: undefined
+      }
+    };
+  }, []);
+  return (0, _element.createElement)(Wrapper, {
+    resetAllFilter: resetAllFilter,
+    value: value,
+    onChange: onChange,
+    panelId: panelId
+  }, hasDuotoneEnabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    label: (0, _i18n.__)('Duotone'),
+    hasValue: hasDuotone,
+    onDeselect: resetDuotone,
+    isShownByDefault: defaultControls.duotone,
+    panelId: panelId
+  }, (0, _element.createElement)(_components.__experimentalVStack, null, (0, _element.createElement)("p", null, (0, _i18n.__)('Create a two-tone color effect without losing your original image.')), (0, _element.createElement)(_components.DuotonePicker, {
+    colorPalette: colorPalette,
+    duotonePalette: duotonePalette,
+    disableCustomColors: true,
+    disableCustomDuotone: true,
+    value: duotone,
+    onChange: setDuotone
+  }))));
+}
+//# sourceMappingURL=filters-panel.js.map

package/build/components/global-styles/filters-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/global-styles/filters-panel.js"],"names":["EMPTY_ARRAY","useMultiOriginColorPresets","settings","presetSetting","defaultSetting","disableDefault","color","userPresets","custom","themePresets","theme","defaultPresets","default","useHasFiltersPanel","hasDuotone","useHasDuotoneControl","customDuotone","defaultDuotone","FiltersToolsPanel","resetAllFilter","onChange","value","panelId","children","resetAll","updatedValue","DEFAULT_CONTROLS","duotone","FiltersPanel","as","Wrapper","inheritedValue","defaultControls","decodeValue","rawValue","hasDuotoneEnabled","duotonePalette","colorPalette","filter","setDuotone","newValue","duotonePreset","find","colors","settedValue","slug","resetDuotone","undefined","previousValue"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValueFromVariable } from './utils';\nimport { immutableSet } from '../../utils/object';\n\nconst EMPTY_ARRAY = [];\nfunction useMultiOriginColorPresets(\n\tsettings,\n\t{ presetSetting, defaultSetting }\n) {\n\tconst disableDefault = ! settings?.color?.[ defaultSetting ];\n\tconst userPresets =\n\t\tsettings?.color?.[ presetSetting ]?.custom || EMPTY_ARRAY;\n\tconst themePresets =\n\t\tsettings?.color?.[ presetSetting ]?.theme || EMPTY_ARRAY;\n\tconst defaultPresets =\n\t\tsettings?.color?.[ presetSetting ]?.default || EMPTY_ARRAY;\n\treturn useMemo(\n\t\t() => [\n\t\t\t...userPresets,\n\t\t\t...themePresets,\n\t\t\t...( disableDefault ? EMPTY_ARRAY : defaultPresets ),\n\t\t],\n\t\t[ disableDefault, userPresets, themePresets, defaultPresets ]\n\t);\n}\n\nexport function useHasFiltersPanel( settings ) {\n\tconst hasDuotone = useHasDuotoneControl( settings );\n\n\treturn hasDuotone;\n}\n\nfunction useHasDuotoneControl( settings ) {\n\treturn settings.color.customDuotone || settings.color.defaultDuotone;\n}\n\nfunction FiltersToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n} ) {\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Filters' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tduotone: true,\n};\n\nexport default function FiltersPanel( {\n\tas: Wrapper = FiltersToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n} ) {\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\n\t// Duotone\n\tconst hasDuotoneEnabled = useHasDuotoneControl( settings );\n\tconst duotonePalette = useMultiOriginColorPresets( settings, {\n\t\tpresetSetting: 'duotone',\n\t\tdefaultSetting: 'defaultDuotone',\n\t} );\n\tconst colorPalette = useMultiOriginColorPresets( settings, {\n\t\tpresetSetting: 'palette',\n\t\tdefaultSetting: 'defaultPalette',\n\t} );\n\tconst duotone = decodeValue( inheritedValue?.filter?.duotone );\n\tconst setDuotone = ( newValue ) => {\n\t\tconst duotonePreset = duotonePalette.find( ( { colors } ) => {\n\t\t\treturn colors === newValue;\n\t\t} );\n\t\tconst settedValue = duotonePreset\n\t\t\t? `var:preset|duotone|${ duotonePreset.slug }`\n\t\t\t: newValue;\n\t\tonChange( immutableSet( value, [ 'filter', 'duotone' ], settedValue ) );\n\t};\n\tconst hasDuotone = () => !! value?.filter?.duotone;\n\tconst resetDuotone = () => setDuotone( undefined );\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tfilter: {\n\t\t\t\t...previousValue.filter,\n\t\t\t\tduotone: undefined,\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ hasDuotoneEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Duotone' ) }\n\t\t\t\t\thasValue={ hasDuotone }\n\t\t\t\t\tonDeselect={ resetDuotone }\n\t\t\t\t\tisShownByDefault={ defaultControls.duotone }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<VStack>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\tdisableCustomDuotone={ true }\n\t\t\t\t\t\t\tvalue={ duotone }\n\t\t\t\t\t\t\tonChange={ setDuotone }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"]}

package/build/components/global-styles/get-block-css-selector.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlockCSSSelector = getBlockCSSSelector;
+
+var _lodash = require("lodash");
+
+var _utils = require("./utils");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Determine the CSS selector for the block type and target provided, returning
+ * it if available.
+ *
+ * @param {import('@wordpress/blocks').Block} blockType        The block's type.
+ * @param {string|string[]}                   target           The desired selector's target e.g. `root`, delimited string, or array path.
+ * @param {Object}                            options          Options object.
+ * @param {boolean}                           options.fallback Whether or not to fallback to broader selector.
+ *
+ * @return {?string} The CSS selector or `null` if no selector available.
+ */
+function getBlockCSSSelector(blockType) {
+  let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'root';
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  if (!target) {
+    return null;
+  }
+
+  const {
+    fallback = false
+  } = options;
+  const {
+    name,
+    selectors,
+    supports
+  } = blockType;
+  const hasSelectors = !(0, _lodash.isEmpty)(selectors);
+  const path = Array.isArray(target) ? target.join('.') : target; // Root selector.
+  // Calculated before returning as it can be used as a fallback for feature
+  // selectors later on.
+
+  let rootSelector = null;
+
+  if (hasSelectors && selectors.root) {
+    // Use the selectors API if available.
+    rootSelector = selectors === null || selectors === void 0 ? void 0 : selectors.root;
+  } else if (supports !== null && supports !== void 0 && supports.__experimentalSelector) {
+    // Use the old experimental selector supports property if set.
+    rootSelector = supports.__experimentalSelector;
+  } else {
+    // If no root selector found, generate default block class selector.
+    rootSelector = '.wp-block-' + name.replace('core/', '').replace('/', '-');
+  } // Return selector if it's the root target we are looking for.
+
+
+  if (path === 'root') {
+    return rootSelector;
+  } // If target is not `root` or `duotone` we have a feature or subfeature
+  // as the target. If the target is a string convert to an array.
+
+
+  const pathArray = Array.isArray(target) ? target : target.split('.'); // Feature selectors ( may fallback to root selector );
+
+  if (pathArray.length === 1) {
+    const fallbackSelector = fallback ? rootSelector : null; // Prefer the selectors API if available.
+
+    if (hasSelectors) {
+      // Get selector from either `feature.root` or shorthand path.
+      const featureSelector = (0, _lodash.get)(selectors, `${path}.root`, null) || (0, _lodash.get)(selectors, path, null); // Return feature selector if found or any available fallback.
+
+      return featureSelector || fallbackSelector;
+    } // Try getting old experimental supports selector value.
+
+
+    const featureSelector = (0, _lodash.get)(supports, `${path}.__experimentalSelector`, null); // If nothing to work with, provide fallback selector if available.
+
+    if (!featureSelector) {
+      return fallbackSelector;
+    } // Scope the feature selector by the block's root selector.
+
+
+    return (0, _utils.scopeSelector)(rootSelector, featureSelector);
+  } // Subfeature selector.
+  // This may fallback either to parent feature or root selector.
+
+
+  let subfeatureSelector; // Use selectors API if available.
+
+  if (hasSelectors) {
+    subfeatureSelector = (0, _lodash.get)(selectors, path, null);
+  } // Only return if we have a subfeature selector.
+
+
+  if (subfeatureSelector) {
+    return subfeatureSelector;
+  } // To this point we don't have a subfeature selector. If a fallback has been
+  // requested, remove subfeature from target path and return results of a
+  // call for the parent feature's selector.
+
+
+  if (fallback) {
+    return getBlockCSSSelector(blockType, pathArray[0], options);
+  } // We tried.
+
+
+  return null;
+}
+//# sourceMappingURL=get-block-css-selector.js.map

package/build/components/global-styles/get-block-css-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/global-styles/get-block-css-selector.js"],"names":["getBlockCSSSelector","blockType","target","options","fallback","name","selectors","supports","hasSelectors","path","Array","isArray","join","rootSelector","root","__experimentalSelector","replace","pathArray","split","length","fallbackSelector","featureSelector","subfeatureSelector"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, isEmpty } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport { scopeSelector } from './utils';\n\n/**\n * Determine the CSS selector for the block type and target provided, returning\n * it if available.\n *\n * @param {import('@wordpress/blocks').Block} blockType        The block's type.\n * @param {string|string[]}                   target           The desired selector's target e.g. `root`, delimited string, or array path.\n * @param {Object}                            options          Options object.\n * @param {boolean}                           options.fallback Whether or not to fallback to broader selector.\n *\n * @return {?string} The CSS selector or `null` if no selector available.\n */\nexport function getBlockCSSSelector(\n\tblockType,\n\ttarget = 'root',\n\toptions = {}\n) {\n\tif ( ! target ) {\n\t\treturn null;\n\t}\n\n\tconst { fallback = false } = options;\n\tconst { name, selectors, supports } = blockType;\n\n\tconst hasSelectors = ! isEmpty( selectors );\n\tconst path = Array.isArray( target ) ? target.join( '.' ) : target;\n\n\t// Root selector.\n\n\t// Calculated before returning as it can be used as a fallback for feature\n\t// selectors later on.\n\tlet rootSelector = null;\n\n\tif ( hasSelectors && selectors.root ) {\n\t\t// Use the selectors API if available.\n\t\trootSelector = selectors?.root;\n\t} else if ( supports?.__experimentalSelector ) {\n\t\t// Use the old experimental selector supports property if set.\n\t\trootSelector = supports.__experimentalSelector;\n\t} else {\n\t\t// If no root selector found, generate default block class selector.\n\t\trootSelector =\n\t\t\t'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );\n\t}\n\n\t// Return selector if it's the root target we are looking for.\n\tif ( path === 'root' ) {\n\t\treturn rootSelector;\n\t}\n\n\t// If target is not `root` or `duotone` we have a feature or subfeature\n\t// as the target. If the target is a string convert to an array.\n\tconst pathArray = Array.isArray( target ) ? target : target.split( '.' );\n\n\t// Feature selectors ( may fallback to root selector );\n\tif ( pathArray.length === 1 ) {\n\t\tconst fallbackSelector = fallback ? rootSelector : null;\n\n\t\t// Prefer the selectors API if available.\n\t\tif ( hasSelectors ) {\n\t\t\t// Get selector from either `feature.root` or shorthand path.\n\t\t\tconst featureSelector =\n\t\t\t\tget( selectors, `${ path }.root`, null ) ||\n\t\t\t\tget( selectors, path, null );\n\n\t\t\t// Return feature selector if found or any available fallback.\n\t\t\treturn featureSelector || fallbackSelector;\n\t\t}\n\n\t\t// Try getting old experimental supports selector value.\n\t\tconst featureSelector = get(\n\t\t\tsupports,\n\t\t\t`${ path }.__experimentalSelector`,\n\t\t\tnull\n\t\t);\n\n\t\t// If nothing to work with, provide fallback selector if available.\n\t\tif ( ! featureSelector ) {\n\t\t\treturn fallbackSelector;\n\t\t}\n\n\t\t// Scope the feature selector by the block's root selector.\n\t\treturn scopeSelector( rootSelector, featureSelector );\n\t}\n\n\t// Subfeature selector.\n\t// This may fallback either to parent feature or root selector.\n\tlet subfeatureSelector;\n\n\t// Use selectors API if available.\n\tif ( hasSelectors ) {\n\t\tsubfeatureSelector = get( selectors, path, null );\n\t}\n\n\t// Only return if we have a subfeature selector.\n\tif ( subfeatureSelector ) {\n\t\treturn subfeatureSelector;\n\t}\n\n\t// To this point we don't have a subfeature selector. If a fallback has been\n\t// requested, remove subfeature from target path and return results of a\n\t// call for the parent feature's selector.\n\tif ( fallback ) {\n\t\treturn getBlockCSSSelector( blockType, pathArray[ 0 ], options );\n\t}\n\n\t// We tried.\n\treturn null;\n}\n"]}