@wordpress/block-editor/build-module/components/global-styles/background-panel.js

Generic block editor.

/**
 * WordPress dependencies
 */
import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
import { useCallback, Platform } from '@wordpress/element';
/**
 * Internal dependencies
 */
import BackgroundImageControl from '../background-image-control';
import { useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';
import { __ } from '@wordpress/i18n';
import { jsx as _jsx } from "react/jsx-runtime";
const DEFAULT_CONTROLS = {
  backgroundImage: true
};

/**
 * Checks site settings to see if the background panel may be used.
 * `settings.background.backgroundSize` exists also,
 * but can only be used if settings?.background?.backgroundImage is `true`.
 *
 * @param {Object} settings Site settings
 * @return {boolean}        Whether site settings has activated background panel.
 */
export function useHasBackgroundPanel(settings) {
  return Platform.OS === 'web' && settings?.background?.backgroundImage;
}

/**
 * Checks if there is a current value in the background size block support
 * attributes. Background size values include background size as well
 * as background position.
 *
 * @param {Object} style Style attribute.
 * @return {boolean}     Whether the block has a background size value set.
 */
export function hasBackgroundSizeValue(style) {
  return style?.background?.backgroundPosition !== undefined || style?.background?.backgroundSize !== undefined;
}

/**
 * Checks if there is a current value in the background image block support
 * attributes.
 *
 * @param {Object} style Style attribute.
 * @return {boolean}     Whether the block has a background image value set.
 */
export function hasBackgroundImageValue(style) {
  return !!style?.background?.backgroundImage?.id ||
  // Supports url() string values in theme.json.
  'string' === typeof style?.background?.backgroundImage || !!style?.background?.backgroundImage?.url;
}
function BackgroundToolsPanel({
  resetAllFilter,
  onChange,
  value,
  panelId,
  children,
  headerLabel
}) {
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  const resetAll = () => {
    const updatedValue = resetAllFilter(value);
    onChange(updatedValue);
  };
  return /*#__PURE__*/_jsx(ToolsPanel, {
    label: headerLabel,
    resetAll: resetAll,
    panelId: panelId,
    dropdownMenuProps: dropdownMenuProps,
    children: children
  });
}
export default function BackgroundImagePanel({
  as: Wrapper = BackgroundToolsPanel,
  value,
  onChange,
  inheritedValue,
  settings,
  panelId,
  defaultControls = DEFAULT_CONTROLS,
  defaultValues = {},
  headerLabel = __('Background image')
}) {
  const showBackgroundImageControl = useHasBackgroundPanel(settings);
  const resetBackground = () => onChange(setImmutably(value, ['background'], {}));
  const resetAllFilter = useCallback(previousValue => {
    return {
      ...previousValue,
      background: {}
    };
  }, []);
  return /*#__PURE__*/_jsx(Wrapper, {
    resetAllFilter: resetAllFilter,
    value: value,
    onChange: onChange,
    panelId: panelId,
    headerLabel: headerLabel,
    children: showBackgroundImageControl && /*#__PURE__*/_jsx(ToolsPanelItem, {
      hasValue: () => !!value?.background,
      label: __('Image'),
      onDeselect: resetBackground,
      isShownByDefault: defaultControls.backgroundImage,
      panelId: panelId,
      children: /*#__PURE__*/_jsx(BackgroundImageControl, {
        value: value,
        onChange: onChange,
        settings: settings,
        inheritedValue: inheritedValue,
        defaultControls: defaultControls,
        defaultValues: defaultValues
      })
    })
  });
}
//# sourceMappingURL=background-panel.js.map