diff --git a/assets/src/edit-story/components/canvas/multiSelectionMovable.js b/assets/src/edit-story/components/canvas/multiSelectionMovable.js index 8155c9830f9d..c2d0f6b47f1a 100644 --- a/assets/src/edit-story/components/canvas/multiSelectionMovable.js +++ b/assets/src/edit-story/components/canvas/multiSelectionMovable.js @@ -51,7 +51,7 @@ function MultiSelectionMovable({ selectedElements }) { }, } = useCanvas(); const { - actions: { dataToEditorY, editorToDataX, editorToDataY }, + actions: { fontSizeFromEditor, editorToDataX, editorToDataY }, } = useUnits(); const { actions: { pushTransform }, @@ -68,8 +68,8 @@ function MultiSelectionMovable({ selectedElements }) { }, [selectedElements, moveable, nodesById]); const minMaxFontSize = { - minFontSize: dataToEditorY(MIN_FONT_SIZE), - maxFontSize: dataToEditorY(MAX_FONT_SIZE), + minFontSize: fontSizeFromEditor(MIN_FONT_SIZE), + maxFontSize: fontSizeFromEditor(MAX_FONT_SIZE), }; // Create targets list including nodes and also necessary attributes. diff --git a/assets/src/edit-story/components/canvas/singleSelectionMovable.js b/assets/src/edit-story/components/canvas/singleSelectionMovable.js index d5d6680d83a3..a964b178b9ea 100644 --- a/assets/src/edit-story/components/canvas/singleSelectionMovable.js +++ b/assets/src/edit-story/components/canvas/singleSelectionMovable.js @@ -56,15 +56,15 @@ function SingleSelectionMovable({ selectedElement, targetEl, pushEvent }) { }, } = useCanvas(); const { - actions: { getBox, dataToEditorY, editorToDataX, editorToDataY }, + actions: { getBox, fontSizeFromEditor, editorToDataX, editorToDataY }, } = useUnits(); const { actions: { pushTransform }, } = useTransform(); const minMaxFontSize = { - minFontSize: dataToEditorY(MIN_FONT_SIZE), - maxFontSize: dataToEditorY(MAX_FONT_SIZE), + minFontSize: fontSizeFromEditor(MIN_FONT_SIZE), + maxFontSize: fontSizeFromEditor(MAX_FONT_SIZE), }; const otherNodes = Object.values( diff --git a/assets/src/edit-story/components/library/textLibrary.js b/assets/src/edit-story/components/library/textLibrary.js index f8dd73b83e29..c87bba2610fc 100644 --- a/assets/src/edit-story/components/library/textLibrary.js +++ b/assets/src/edit-story/components/library/textLibrary.js @@ -27,6 +27,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import { fontSizeFromData } from '../../units/dimensions'; import { Section, MainButton, Title, SearchInput, Header } from './common'; import { FontPreview } from './text'; @@ -95,6 +96,7 @@ function TextLibrary({ onInsert }) { y: 5, rotationAngle: 0, ...preset, + fontSize: fontSizeFromData(preset.fontSize), }) } /> diff --git a/assets/src/edit-story/units/dimensions.js b/assets/src/edit-story/units/dimensions.js index d9a3ec31425e..af0dc88dddbb 100644 --- a/assets/src/edit-story/units/dimensions.js +++ b/assets/src/edit-story/units/dimensions.js @@ -17,7 +17,11 @@ /** * Internal dependencies */ -import { PAGE_WIDTH, PAGE_HEIGHT } from '../constants'; +import { + PAGE_WIDTH, + PAGE_HEIGHT, + DEFAULT_EDITOR_PAGE_HEIGHT, +} from '../constants'; /** * Rounds the pixel value to the max allowed precision in the "data" space. @@ -87,6 +91,26 @@ export function editorToDataY(y, pageHeight) { return dataPixels((y * PAGE_HEIGHT) / pageHeight); } +/** + * Converts a "data" font size value to the value in the "editor" space + * + * @param {number} size The value to be converted. + * @return {number} The value in the "editor" space. + */ +export function fontSizeFromData(size) { + return editorPixels((size * PAGE_HEIGHT) / DEFAULT_EDITOR_PAGE_HEIGHT); +} + +/** + * Converts a "editor" font size value to the value in the "data" space + * + * @param {number} size The value to be converted. + * @return {number} The value in the "editor" space. + */ +export function fontSizeFromEditor(size) { + return editorPixels((size * DEFAULT_EDITOR_PAGE_HEIGHT) / PAGE_HEIGHT); +} + /** * Converts the element's position, width, and rotation) to the "box" in the * "editor" coordinate space. diff --git a/assets/src/edit-story/units/unitsProvider.js b/assets/src/edit-story/units/unitsProvider.js index 9977063d623d..438a707e1bd4 100644 --- a/assets/src/edit-story/units/unitsProvider.js +++ b/assets/src/edit-story/units/unitsProvider.js @@ -29,6 +29,8 @@ import { dataToEditorY, editorToDataX, editorToDataY, + fontSizeFromData, + fontSizeFromEditor, getBox, } from './dimensions'; @@ -44,6 +46,8 @@ function UnitsProvider({ pageSize, children }) { dataToEditorY: (y) => dataToEditorY(y, pageHeight), editorToDataX: (x) => editorToDataX(x, pageWidth), editorToDataY: (y) => editorToDataY(y, pageHeight), + fontSizeFromData: (size) => fontSizeFromData(size), + fontSizeFromEditor: (size) => fontSizeFromEditor(size), getBox: (element) => getBox(element, pageWidth, pageHeight), }, }),