@wordpress/edit-post/build/components/layout/index.js

Edit Post module for WordPress.

"use strict";

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

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

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

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

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

var _editor = require("@wordpress/editor");

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

var _blockEditor = require("@wordpress/block-editor");

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

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

var _plugins = require("@wordpress/plugins");

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

var _interface = require("@wordpress/interface");

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

var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");

var _textEditor = _interopRequireDefault(require("../text-editor"));

var _visualEditor = _interopRequireDefault(require("../visual-editor"));

var _keyboardShortcuts2 = _interopRequireDefault(require("../keyboard-shortcuts"));

var _keyboardShortcutHelpModal = _interopRequireDefault(require("../keyboard-shortcut-help-modal"));

var _manageBlocksModal = _interopRequireDefault(require("../manage-blocks-modal"));

var _preferencesModal = _interopRequireDefault(require("../preferences-modal"));

var _browserUrl = _interopRequireDefault(require("../browser-url"));

var _header = _interopRequireDefault(require("../header"));

var _settingsSidebar = _interopRequireDefault(require("../sidebar/settings-sidebar"));

var _metaBoxes = _interopRequireDefault(require("../meta-boxes"));

var _welcomeGuide = _interopRequireDefault(require("../welcome-guide"));

var _actionsPanel = _interopRequireDefault(require("./actions-panel"));

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const interfaceLabels = {
  secondarySidebar: (0, _i18n.__)('Block library'),

  /* translators: accessibility text for the editor top bar landmark region. */
  header: (0, _i18n.__)('Editor top bar'),

  /* translators: accessibility text for the editor content landmark region. */
  body: (0, _i18n.__)('Editor content'),

  /* translators: accessibility text for the editor settings landmark region. */
  sidebar: (0, _i18n.__)('Editor settings'),

  /* translators: accessibility text for the editor publish landmark region. */
  actions: (0, _i18n.__)('Editor publish'),

  /* translators: accessibility text for the editor footer landmark region. */
  footer: (0, _i18n.__)('Editor footer')
};

