@wordpress/block-library/build/column/edit.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ColumnInspectorControls({
  width,
  setAttributes
}) {
  const [availableUnits] = (0, _blockEditor.useSettings)('spacing.units');
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: availableUnits || ['%', 'px', 'em', 'rem', 'vw']
  });
  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanel, {
    label: (0, _i18n.__)('Settings'),
    resetAll: () => {
      setAttributes({
        width: undefined
      });
    },
    dropdownMenuProps: dropdownMenuProps,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      hasValue: () => width !== undefined,
      label: (0, _i18n.__)('Width'),
      onDeselect: () => setAttributes({
        width: undefined
      }),
      isShownByDefault: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
        label: (0, _i18n.__)('Width'),
        __unstableInputWidth: "calc(50% - 8px)",
        __next40pxDefaultSize: true,
        value: width || '',
        onChange: nextWidth => {
          nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
          setAttributes({
            width: nextWidth
          });
        },
        units: units
      })
    })
  });
}
function ColumnEdit({
  attributes: {
    verticalAlignment,
    width,
    templateLock,
    allowedBlocks
  },
  setAttributes,
  clientId
}) {
  const classes = (0, _clsx.default)('block-core-columns', {
    [`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment
  });
  const {
    columnsIds,
    hasChildBlocks,
    rootClientId
  } = (0, _data.useSelect)(select => {
    const {
      getBlockOrder,
      getBlockRootClientId
    } = select(_blockEditor.store);
    const rootId = getBlockRootClientId(clientId);
    return {
      hasChildBlocks: getBlockOrder(clientId).length > 0,
      rootClientId: rootId,
      columnsIds: getBlockOrder(rootId)
    };
  }, [clientId]);
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_blockEditor.store);
  const updateAlignment = value => {
    // Update own alignment.
    setAttributes({
      verticalAlignment: value
    });
    // Reset parent Columns block.
    updateBlockAttributes(rootClientId, {
      verticalAlignment: null
    });
  };
  const widthWithUnit = Number.isFinite(width) ? width + '%' : width;
  const blockProps = (0, _blockEditor.useBlockProps)({
    className: classes,
    style: widthWithUnit ? {
      flexBasis: widthWithUnit
    } : undefined
  });
  const columnsCount = columnsIds.length;
  const currentColumnPosition = columnsIds.indexOf(clientId) + 1;
  const label = (0, _i18n.sprintf)(/* translators: 1: Block label (i.e. "Block: Column"), 2: Position of the selected block, 3: Total number of sibling blocks of the same type */
  (0, _i18n.__)('%1$s (%2$d of %3$d)'), blockProps['aria-label'], currentColumnPosition, columnsCount);
  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)({
    ...blockProps,
    'aria-label': label
  }, {
    templateLock,
    allowedBlocks,
    renderAppender: hasChildBlocks ? undefined : _blockEditor.InnerBlocks.ButtonBlockAppender
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockVerticalAlignmentToolbar, {
        onChange: updateAlignment,
        value: verticalAlignment,
        controls: ['top', 'center', 'bottom', 'stretch']
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnInspectorControls, {
        width: width,
        setAttributes: setAttributes
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ...innerBlocksProps
    })]
  });
}
var _default = exports.default = ColumnEdit;
//# sourceMappingURL=edit.js.map