@wordpress/block-editor/build/components/block-list/layout.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useLayout = useLayout;
exports.LayoutStyle = LayoutStyle;
exports.LayoutProvider = exports.defaultLayout = void 0;

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

/**
 * WordPress dependencies
 */
const defaultLayout = {
  type: 'default'
};
exports.defaultLayout = defaultLayout;
const Layout = (0, _element.createContext)(defaultLayout);

function appendSelectors(selectors, append) {
  // Ideally we shouldn't need the `.editor-styles-wrapper` increased specificity here
  // The problem though is that we have a `.editor-styles-wrapper p { margin: reset; }` style
  // it's used to reset the default margin added by wp-admin to paragraphs
  // so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers
  // When the post editor is fully iframed, this extra classname could be removed.
  return selectors.split(',').map(subselector => `.editor-styles-wrapper ${subselector} ${append}`).join(',');
}
/**
 * Allows to define the layout.
 */


const LayoutProvider = Layout.Provider;
/**
 * React hook used to retrieve the layout config.
 */

exports.LayoutProvider = LayoutProvider;

function useLayout() {
  return (0, _element.useContext)(Layout);
}

function LayoutStyle({
  selector,
  layout = {}
}) {
  const {
    contentSize,
    wideSize
  } = layout;
  let style = !!contentSize || !!wideSize ? `
				${appendSelectors(selector, '> *')} {
					max-width: ${contentSize !== null && contentSize !== void 0 ? contentSize : wideSize};
					margin-left: auto;
					margin-right: auto;
				}

				${appendSelectors(selector, '> [data-align="wide"]')}  {
					max-width: ${wideSize !== null && wideSize !== void 0 ? wideSize : contentSize};
				}

				${appendSelectors(selector, '> [data-align="full"]')} {
					max-width: none;
				}
			` : '';
  style += `
		${appendSelectors(selector, '> [data-align="left"]')} {
			float: left;
			margin-right: 2em;
		}

		${appendSelectors(selector, '> [data-align="right"]')} {
			float: right;
			margin-left: 2em;
		}
	`;
  return (0, _element.createElement)("style", null, style);
}
//# sourceMappingURL=layout.js.map