@wordpress/editor/build/components/header/index.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _preferences = require("@wordpress/preferences");
var _element = require("@wordpress/element");
var _interface = require("@wordpress/interface");
var _blockEditor = require("@wordpress/block-editor");
var _backButton = _interopRequireWildcard(require("./back-button"));
var _collapsibleBlockToolbar = _interopRequireDefault(require("../collapsible-block-toolbar"));
var _documentBar = _interopRequireDefault(require("../document-bar"));
var _documentTools = _interopRequireDefault(require("../document-tools"));
var _moreMenu = _interopRequireDefault(require("../more-menu"));
var _postPreviewButton = _interopRequireDefault(require("../post-preview-button"));
var _postPublishButtonOrToggle = _interopRequireDefault(require("../post-publish-button/post-publish-button-or-toggle"));
var _postSavedState = _interopRequireDefault(require("../post-saved-state"));
var _postViewLink = _interopRequireDefault(require("../post-view-link"));
var _previewDropdown = _interopRequireDefault(require("../preview-dropdown"));
var _zoomOutToggle = _interopRequireDefault(require("../zoom-out-toggle"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const toolbarVariations = {
  distractionFreeDisabled: {
    y: '-50px'
  },
  distractionFreeHover: {
    y: 0
  },
  distractionFreeHidden: {
    y: '-50px'
  },
  visible: {
    y: 0
  },
  hidden: {
    y: 0
  }
};
const backButtonVariations = {
  distractionFreeDisabled: {
    x: '-100%'
  },
  distractionFreeHover: {
    x: 0
  },
  distractionFreeHidden: {
    x: '-100%'
  },
  visible: {
    x: 0
  },
  hidden: {
    x: 0
  }
};
function Header({
  customSaveButton,
  forceIsDirty,
  forceDisableBlockTools,
  setEntitiesSavedStatesCallback,
  title,
  isEditorIframed
}) {
  const isWideViewport = (0, _compose.useViewportMatch)('large');
  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
  const isTooNarrowForDocumentBar = (0, _compose.useMediaQuery)('(max-width: 403px)');
  const {
    isTextEditor,
    isPublishSidebarOpened,
    showIconLabels,
    hasFixedToolbar,
    isNestedEntity
  } = (0, _data.useSelect)(select => {
    const {
      get: getPreference
    } = select(_preferences.store);
    const {
      getEditorMode,
      getEditorSettings,
      isPublishSidebarOpened: _isPublishSidebarOpened
    } = select(_store.store);
    const {
      __unstableGetEditorMode
    } = select(_blockEditor.store);
    return {
      isTextEditor: getEditorMode() === 'text',
      isPublishSidebarOpened: _isPublishSidebarOpened(),
      showIconLabels: getPreference('core', 'showIconLabels'),
      hasFixedToolbar: getPreference('core', 'fixedToolbar'),
      isNestedEntity: !!getEditorSettings().onNavigateToPreviousEntityRecord,
      isZoomedOutView: __unstableGetEditorMode() === 'zoom-out'
    };
  }, []);
  const [isBlockToolsCollapsed, setIsBlockToolsCollapsed] = (0, _element.useState)(true);
  const hasCenter = isBlockToolsCollapsed && !isTooNarrowForDocumentBar;
  const hasBackButton = (0, _backButton.useHasBackButton)();

  // The edit-post-header classname is only kept for backward compatibilty
  // as some plugins might be relying on its presence.
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "editor-header edit-post-header",
    children: [hasBackButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
      className: "editor-header__back-button",
      variants: backButtonVariations,
      transition: {
        type: 'tween'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_backButton.default.Slot, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__unstableMotion.div, {
      variants: toolbarVariations,
      className: "editor-header__toolbar",
      transition: {
        type: 'tween'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_documentTools.default, {
        disableBlockTools: forceDisableBlockTools || isTextEditor
      }), hasFixedToolbar && isLargeViewport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsibleBlockToolbar.default, {
        isCollapsed: isBlockToolsCollapsed,
        onToggle: setIsBlockToolsCollapsed
      })]
    }), hasCenter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
      className: "editor-header__center",
      variants: toolbarVariations,
      transition: {
        type: 'tween'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_documentBar.default, {
        title: title
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__unstableMotion.div, {
      variants: toolbarVariations,
      transition: {
        type: 'tween'
      },
      className: "editor-header__settings",
      children: [!customSaveButton && !isPublishSidebarOpened &&
      /*#__PURE__*/
      // This button isn't completely hidden by the publish sidebar.
      // We can't hide the whole toolbar when the publish sidebar is open because
      // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
      // We track that DOM node to return focus to the PostPublishButtonOrToggle
      // when the publish sidebar has been closed.
      (0, _jsxRuntime.jsx)(_postSavedState.default, {
        forceIsDirty: forceIsDirty
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewDropdown.default, {
        forceIsAutosaveable: forceIsDirty,
        disabled: isNestedEntity
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_postPreviewButton.default, {
        className: "editor-header__post-preview-button",
        forceIsAutosaveable: forceIsDirty
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_postViewLink.default, {}), isEditorIframed && isWideViewport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoomOutToggle.default, {}), (isWideViewport || !showIconLabels) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_interface.PinnedItems.Slot, {
        scope: "core"
      }), !customSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_postPublishButtonOrToggle.default, {
        forceIsDirty: forceIsDirty,
        setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback
      }), customSaveButton, /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreMenu.default, {})]
    })]
  });
}
var _default = exports.default = Header;
//# sourceMappingURL=index.js.map