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

Generic block editor.

"use strict";

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

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

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

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

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

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

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

var _icons = require("@wordpress/icons");

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

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

var _useEditorFeature = _interopRequireDefault(require("../components/use-editor-feature"));

var _layout = require("../components/block-list/layout");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const isWeb = _element.Platform.OS === 'web';
const CSS_UNITS = [{
  value: '%',
  label: isWeb ? '%' : (0, _i18n.__)('Percentage (%)'),
  default: ''
}, {
  value: 'px',
  label: isWeb ? 'px' : (0, _i18n.__)('Pixels (px)'),
  default: ''
}, {
  value: 'em',
  label: isWeb ? 'em' : (0, _i18n.__)('Relative to parent font size (em)'),
  default: ''
}, {
  value: 'rem',
  label: isWeb ? 'rem' : (0, _i18n.__)('Relative to root font size (rem)'),
  default: ''
}, {
  value: 'vw',
  label: isWeb ? 'vw' : (0, _i18n.__)('Viewport width (vw)'),
  default: ''
}];

function LayoutPanel({
  setAttributes,
  attributes
}) {
  const {
    layout = {}
  } = attributes;
  const {
    wideSize,
    contentSize,
    inherit = false
  } = layout;
  const defaultLayout = (0, _useEditorFeature.default)('layout');
  const themeSupportsLayout = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = select(_store.store);
    return getSettings().supportsLayout;
  }, []);

  if (!themeSupportsLayout) {
    return null;
  }

  return (0, _element.createElement)(_components2.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Layout')
  }, !!defaultLayout && (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Inherit default layout'),
    checked: !!inherit,
    onChange: () => setAttributes({
      layout: {
        inherit: !inherit
      }
    })
  }), !inherit && (0, _element.createElement)("div", {
    className: "block-editor-hooks__layout-controls"
  }, (0, _element.createElement)("div", {
    className: "block-editor-hooks__layout-controls-unit"
  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
    label: (0, _i18n.__)('Content'),
    labelPosition: "top",
    __unstableInputWidth: "80px",
    value: contentSize || wideSize || '',
    onChange: nextWidth => {
      nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
      setAttributes({
        layout: { ...layout,
          contentSize: nextWidth
        }
      });
    },
    units: CSS_UNITS
  }), (0, _element.createElement)(_icons.Icon, {
    icon: _icons.positionCenter
  })), (0, _element.createElement)("div", {
    className: "block-editor-hooks__layout-controls-unit"
  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
    label: (0, _i18n.__)('Wide'),
    labelPosition: "top",
    __unstableInputWidth: "80px",
    value: wideSize || contentSize || '',
    onChange: nextWidth => {
      nextWidth = 0 > parseFloat(nextWidth) ? '0' : nextWidth;
      setAttributes({
        layout: { ...layout,
          wideSize: nextWidth
        }
      });
    },
    units: CSS_UNITS
  }), (0, _element.createElement)(_icons.Icon, {
    icon: _icons.stretchWide
  }))), (0, _element.createElement)("p", {
    className: "block-editor-hooks__layout-controls-helptext"
  }, (0, _i18n.__)('Customize the width for all elements that are assigned to the center or wide columns.'))));
}
/**
 * Filters registered block settings, extending attributes to include `layout`.
 *
 * @param  {Object} settings Original block settings
 * @return {Object}          Filtered block settings
 */


function addAttribute(settings) {
  if ((0, _lodash.has)(settings.attributes, ['layout', 'type'])) {
    return settings;
  }

  if ((0, _blocks.hasBlockSupport)(settings, '__experimentalLayout')) {
    settings.attributes = { ...settings.attributes,
      layout: {
        type: 'object'
      }
    };
  }

  return settings;
}
/**
 * Override the default edit UI to include layout controls
 *
 * @param  {Function} BlockEdit Original component
 * @return {Function}           Wrapped component
 */


const withInspectorControls = (0, _compose.createHigherOrderComponent)(BlockEdit => props => {
  const {
    name: blockName
  } = props;
  const supportLayout = (0, _blocks.hasBlockSupport)(blockName, '__experimentalLayout');
  return [supportLayout && (0, _element.createElement)(LayoutPanel, (0, _extends2.default)({
    key: "layout"
  }, props)), (0, _element.createElement)(BlockEdit, (0, _extends2.default)({
    key: "edit"
  }, props))];
}, 'withInspectorControls');
/**
 * Override the default block element to add the layout styles.
 *
 * @param  {Function} BlockListBlock Original component
 * @return {Function}                Wrapped component
 */

exports.withInspectorControls = withInspectorControls;
const withLayoutStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock => props => {
  const {
    name,
    attributes
  } = props;
  const supportLayout = (0, _blocks.hasBlockSupport)(name, '__experimentalLayout');
  const id = (0, _compose.useInstanceId)(BlockListBlock);
  const defaultLayout = (0, _useEditorFeature.default)('layout') || {};

  if (!supportLayout) {
    return (0, _element.createElement)(BlockListBlock, props);
  }

  const {
    layout = {}
  } = attributes;
  const usedLayout = !!layout && layout.inherit ? defaultLayout : layout;
  const className = (0, _classnames.default)(props === null || props === void 0 ? void 0 : props.className, `wp-container-${id}`);
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_layout.LayoutStyle, {
    selector: `.wp-container-${id}`,
    layout: usedLayout
  }), (0, _element.createElement)(BlockListBlock, (0, _extends2.default)({}, props, {
    className: className
  })));
});
exports.withLayoutStyles = withLayoutStyles;
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/layout/addAttribute', addAttribute);
(0, _hooks.addFilter)('editor.BlockListBlock', 'core/editor/layout/with-layout-styles', withLayoutStyles);
(0, _hooks.addFilter)('editor.BlockEdit', 'core/editor/layout/with-inspector-controls', withInspectorControls);
//# sourceMappingURL=layout.js.map