@wordpress/block-library/build/text-columns/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 = TextColumnsEdit;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function TextColumnsEdit({
  attributes,
  setAttributes
}) {
  const {
    width,
    content,
    columns
  } = attributes;
  (0, _deprecated.default)('The Text Columns block', {
    since: '5.3',
    alternative: 'the Columns block'
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockAlignmentToolbar, {
        value: width,
        onChange: nextWidth => setAttributes({
          width: nextWidth
        }),
        controls: ['center', 'wide', 'full']
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
          __nextHasNoMarginBottom: true,
          __next40pxDefaultSize: true,
          label: (0, _i18n.__)('Columns'),
          value: columns,
          onChange: value => setAttributes({
            columns: value
          }),
          min: 2,
          max: 4,
          required: true
        })
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ...(0, _blockEditor.useBlockProps)({
        className: `align${width} columns-${columns}`
      }),
      children: Array.from({
        length: columns
      }).map((_, index) => {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "wp-block-column",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
            tagName: "p",
            value: content?.[index]?.children,
            onChange: nextContent => {
              setAttributes({
                content: [...content.slice(0, index), {
                  children: nextContent
                }, ...content.slice(index + 1)]
              });
            },
            "aria-label": (0, _i18n.sprintf)(
            // translators: %d: column index (starting with 1)
            (0, _i18n.__)('Column %d text'), index + 1),
            placeholder: (0, _i18n.__)('New Column')
          })
        }, `column-${index}`);
      })
    })]
  });
}
//# sourceMappingURL=edit.js.map