@wordpress/editor/build-module/components/preview-dropdown/index.mjs

Enhanced block editor for WordPress posts.

// packages/editor/src/components/preview-dropdown/index.js
import clsx from "clsx";
import { useViewportMatch } from "@wordpress/compose";
import {
  DropdownMenu,
  MenuGroup,
  MenuItem,
  MenuItemsChoice
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { desktop, mobile, tablet, external, check } from "@wordpress/icons";
import { useSelect, useDispatch } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import { store as preferencesStore } from "@wordpress/preferences";
import { ActionItem, store as interfaceStore } from "@wordpress/interface";
import { store as blockEditorStore } from "@wordpress/block-editor";
import { privateApis as globalStylesEnginePrivateApis } from "@wordpress/global-styles-engine";
import { VisuallyHidden } from "@wordpress/ui";
import { store as editorStore } from "../../store/index.mjs";
import { PostPreviewMenuItem } from "../post-preview-button/index.mjs";
import { sidebars } from "../sidebar/constants.mjs";
import { VIEWPORT_STATE_BY_DEVICE_TYPE } from "../../utils/device-type.mjs";
import { unlock } from "../../lock-unlock.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var { getViewportBreakpoints } = unlock(globalStylesEnginePrivateApis);
function PreviewDropdown({ forceIsAutosaveable, disabled }) {
  const {
    deviceType,
    homeUrl,
    hasMobileViewport,
    hasTabletViewport,
    isTemplate,
    isViewable,
    showIconLabels,
    isTemplateHidden,
    templateId,
    isResponsiveEditing,
    isResponsiveEditingEnabled,
    hasBlockSelection,
    activeComplementaryArea
  } = useSelect((select) => {
    const {
      getCurrentPostType,
      getCurrentTemplateId,
      getRenderingMode,
      getDeviceType,
      getEditorSettings
    } = unlock(select(editorStore));
    const {
      isResponsiveEditing: _isResponsiveEditing,
      getBlockSelectionStart,
      getSettings
    } = unlock(select(blockEditorStore));
    const { getEntityRecord, getPostType } = select(coreStore);
    const { get } = select(preferencesStore);
    const _currentPostType = getCurrentPostType();
    const viewportBreakpoints = getViewportBreakpoints(
      getSettings().__experimentalFeatures?.viewport
    );
    return {
      deviceType: getDeviceType(),
      homeUrl: getEntityRecord("root", "__unstableBase")?.home,
      hasMobileViewport: viewportBreakpoints.mobile !== void 0,
      hasTabletViewport: viewportBreakpoints.tablet !== void 0,
      isTemplate: _currentPostType === "wp_template",
      isViewable: getPostType(_currentPostType)?.viewable ?? false,
      showIconLabels: get("core", "showIconLabels"),
      isTemplateHidden: getRenderingMode() === "post-only",
      templateId: getCurrentTemplateId(),
      isResponsiveEditing: _isResponsiveEditing(),
      isResponsiveEditingEnabled: getEditorSettings().responsiveEditingEnabled,
      hasBlockSelection: !!getBlockSelectionStart(),
      activeComplementaryArea: select(interfaceStore).getActiveComplementaryArea("core")
    };
  }, []);
  const { setDeviceType, setRenderingMode, setDefaultRenderingMode } = unlock(
    useDispatch(editorStore)
  );
  const { resetZoomLevel, setStyleStateViewport, setResponsiveEditing } = unlock(useDispatch(blockEditorStore));
  const { enableComplementaryArea } = useDispatch(interfaceStore);
  const handleDevicePreviewChange = (newDeviceType) => {
    setDeviceType(newDeviceType);
    resetZoomLevel();
  };
  const handleResponsiveEditingChange = () => {
    const newIsResponsiveEditing = !isResponsiveEditing;
    setResponsiveEditing(newIsResponsiveEditing);
    setStyleStateViewport(
      newIsResponsiveEditing ? VIEWPORT_STATE_BY_DEVICE_TYPE[deviceType] ?? "default" : "default"
    );
    if (newIsResponsiveEditing && hasBlockSelection && !activeComplementaryArea) {
      enableComplementaryArea("core", sidebars.block);
    }
  };
  const isMobile = useViewportMatch("medium", "<");
  if (isMobile) {
    return null;
  }
  const popoverProps = {
    placement: "bottom-end"
  };
  const toggleProps = {
    className: "editor-preview-dropdown__toggle",
    iconPosition: "right",
    size: "compact",
    showTooltip: !showIconLabels,
    disabled,
    accessibleWhenDisabled: disabled
  };
  const menuProps = {
    "aria-label": __("View options")
  };
  const deviceIcons = {
    desktop,
    mobile,
    tablet
  };
  const choices = [
    {
      value: "Desktop",
      label: __("Desktop"),
      icon: desktop,
      info: isResponsiveEditing ? __("Style all viewports.") : __("Preview desktop viewport.")
    },
    ...hasTabletViewport ? [
      {
        value: "Tablet",
        label: __("Tablet"),
        icon: tablet,
        info: isResponsiveEditing ? __("Style tablet only.") : __("Preview tablet viewport.")
      }
    ] : [],
    ...hasMobileViewport ? [
      {
        value: "Mobile",
        label: __("Mobile"),
        icon: mobile,
        info: isResponsiveEditing ? __("Style mobile only.") : __("Preview mobile viewport.")
      }
    ] : []
  ];
  return /* @__PURE__ */ jsx(
    DropdownMenu,
    {
      className: clsx(
        "editor-preview-dropdown",
        `editor-preview-dropdown--${deviceType.toLowerCase()}`,
        { "is-responsive-editing": isResponsiveEditing }
      ),
      popoverProps,
      toggleProps,
      menuProps,
      icon: deviceIcons[deviceType.toLowerCase()],
      label: __("View"),
      disableOpenOnArrowDown: disabled,
      children: ({ onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(MenuGroup, { children: /* @__PURE__ */ jsx(
          MenuItemsChoice,
          {
            choices,
            value: deviceType,
            onSelect: handleDevicePreviewChange
          }
        ) }),
        isResponsiveEditingEnabled && /* @__PURE__ */ jsx(MenuGroup, { children: /* @__PURE__ */ jsx(
          MenuItem,
          {
            icon: isResponsiveEditing ? check : void 0,
            isSelected: isResponsiveEditing,
            role: "menuitemcheckbox",
            onClick: handleResponsiveEditingChange,
            info: __(
              "Style changes apply only to the selected viewport."
            ),
            children: __("Responsive styles")
          }
        ) }),
        isTemplate && /* @__PURE__ */ jsx(MenuGroup, { children: /* @__PURE__ */ jsxs(
          MenuItem,
          {
            href: homeUrl,
            target: "_blank",
            icon: external,
            onClick: onClose,
            children: [
              __("View site"),
              /* @__PURE__ */ jsx(VisuallyHidden, {
                render: /* @__PURE__ */ jsx("span", {}),
                /* translators: accessibility text */
                children: __("(opens in a new tab)")
              })
            ]
          }
        ) }),
        !isTemplate && !!templateId && /* @__PURE__ */ jsx(MenuGroup, { children: /* @__PURE__ */ jsx(
          MenuItem,
          {
            icon: !isTemplateHidden ? check : void 0,
            isSelected: !isTemplateHidden,
            role: "menuitemcheckbox",
            onClick: () => {
              const newRenderingMode = isTemplateHidden ? "template-locked" : "post-only";
              setRenderingMode(newRenderingMode);
              setDefaultRenderingMode(newRenderingMode);
              resetZoomLevel();
            },
            children: __("Show template")
          }
        ) }),
        isViewable && /* @__PURE__ */ jsx(MenuGroup, { children: /* @__PURE__ */ jsx(
          PostPreviewMenuItem,
          {
            forceIsAutosaveable,
            onPreview: onClose
          }
        ) }),
        /* @__PURE__ */ jsx(
          ActionItem.Slot,
          {
            name: "core/plugin-preview-menu",
            fillProps: { onClick: onClose }
          }
        )
      ] })
    }
  );
}
export {
  PreviewDropdown as default
};
//# sourceMappingURL=index.mjs.map