@wordpress/block-editor/build/hooks/behaviors.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.withBehaviors = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _hooks = require("@wordpress/hooks");

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _blocks = require("@wordpress/blocks");

var _compose = require("@wordpress/compose");

var _data = require("@wordpress/data");

var _store = require("../store");

var _components2 = require("../components");

var _deepmerge = _interopRequireDefault(require("deepmerge"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * External dependencies
 */
function BehaviorsControl({
  blockName,
  blockBehaviors,
  onChange,
  disabled = false
}) {
  const {
    settings,
    themeBehaviors
  } = (0, _data.useSelect)(select => {
    const {
      getBehaviors,
      getSettings
    } = select(_store.store);
    return {
      settings: getSettings()?.__experimentalFeatures?.blocks?.[blockName]?.behaviors,
      themeBehaviors: getBehaviors()?.blocks?.[blockName]
    };
  }, [blockName]);
  const noBehaviorsOption = {
    value: '',
    label: (0, _i18n.__)('No behaviors')
  };
  const behaviorsOptions = Object.entries(settings).filter(([behaviorName, behaviorValue]) => (0, _blocks.hasBlockSupport)(blockName, 'behaviors.' + behaviorName) && behaviorValue) // Filter out behaviors that are disabled.
  .map(([behaviorName]) => ({
    value: behaviorName,
    label: // Capitalize the first letter of the behavior name.
    behaviorName[0].toUpperCase() + behaviorName.slice(1).toLowerCase()
  })); // If every behavior is disabled, do not show the behaviors inspector control.

  if (behaviorsOptions.length === 0) return null;
  const options = [noBehaviorsOption, ...behaviorsOptions]; // Block behaviors take precedence over theme behaviors.

  const behaviors = (0, _deepmerge.default)(themeBehaviors, blockBehaviors || {});
  const helpText = disabled ? (0, _i18n.__)('The lightbox behavior is disabled for linked images.') : (0, _i18n.__)('Add behaviors.');
  return (0, _element.createElement)(_components2.InspectorControls, {
    group: "advanced"
  }, (0, _element.createElement)("div", null, (0, _element.createElement)(_components.SelectControl, {
    label: (0, _i18n.__)('Behaviors') // At the moment we are only supporting one behavior (Lightbox)
    ,
    value: behaviors?.lightbox ? 'lightbox' : '',
    options: options,
    onChange: onChange,
    hideCancelButton: true,
    help: helpText,
    size: "__unstable-large",
    disabled: disabled
  })), (0, _element.createElement)(_components.__experimentalHStack, {
    justify: "flex-end"
  }, (0, _element.createElement)(_components.Button, {
    isSmall: true,
    disabled: disabled,
    onClick: () => onChange(undefined)
  }, (0, _i18n.__)('Reset'))));
}
/**
 * Override the default edit UI to include a new block inspector control for
 * assigning behaviors to blocks if behaviors are enabled in the theme.json.
 *
 * Currently, only the `core/image` block is supported.
 *
 * @param {WPComponent} BlockEdit Original component.
 *
 * @return {WPComponent} Wrapped component.
 */


const withBehaviors = (0, _compose.createHigherOrderComponent)(BlockEdit => {
  return props => {
    const blockEdit = (0, _element.createElement)(BlockEdit, (0, _extends2.default)({
      key: "edit"
    }, props)); // Only add behaviors to blocks with support.

    if (!(0, _blocks.hasBlockSupport)(props.name, 'behaviors')) {
      return blockEdit;
    }

    const blockHasLink = typeof props.attributes?.linkDestination !== 'undefined' && props.attributes?.linkDestination !== 'none';
    return (0, _element.createElement)(_element.Fragment, null, blockEdit, (0, _element.createElement)(BehaviorsControl, {
      blockName: props.name,
      blockBehaviors: props.attributes.behaviors,
      onChange: nextValue => {
        if (nextValue === undefined) {
          props.setAttributes({
            behaviors: undefined
          });
        } else {
          // If the user selects something, it means that they want to
          // change the default value (true) so we save it in the attributes.
          props.setAttributes({
            behaviors: {
              lightbox: nextValue === 'lightbox'
            }
          });
        }
      },
      disabled: blockHasLink
    }));
  };
}, 'withBehaviors');
exports.withBehaviors = withBehaviors;

if (window?.__experimentalInteractivityAPI) {
  (0, _hooks.addFilter)('editor.BlockEdit', 'core/behaviors/with-inspector-control', withBehaviors);
}
//# sourceMappingURL=behaviors.js.map