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

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.addAssignedAlign = addAssignedAlign;
exports.addAttribute = addAttribute;
exports.default = void 0;
exports.getValidAlignments = getValidAlignments;
var _clsx = _interopRequireDefault(require("clsx"));
var _hooks = require("@wordpress/hooks");
var _blocks = require("@wordpress/blocks");
var _components = require("../components");
var _useAvailableAlignments = _interopRequireDefault(require("../components/block-alignment-control/use-available-alignments"));
var _blockEditingMode = require("../components/block-editing-mode");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * An array which includes all possible valid alignments,
 * used to validate if an alignment is valid or not.
 *
 * @constant
 * @type {string[]}
 */const ALL_ALIGNMENTS = ['left', 'center', 'right', 'wide', 'full'];

/**
 * An array which includes all wide alignments.
 * In order for this alignments to be valid they need to be supported by the block,
 * and by the theme.
 *
 * @constant
 * @type {string[]}
 */
const WIDE_ALIGNMENTS = ['wide', 'full'];

/**
 * Returns the valid alignments.
 * Takes into consideration the aligns supported by a block, if the block supports wide controls or not and if theme supports wide controls or not.
 * Exported just for testing purposes, not exported outside the module.
 *
 * @param {?boolean|string[]} blockAlign          Aligns supported by the block.
 * @param {?boolean}          hasWideBlockSupport True if block supports wide alignments. And False otherwise.
 * @param {?boolean}          hasWideEnabled      True if theme supports wide alignments. And False otherwise.
 *
 * @return {string[]} Valid alignments.
 */
function getValidAlignments(blockAlign, hasWideBlockSupport = true, hasWideEnabled = true) {
  let validAlignments;
  if (Array.isArray(blockAlign)) {
    validAlignments = ALL_ALIGNMENTS.filter(value => blockAlign.includes(value));
  } else if (blockAlign === true) {
    // `true` includes all alignments...
    validAlignments = [...ALL_ALIGNMENTS];
  } else {
    validAlignments = [];
  }
  if (!hasWideEnabled || blockAlign === true && !hasWideBlockSupport) {
    return validAlignments.filter(alignment => !WIDE_ALIGNMENTS.includes(alignment));
  }
  return validAlignments;
}

/**
 * Filters registered block settings, extending attributes to include `align`.
 *
 * @param {Object} settings Original block settings.
 *
 * @return {Object} Filtered block settings.
 */
function addAttribute(settings) {
  var _settings$attributes$;
  // Allow blocks to specify their own attribute definition with default values if needed.
  if ('type' in ((_settings$attributes$ = settings.attributes?.align) !== null && _settings$attributes$ !== void 0 ? _settings$attributes$ : {})) {
    return settings;
  }
  if ((0, _blocks.hasBlockSupport)(settings, 'align')) {
    // Gracefully handle if settings.attributes is undefined.
    settings.attributes = {
      ...settings.attributes,
      align: {
        type: 'string',
        // Allow for '' since it is used by the `updateAlignment` function
        // in toolbar controls for special cases with defined default values.
        enum: [...ALL_ALIGNMENTS, '']
      }
    };
  }
  return settings;
}
function BlockEditAlignmentToolbarControlsPure({
  name: blockName,
  align,
  setAttributes
}) {
  // Compute the block valid alignments by taking into account,
  // if the theme supports wide alignments or not and the layout's
  // available alignments. We do that for conditionally rendering
  // Slot.
  const blockAllowedAlignments = getValidAlignments((0, _blocks.getBlockSupport)(blockName, 'align'), (0, _blocks.hasBlockSupport)(blockName, 'alignWide', true));
  const validAlignments = (0, _useAvailableAlignments.default)(blockAllowedAlignments).map(({
    name
  }) => name);
  const blockEditingMode = (0, _blockEditingMode.useBlockEditingMode)();
  if (!validAlignments.length || blockEditingMode !== 'default') {
    return null;
  }
  const updateAlignment = nextAlign => {
    if (!nextAlign) {
      const blockType = (0, _blocks.getBlockType)(blockName);
      const blockDefaultAlign = blockType?.attributes?.align?.default;
      if (blockDefaultAlign) {
        nextAlign = '';
      }
    }
    setAttributes({
      align: nextAlign
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BlockControls, {
    group: "block",
    __experimentalShareWithChildBlocks: true,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BlockAlignmentControl, {
      value: align,
      onChange: updateAlignment,
      controls: validAlignments
    })
  });
}
var _default = exports.default = {
  shareWithChildBlocks: true,
  edit: BlockEditAlignmentToolbarControlsPure,
  useBlockProps,
  addSaveProps: addAssignedAlign,
  attributeKeys: ['align'],
  hasSupport(name) {
    return (0, _blocks.hasBlockSupport)(name, 'align', false);
  }
};
function useBlockProps({
  name,
  align
}) {
  const blockAllowedAlignments = getValidAlignments((0, _blocks.getBlockSupport)(name, 'align'), (0, _blocks.hasBlockSupport)(name, 'alignWide', true));
  const validAlignments = (0, _useAvailableAlignments.default)(blockAllowedAlignments);
  if (validAlignments.some(alignment => alignment.name === align)) {
    return {
      'data-align': align
    };
  }
  return {};
}

/**
 * Override props assigned to save component to inject alignment class name if
 * block supports it.
 *
 * @param {Object} props      Additional props applied to save element.
 * @param {Object} blockType  Block type.
 * @param {Object} attributes Block attributes.
 *
 * @return {Object} Filtered props applied to save element.
 */
function addAssignedAlign(props, blockType, attributes) {
  const {
    align
  } = attributes;
  const blockAlign = (0, _blocks.getBlockSupport)(blockType, 'align');
  const hasWideBlockSupport = (0, _blocks.hasBlockSupport)(blockType, 'alignWide', true);

  // Compute valid alignments without taking into account if
  // the theme supports wide alignments or not.
  // This way changing themes does not impact the block save.
  const isAlignValid = getValidAlignments(blockAlign, hasWideBlockSupport).includes(align);
  if (isAlignValid) {
    props.className = (0, _clsx.default)(`align${align}`, props.className);
  }
  return props;
}
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/editor/align/addAttribute', addAttribute);
//# sourceMappingURL=align.js.map