GoogleForCreators · timarney · Dec 2, 2022 · Nov 4, 2022 · Nov 5, 2022 · Nov 5, 2022
diff --git a/packages/output/src/index.js b/packages/output/src/index.js
@@ -16,5 +16,6 @@
 
 export { default as OutputStory } from './story';
 export { default as getStoryMarkup } from './utils/getStoryMarkup';
+export { populateElementFontData } from './utils/populateElementFontData';
 export { default as getTextElementTagNames } from './utils/getTextElementTagNames';
 export * from './constants';
diff --git a/packages/output/src/story.js b/packages/output/src/story.js
@@ -30,12 +30,14 @@ import CustomCSS from './utils/styles';
 import FontDeclarations from './utils/fontDeclarations';
 import OutputPage from './page';
 import getPreloadResources from './utils/getPreloadResources';
+import { populateElementFontData } from './utils/populateElementFontData';
 
 function OutputStory({
   story: {
     featuredMedia,
     link,
     title,
+    fonts,
     autoAdvance,
     defaultPageDuration,
     backgroundAudio,
@@ -51,6 +53,11 @@ function OutputStory({
   const featuredMediaUrl = featuredMedia?.url || '';
   const publisherLogoUrl = publisherLogo?.url || '';
 
+  if (fonts && Object.keys(fonts).length >= 1) {
+    // if fonts are stored at the story level, populate the font data to the elements
+    pages = populateElementFontData(pages, fonts);
+  }
+
   return (
     <html amp="" lang="en">
       <head>
@@ -100,6 +107,7 @@ function OutputStory({
 
 OutputStory.propTypes = {
   story: PropTypes.shape({
+    fonts: PropTypes.object,
     link: PropTypes.string,
     title: PropTypes.string.isRequired,
     autoAdvance: PropTypes.bool,

diff --git a/packages/output/src/test/story.js b/packages/output/src/test/story.js
@@ -49,6 +49,7 @@ describe('Story output', () => {
           width: 640,
           height: 853,
         },
+        fonts: {},
         publisherLogo: {
           id: 1,
           url: 'https://example.com/logo.png',

diff --git a/packages/output/src/utils/populateElementFontData.js b/packages/output/src/utils/populateElementFontData.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function populateElementFontProperties({ elements, ...rest }, fonts) {
+  if (!fonts) {
+    return { elements, ...rest };
+  }
+
+  return {
+    elements: elements.map((element) => {
+      if (element.type === 'text' && Boolean(element.font?.family)) {
+        return { ...element, font: fonts[element.font?.family] };
+      }
+      return element;
+    }),
+    ...rest,
+  };
+}
+
+export function populateElementFontData(data, fonts) {
+  return data.map((page) => populateElementFontProperties(page, fonts));
+}
diff --git a/packages/output/src/utils/test/getStoryMarkup.js b/packages/output/src/utils/test/getStoryMarkup.js
@@ -52,6 +52,7 @@ describe('getStoryMarkup', () => {
         width: 640,
         height: 853,
       },
+      fonts: {},
       password: '',
     };
     const metadata = {

diff --git a/packages/output/src/utils/test/populateElementFontData.js b/packages/output/src/utils/test/populateElementFontData.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Internal dependencies
+ */
+import { populateElementFontData } from '../populateElementFontData';
+
+describe('populateElementFontData', () => {
+  it('adds font properties to elements', () => {
+    const fonts = {
+      Oswald: {
+        family: 'Oswald',
+        service: 'fonts.google.com',
+        metrics: { upm: 1000, asc: 1050, des: -350 },
+      },
+      Roboto: {
+        family: 'Roboto',
+        service: 'fonts.google.com',
+        metrics: { upm: 1000, asc: 1048, des: -271 },
+      },
+    };
+
+    const pages = [
+      {
+        elements: [
+          { type: 'text', font: { family: 'Oswald' } },
+          { type: 'shape' },
+        ],
+      },
+      {
+        elements: [
+          { type: 'shape' },
+          { type: 'text', font: { family: 'Roboto' } },
+        ],
+      },
+    ];
+
+    const newPages = populateElementFontData(pages, fonts);
+    expect(newPages[0].elements[0]).toStrictEqual({
+      type: 'text',
+      font: { ...fonts['Oswald'] },
+    });
+    expect(newPages[1].elements[1]).toStrictEqual({
+      type: 'text',
+      font: { ...fonts['Roboto'] },
+    });
+  });
+});
diff --git a/packages/story-editor/src/app/story/actions/test/useAutoSave.js b/packages/story-editor/src/app/story/actions/test/useAutoSave.js
@@ -81,6 +81,7 @@ describe('useAutoSave', () => {
         height: 100,
         width: 100,
       },
+      fonts: {},
       password: '',
       globalStoryStyles: '',
       taxonomies: [],
@@ -155,6 +156,7 @@ describe('useAutoSave', () => {
         height: 100,
         width: 100,
       },
+      fonts: {},
       password: '',
       globalStoryStyles: '',
       taxonomies: [],

diff --git a/packages/story-editor/src/app/story/effects/useLoadStory.js b/packages/story-editor/src/app/story/effects/useLoadStory.js
@@ -20,6 +20,7 @@
 import { useEffect } from '@googleforcreators/react';
 import { migrate } from '@googleforcreators/migration';
 import { createPage } from '@googleforcreators/elements';
+import { populateElementFontData } from '@googleforcreators/output';
 
 /**
  * Internal dependencies
@@ -82,7 +83,13 @@ function loadStory(storyId, post, restore, clearHistory, globalConfig) {
   // If there are no pages, create empty page.
   const storyData =
     storyDataRaw && migrate(storyDataRaw, storyDataRaw.version || 0);
-  const pages = storyData?.pages?.length > 0 ? storyData.pages : [createPage()];
+  let pages = storyData?.pages?.length > 0 ? storyData.pages : [createPage()];
+
+  if (storyData?.fonts && Object.keys(storyData?.fonts).length >= 1) {
+    // fonts are stored in storyData,
+    // so we need to populate the font data back to the elements
+    pages = populateElementFontData(pages, storyData?.fonts);
+  }
 
   // Initialize color/style presets, if missing.
   // Otherwise ensure the saved presets are unique.
@@ -99,6 +106,7 @@ function loadStory(storyId, post, restore, clearHistory, globalConfig) {
   const story = {
     storyId: storyId,
     title,
+    fonts: storyData?.fonts || {},
     status,
     author,
     date,

diff --git a/packages/story-editor/src/app/story/useStoryReducer/test/addElementsAcrossPages.js b/packages/story-editor/src/app/story/useStoryReducer/test/addElementsAcrossPages.js
@@ -36,6 +36,7 @@ describe('addElementsAcrossPages', () => {
       ],
       current: '111',
       selection: ['000'],
+      story: { fonts: {} },
     });
 
     const result = addElementsAcrossPages({
@@ -98,7 +99,7 @@ describe('addElementsAcrossPages', () => {
       animationState: STORY_ANIMATION_STATE.RESET,
       capabilities: {},
       copiedElementState: {},
-      story: {},
+      story: { fonts: {} },
     });
   });
 });
diff --git a/packages/story-editor/src/app/story/useStoryReducer/test/restore.js b/packages/story-editor/src/app/story/useStoryReducer/test/restore.js
@@ -107,7 +107,7 @@ describe('restore', () => {
       pages: [],
       selection: [],
       current: null,
-      story: {},
+      story: { fonts: {} },
     });
   });
 
@@ -125,7 +125,7 @@ describe('restore', () => {
       pages: [],
       selection: [],
       current: null,
-      story: {},
+      story: { fonts: {} },
     });
   });
 

diff --git a/packages/story-editor/src/app/story/useStoryReducer/test/updateStory.js b/packages/story-editor/src/app/story/useStoryReducer/test/updateStory.js
@@ -25,14 +25,14 @@ describe('updateStory', () => {
 
     const result = updateStory({ properties: { a: 1, b: 2 } });
 
-    expect(result.story).toStrictEqual({ a: 1, b: 2 });
+    expect(result.story).toStrictEqual({ a: 1, b: 2, fonts: {} });
   });
 
   it('should update story with property updater function which will overwrite existing values', () => {
     const { updateStory } = setupReducer();
 
     const firstResult = updateStory({ properties: { a: 1, b: 2 } });
-    expect(firstResult.story).toStrictEqual({ a: 1, b: 2 });
+    expect(firstResult.story).toStrictEqual({ a: 1, b: 2, fonts: {} });
 
     const secondResult = updateStory({
       properties: (old) => ({ b: old.b + 2 }),
@@ -45,9 +45,9 @@ describe('updateStory', () => {
     const { updateStory } = setupReducer();
 
     const firstResult = updateStory({ properties: { a: 1, b: 2 } });
-    expect(firstResult.story).toStrictEqual({ a: 1, b: 2 });
+    expect(firstResult.story).toStrictEqual({ a: 1, b: 2, fonts: {} });
 
     const secondResult = updateStory({ properties: { b: 3, c: 4 } });
-    expect(secondResult.story).toStrictEqual({ a: 1, b: 3, c: 4 });
+    expect(secondResult.story).toStrictEqual({ a: 1, b: 3, c: 4, fonts: {} });
   });
 });
diff --git a/packages/story-editor/src/app/story/useStoryReducer/useStoryReducer.js b/packages/story-editor/src/app/story/useStoryReducer/useStoryReducer.js
@@ -31,7 +31,7 @@ const INITIAL_STATE = {
   capabilities: {},
   current: null,
   selection: [],
-  story: {},
+  story: { fonts: {} },
   animationState: STORY_ANIMATION_STATE.RESET,
   copiedElementState: {},
 };

diff --git a/packages/story-editor/src/app/story/utils/cleanElementFontProperties.js b/packages/story-editor/src/app/story/utils/cleanElementFontProperties.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function reduceElementFontProperties({ elements, ...rest }) {
+  return {
+    elements: elements.map((element) => {
+      if (element.type === 'text' && Boolean(element.font?.family)) {
+        return { ...element, font: { family: element.font.family } };
+      }
+      return element;
+    }),
+    ...rest,
+  };
+}
+
+export function cleanElementFontProperties(data) {
+  return data.map((page) => reduceElementFontProperties(page));
+}
diff --git a/packages/story-editor/src/app/story/utils/getStoryFontsFromPages.js b/packages/story-editor/src/app/story/utils/getStoryFontsFromPages.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function getStoryFontsFromPages(pages) {
+  const fonts = {};
+  pages.forEach(({ elements = [] }) =>
+    elements.forEach((element) => {
+      if (element.type === 'text' && Boolean(element.font?.family)) {
+        fonts[element.font.family] = element.font;
+      }
+    })
+  );
+  return fonts;
+}
diff --git a/packages/story-editor/src/app/story/utils/getStoryPropsToSave.js b/packages/story-editor/src/app/story/utils/getStoryPropsToSave.js
@@ -23,10 +23,13 @@ import { getStoryMarkup } from '@googleforcreators/output';
  */
 import objectPick from '../../../utils/objectPick';
 import getAllProducts from './getAllProducts';
+import { cleanElementFontProperties } from './cleanElementFontProperties';
+import { getStoryFontsFromPages } from './getStoryFontsFromPages';
 
 function getStoryPropsToSave({ story, pages, metadata, flags }) {
-  const { terms, ...propsFromStory } = objectPick(story, [
+  const { terms, fonts, ...propsFromStory } = objectPick(story, [
     'title',
+    'fonts',
     'status',
     'author',
     'date',
@@ -43,12 +46,26 @@ function getStoryPropsToSave({ story, pages, metadata, flags }) {
     'backgroundAudio',
     'terms',
   ]);
-  const products = getAllProducts(pages);
-  const content = getStoryMarkup(story, pages, metadata, flags);
+
+  // clean up fonts to store at the story level
+  // this avoids storing the same font (properties) multiple times
+  // see: https://github.com/GoogleForCreators/web-stories-wp/issues/12261
+  const cleandFonts = getStoryFontsFromPages(pages);
+  // clean up text elements to remove font properties from individual elements
+  const cleanedPages = cleanElementFontProperties(pages);
+  const products = getAllProducts(cleanedPages);
+  const content = getStoryMarkup(
+    { ...story, fonts: cleandFonts },
+    cleanedPages,
+    metadata,
+    flags
+  );
+
   return {
     content,
-    pages,
+    pages: cleanedPages,
     ...propsFromStory,
+    fonts: cleandFonts,
     ...terms,
     products,
   };