function Layout({
  styles
}) {
  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
  const isHugeViewport = (0, _compose.useViewportMatch)('huge', '>=');
  const {
    openGeneralSidebar,
    closeGeneralSidebar,
    setIsInserterOpened
  } = (0, _data.useDispatch)(_store.store);
  const {
    mode,
    isFullscreenActive,
    isRichEditingEnabled,
    sidebarIsOpened,
    hasActiveMetaboxes,
    hasFixedToolbar,
    previousShortcut,
    nextShortcut,
    hasBlockSelected,
    showMostUsedBlocks,
    isInserterOpened,
    insertionPoint,
    showIconLabels,
    hasReducedUI,
    showBlockBreadcrumbs
  } = (0, _data.useSelect)(select => {
    const editorSettings = select('core/editor').getEditorSettings();
    return {
      hasFixedToolbar: select(_store.store).isFeatureActive('fixedToolbar'),
      sidebarIsOpened: !!(select(_interface.store).getActiveComplementaryArea(_store.store.name) || select(_store.store).isPublishSidebarOpened()),
      isFullscreenActive: select(_store.store).isFeatureActive('fullscreenMode'),
      showMostUsedBlocks: select(_store.store).isFeatureActive('mostUsedBlocks'),
      isInserterOpened: select(_store.store).isInserterOpened(),
      insertionPoint: select(_store.store).__experimentalGetInsertionPoint(),
      mode: select(_store.store).getEditorMode(),
      isRichEditingEnabled: editorSettings.richEditingEnabled,
      hasActiveMetaboxes: select(_store.store).hasMetaBoxes(),
      previousShortcut: select(_keyboardShortcuts.store).getAllShortcutRawKeyCombinations('core/edit-post/previous-region'),
      nextShortcut: select(_keyboardShortcuts.store).getAllShortcutRawKeyCombinations('core/edit-post/next-region'),
      showIconLabels: select(_store.store).isFeatureActive('showIconLabels'),
      hasReducedUI: select(_store.store).isFeatureActive('reducedUI'),
      showBlockBreadcrumbs: select(_store.store).isFeatureActive('showBlockBreadcrumbs')
    };
  }, []);
  const className = (0, _classnames.default)('edit-post-layout', 'is-mode-' + mode, {
    'is-sidebar-opened': sidebarIsOpened,
    'has-fixed-toolbar': hasFixedToolbar,
    'has-metaboxes': hasActiveMetaboxes,
    'show-icon-labels': showIconLabels
  });

  const openSidebarPanel = () => openGeneralSidebar(hasBlockSelected ? 'edit-post/block' : 'edit-post/document'); // Inserter and Sidebars are mutually exclusive


  (0, _element.useEffect)(() => {
    if (sidebarIsOpened && !isHugeViewport) {
      setIsInserterOpened(false);
    }
  }, [sidebarIsOpened, isHugeViewport]);
  (0, _element.useEffect)(() => {
    if (isInserterOpened && !isHugeViewport) {
      closeGeneralSidebar();
    }
  }, [isInserterOpened, isHugeViewport]); // Local state for save panel.
  // Note 'truthy' callback implies an open panel.

  const [entitiesSavedStatesCallback, setEntitiesSavedStatesCallback] = (0, _element.useState)(false);
  const closeEntitiesSavedStates = (0, _element.useCallback)(arg => {
    if (typeof entitiesSavedStatesCallback === 'function') {
      entitiesSavedStatesCallback(arg);
    }

    setEntitiesSavedStatesCallback(false);
  }, [entitiesSavedStatesCallback]);
  const [inserterDialogRef, inserterDialogProps] = (0, _compose.__experimentalUseDialog)({
    onClose: () => setIsInserterOpened(false)
  });
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_interface.FullscreenMode, {
    isActive: isFullscreenActive
  }), (0, _element.createElement)(_browserUrl.default, null), (0, _element.createElement)(_editor.UnsavedChangesWarning, null), (0, _element.createElement)(_editor.AutosaveMonitor, null), (0, _element.createElement)(_editor.LocalAutosaveMonitor, null), (0, _element.createElement)(_keyboardShortcuts2.default, null), (0, _element.createElement)(_editor.EditorKeyboardShortcutsRegister, null), (0, _element.createElement)(_settingsSidebar.default, null), (0, _element.createElement)(_interface.InterfaceSkeleton, {
    className: className,
    labels: interfaceLabels,
    header: (0, _element.createElement)(_header.default, {
      setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback
    }),
    secondarySidebar: mode === 'visual' && isInserterOpened && (0, _element.createElement)("div", (0, _extends2.default)({
      ref: inserterDialogRef
    }, inserterDialogProps, {
      className: "edit-post-layout__inserter-panel"
    }), (0, _element.createElement)("div", {
      className: "edit-post-layout__inserter-panel-header"
    }, (0, _element.createElement)(_components.Button, {
      icon: _icons.close,
      onClick: () => setIsInserterOpened(false)
    })), (0, _element.createElement)("div", {
      className: "edit-post-layout__inserter-panel-content"
    }, (0, _element.createElement)(_blockEditor.__experimentalLibrary, {
      showMostUsedBlocks: showMostUsedBlocks,
      showInserterHelpPanel: true,
      shouldFocusBlock: isMobileViewport,
      rootClientId: insertionPoint.rootClientId,
      __experimentalInsertionIndex: insertionPoint.insertionIndex
    }))),
    sidebar: (!isMobileViewport || sidebarIsOpened) && (0, _element.createElement)(_element.Fragment, null, !isMobileViewport && !sidebarIsOpened && (0, _element.createElement)("div", {
      className: "edit-post-layout__toggle-sidebar-panel"
    }, (0, _element.createElement)(_components.Button, {
      isSecondary: true,
      className: "edit-post-layout__toggle-sidebar-panel-button",
      onClick: openSidebarPanel,
      "aria-expanded": false
    }, hasBlockSelected ? (0, _i18n.__)('Open block settings') : (0, _i18n.__)('Open document settings'))), (0, _element.createElement)(_interface.ComplementaryArea.Slot, {
      scope: "core/edit-post"
    })),
    content: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_editor.EditorNotices, null), (mode === 'text' || !isRichEditingEnabled) && (0, _element.createElement)(_textEditor.default, null), isRichEditingEnabled && mode === 'visual' && (0, _element.createElement)(_visualEditor.default, {
      styles: styles
    }), (0, _element.createElement)("div", {
      className: "edit-post-layout__metaboxes"
    }, (0, _element.createElement)(_metaBoxes.default, {
      location: "normal"
    }), (0, _element.createElement)(_metaBoxes.default, {
      location: "advanced"
    })), isMobileViewport && sidebarIsOpened && (0, _element.createElement)(_components.ScrollLock, null)),
    footer: !hasReducedUI && showBlockBreadcrumbs && !isMobileViewport && isRichEditingEnabled && mode === 'visual' && (0, _element.createElement)("div", {
      className: "edit-post-layout__footer"
    }, (0, _element.createElement)(_blockEditor.BlockBreadcrumb, null)),
    actions: (0, _element.createElement)(_actionsPanel.default, {
      closeEntitiesSavedStates: closeEntitiesSavedStates,
      isEntitiesSavedStatesOpen: entitiesSavedStatesCallback,
      setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback
    }),
    shortcuts: {
      previous: previousShortcut,
      next: nextShortcut
    }
  }), (0, _element.createElement)(_manageBlocksModal.default, null), (0, _element.createElement)(_preferencesModal.default, null), (0, _element.createElement)(_keyboardShortcutHelpModal.default, null), (0, _element.createElement)(_welcomeGuide.default, null), (0, _element.createElement)(_components.Popover.Slot, null), (0, _element.createElement)(_plugins.PluginArea, null));
}

var _default = Layout;
exports.default = _default;
//# sourceMappingURL=index.js.map