@wordpress/editor/build-module/utils/device-type.mjs

Enhanced block editor for WordPress posts.

// packages/editor/src/utils/device-type.js
import { privateApis as globalStylesEnginePrivateApis } from "@wordpress/global-styles-engine";
import { unlock } from "../lock-unlock.mjs";
var { getViewportBreakpoints, getViewportBreakpointValueInPixels } = unlock(
  globalStylesEnginePrivateApis
);
var VIEWPORT_KEY_BY_DEVICE_TYPE = {
  Tablet: "tablet",
  Mobile: "mobile"
};
var DESKTOP_DEVICE_TYPE = "Desktop";
var TABLET_DEVICE_TYPE = "Tablet";
var MOBILE_DEVICE_TYPE = "Mobile";
var DEVICE_PREVIEW_WIDTH_OFFSET = 1;
var VIEWPORT_STATE_BY_DEVICE_TYPE = {
  Desktop: "default",
  Tablet: "@tablet",
  Mobile: "@mobile"
};
function getDeviceTypeByCanvasWidth(canvasWidth, viewportSettings) {
  const width = getViewportBreakpointValueInPixels(canvasWidth);
  const breakpoints = getViewportBreakpoints(viewportSettings);
  if (width && width <= getViewportBreakpointValueInPixels(breakpoints.mobile)) {
    return MOBILE_DEVICE_TYPE;
  }
  if (width && width <= getViewportBreakpointValueInPixels(breakpoints.tablet)) {
    return TABLET_DEVICE_TYPE;
  }
  return DESKTOP_DEVICE_TYPE;
}
function getCanvasWidthByDeviceType(deviceType, viewportSettings) {
  const viewportKey = VIEWPORT_KEY_BY_DEVICE_TYPE[deviceType];
  if (!viewportKey) {
    return void 0;
  }
  const breakpoints = getViewportBreakpoints(viewportSettings);
  const width = getViewportBreakpointValueInPixels(
    breakpoints[viewportKey]
  );
  if (width === void 0) {
    return void 0;
  }
  let lowerBreakpoint = 0;
  if (deviceType === TABLET_DEVICE_TYPE) {
    lowerBreakpoint = getViewportBreakpointValueInPixels(breakpoints.mobile) ?? 0;
  }
  const offset = Math.min(
    DEVICE_PREVIEW_WIDTH_OFFSET,
    (width - lowerBreakpoint) / 2
  );
  return width - offset;
}
export {
  VIEWPORT_STATE_BY_DEVICE_TYPE,
  getCanvasWidthByDeviceType,
  getDeviceTypeByCanvasWidth
};
//# sourceMappingURL=device-type.mjs.map