Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data Structure: reduce redundancy when storing fonts #12625

Merged
merged 52 commits into from
Dec 2, 2022

Conversation

timarney
Copy link
Contributor

@timarney timarney commented Nov 4, 2022

Context

This is a follow-up to #12131.

Right now when adding 10 text elements all with the same font, there will be 10 font objects being stored, all with the same information. That's very redundant.

Instead of this, consider storing all existing fonts at the story level instead of on each element to reduce redundancy.

Summary

Keeps as much of the existing code i.e. calls to calcFontMetrics(element) the same while reducing how we store the font data.

When Saving or Updating

  • getStoryPropsToSave.js
    • Save fonts data at story level
    • Remove "extra" element font data keep only font family

👉 At this point we should have clean / reduced font storage

When we re-load

  • useLoadStory.js
    • Re-populate the element font data pulling fonts data from story level

👉 At this point we should have clean font data at the story level and the data back on the elements --- meaning code that wants to get the data from the element (font) can do so vs #12445 where I introduced a new elementFontData param for passing font data.

See before and after:
#12625 (comment)

Relevant Technical Choices

To-do

User-facing changes

Testing Instructions

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

This PR makes updates to font strorage we shouldn't see any visual changes while editing, previewing or outputting a story.

  1. Create / edit a story
  2. Preview / insert a story
  3. Look for visual regressions
  4. When saving check the network request see:

#12625 (comment)

If you have access to the database you can check the way stories are saved i.e.
#12625 (comment)

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #12261

@timarney timarney self-assigned this Nov 5, 2022
@timarney timarney added Group: Fonts Pod: WP Package: Story Editor /packages/story-editor Type: Code Quality Things that need a refactor, rewrite or just some good old developer ❤️ Type: Enhancement New feature or improvement of an existing feature labels Nov 10, 2022
@timarney timarney changed the title WIP - update font storage - v2 Data Structure: reduce redundancy when storing fonts - II Nov 10, 2022
@timarney timarney marked this pull request as ready for review November 23, 2022 12:50
@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Nov 23, 2022

Plugin builds for 373f526 are ready 🛎️!

@github-actions
Copy link
Contributor

github-actions bot commented Nov 23, 2022

Size Change: +300 B (0%)

Total Size: 2.71 MB

Filename Size Change
assets/js/wp-story-editor.js 1.43 MB +300 B (0%)
ℹ️ View Unchanged
Filename Size
assets/css/carousel-view-rtl.css 702 B
assets/css/carousel-view.css 701 B
assets/css/web-stories-block-rtl.css 4.54 kB
assets/css/web-stories-block.css 4.58 kB
assets/css/web-stories-embed-rtl.css 318 B
assets/css/web-stories-embed.css 317 B
assets/css/web-stories-list-styles-rtl.css 2.35 kB
assets/css/web-stories-list-styles.css 2.38 kB
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B
assets/css/web-stories-theme-style-twentyten.css 143 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B
assets/css/web-stories-widget-rtl.css 482 B
assets/css/web-stories-widget.css 482 B
assets/css/wp-dashboard-rtl.css 657 B
assets/css/wp-dashboard.css 659 B
assets/css/wp-story-editor-rtl.css 769 B
assets/css/wp-story-editor.css 771 B
assets/js/1047.js 37.6 kB
assets/js/2475.js 7.78 kB
assets/js/3371.js 194 kB
assets/js/4422.js 49.3 kB
assets/js/6071.js 92.9 kB
assets/js/9750.js 12.8 kB
assets/js/carousel-view.js 3.5 kB
assets/js/chunk-colorthief.js 2.64 kB
assets/js/chunk-ffmpeg.js 5.88 kB
assets/js/chunk-html-to-image.js 4.51 kB
assets/js/chunk-opentype.js 96 B
assets/js/chunk-react-calendar.js 22.7 kB
assets/js/chunk-react-color.js 44.3 kB
assets/js/chunk-selfie-segmentation.js 12.5 kB
assets/js/chunk-web-stories-template-0-metaData.js 546 B
assets/js/chunk-web-stories-template-0.js 11.4 kB
assets/js/chunk-web-stories-template-1-metaData.js 540 B
assets/js/chunk-web-stories-template-1.js 9.57 kB
assets/js/chunk-web-stories-template-10-metaData.js 532 B
assets/js/chunk-web-stories-template-10.js 7.34 kB
assets/js/chunk-web-stories-template-11-metaData.js 539 B
assets/js/chunk-web-stories-template-11.js 9.02 kB
assets/js/chunk-web-stories-template-12-metaData.js 496 B
assets/js/chunk-web-stories-template-12.js 9.66 kB
assets/js/chunk-web-stories-template-13-metaData.js 525 B
assets/js/chunk-web-stories-template-13.js 7.37 kB
assets/js/chunk-web-stories-template-14-metaData.js 582 B
assets/js/chunk-web-stories-template-14.js 7.36 kB
assets/js/chunk-web-stories-template-15-metaData.js 544 B
assets/js/chunk-web-stories-template-15.js 8.98 kB
assets/js/chunk-web-stories-template-16-metaData.js 588 B
assets/js/chunk-web-stories-template-16.js 10.8 kB
assets/js/chunk-web-stories-template-17-metaData.js 540 B
assets/js/chunk-web-stories-template-17.js 9.18 kB
assets/js/chunk-web-stories-template-18-metaData.js 587 B
assets/js/chunk-web-stories-template-18.js 9.86 kB
assets/js/chunk-web-stories-template-19-metaData.js 501 B
assets/js/chunk-web-stories-template-19.js 10.8 kB
assets/js/chunk-web-stories-template-2-metaData.js 586 B
assets/js/chunk-web-stories-template-2.js 9.25 kB
assets/js/chunk-web-stories-template-20-metaData.js 548 B
assets/js/chunk-web-stories-template-20.js 8.97 kB
assets/js/chunk-web-stories-template-21-metaData.js 536 B
assets/js/chunk-web-stories-template-21.js 9.84 kB
assets/js/chunk-web-stories-template-22-metaData.js 525 B
assets/js/chunk-web-stories-template-22.js 7.79 kB
assets/js/chunk-web-stories-template-23-metaData.js 604 B
assets/js/chunk-web-stories-template-23.js 7.43 kB
assets/js/chunk-web-stories-template-24-metaData.js 517 B
assets/js/chunk-web-stories-template-24.js 11.6 kB
assets/js/chunk-web-stories-template-25-metaData.js 543 B
assets/js/chunk-web-stories-template-25.js 7.04 kB
assets/js/chunk-web-stories-template-26-metaData.js 600 B
assets/js/chunk-web-stories-template-26.js 7.25 kB
assets/js/chunk-web-stories-template-27-metaData.js 542 B
assets/js/chunk-web-stories-template-27.js 7.78 kB
assets/js/chunk-web-stories-template-28-metaData.js 532 B
assets/js/chunk-web-stories-template-28.js 9.01 kB
assets/js/chunk-web-stories-template-29-metaData.js 561 B
assets/js/chunk-web-stories-template-29.js 9.23 kB
assets/js/chunk-web-stories-template-3-metaData.js 539 B
assets/js/chunk-web-stories-template-3.js 8.38 kB
assets/js/chunk-web-stories-template-30-metaData.js 576 B
assets/js/chunk-web-stories-template-30.js 7.87 kB
assets/js/chunk-web-stories-template-31-metaData.js 503 B
assets/js/chunk-web-stories-template-31.js 10.3 kB
assets/js/chunk-web-stories-template-32-metaData.js 552 B
assets/js/chunk-web-stories-template-32.js 13.2 kB
assets/js/chunk-web-stories-template-33-metaData.js 491 B
assets/js/chunk-web-stories-template-33.js 9.04 kB
assets/js/chunk-web-stories-template-34-metaData.js 570 B
assets/js/chunk-web-stories-template-34.js 7.55 kB
assets/js/chunk-web-stories-template-35-metaData.js 565 B
assets/js/chunk-web-stories-template-35.js 8.87 kB
assets/js/chunk-web-stories-template-36-metaData.js 575 B
assets/js/chunk-web-stories-template-36.js 12.6 kB
assets/js/chunk-web-stories-template-37-metaData.js 529 B
assets/js/chunk-web-stories-template-37.js 6.69 kB
assets/js/chunk-web-stories-template-38-metaData.js 572 B
assets/js/chunk-web-stories-template-38.js 7.89 kB
assets/js/chunk-web-stories-template-39-metaData.js 589 B
assets/js/chunk-web-stories-template-39.js 8.04 kB
assets/js/chunk-web-stories-template-4-metaData.js 564 B
assets/js/chunk-web-stories-template-4.js 12.6 kB
assets/js/chunk-web-stories-template-40-metaData.js 556 B
assets/js/chunk-web-stories-template-40.js 10.1 kB
assets/js/chunk-web-stories-template-41-metaData.js 573 B
assets/js/chunk-web-stories-template-41.js 7.72 kB
assets/js/chunk-web-stories-template-42-metaData.js 521 B
assets/js/chunk-web-stories-template-42.js 6.96 kB
assets/js/chunk-web-stories-template-43-metaData.js 557 B
assets/js/chunk-web-stories-template-43.js 8.7 kB
assets/js/chunk-web-stories-template-44-metaData.js 583 B
assets/js/chunk-web-stories-template-44.js 11 kB
assets/js/chunk-web-stories-template-45-metaData.js 565 B
assets/js/chunk-web-stories-template-45.js 7.48 kB
assets/js/chunk-web-stories-template-46-metaData.js 531 B
assets/js/chunk-web-stories-template-46.js 5.2 kB
assets/js/chunk-web-stories-template-47-metaData.js 591 B
assets/js/chunk-web-stories-template-47.js 9.37 kB
assets/js/chunk-web-stories-template-48-metaData.js 556 B
assets/js/chunk-web-stories-template-48.js 9.05 kB
assets/js/chunk-web-stories-template-49-metaData.js 518 B
assets/js/chunk-web-stories-template-49.js 9.63 kB
assets/js/chunk-web-stories-template-5-metaData.js 556 B
assets/js/chunk-web-stories-template-5.js 9.89 kB
assets/js/chunk-web-stories-template-50-metaData.js 503 B
assets/js/chunk-web-stories-template-50.js 9.09 kB
assets/js/chunk-web-stories-template-51-metaData.js 526 B
assets/js/chunk-web-stories-template-51.js 10.3 kB
assets/js/chunk-web-stories-template-52-metaData.js 601 B
assets/js/chunk-web-stories-template-52.js 10.3 kB
assets/js/chunk-web-stories-template-53-metaData.js 551 B
assets/js/chunk-web-stories-template-53.js 5.76 kB
assets/js/chunk-web-stories-template-54-metaData.js 547 B
assets/js/chunk-web-stories-template-54.js 7.63 kB
assets/js/chunk-web-stories-template-55-metaData.js 574 B
assets/js/chunk-web-stories-template-55.js 7.09 kB
assets/js/chunk-web-stories-template-56-metaData.js 542 B
assets/js/chunk-web-stories-template-56.js 9.81 kB
assets/js/chunk-web-stories-template-57-metaData.js 528 B
assets/js/chunk-web-stories-template-57.js 14.8 kB
assets/js/chunk-web-stories-template-58-metaData.js 554 B
assets/js/chunk-web-stories-template-58.js 5.71 kB
assets/js/chunk-web-stories-template-59-metaData.js 590 B
assets/js/chunk-web-stories-template-59.js 8.92 kB
assets/js/chunk-web-stories-template-6-metaData.js 568 B
assets/js/chunk-web-stories-template-6.js 7.04 kB
assets/js/chunk-web-stories-template-60-metaData.js 509 B
assets/js/chunk-web-stories-template-60.js 9.48 kB
assets/js/chunk-web-stories-template-7-metaData.js 569 B
assets/js/chunk-web-stories-template-7.js 7.43 kB
assets/js/chunk-web-stories-template-8-metaData.js 569 B
assets/js/chunk-web-stories-template-8.js 8.87 kB
assets/js/chunk-web-stories-template-9-metaData.js 580 B
assets/js/chunk-web-stories-template-9.js 8.39 kB
assets/js/chunk-web-stories-templates.js 1.17 kB
assets/js/chunk-web-stories-textset-0.js 5 kB
assets/js/chunk-web-stories-textset-1.js 6.58 kB
assets/js/chunk-web-stories-textset-2.js 7.57 kB
assets/js/chunk-web-stories-textset-3.js 14.6 kB
assets/js/chunk-web-stories-textset-4.js 4.1 kB
assets/js/chunk-web-stories-textset-5.js 5.41 kB
assets/js/chunk-web-stories-textset-6.js 5.21 kB
assets/js/chunk-web-stories-textset-7.js 10 kB
assets/js/generateBlurhash.worker.worker.js 1.1 kB
assets/js/imgareaselect.js 3.77 kB
assets/js/lightbox.js 550 B
assets/js/tinymce-button.js 2.85 kB
assets/js/web-stories-activation-notice.js 27.1 kB
assets/js/web-stories-block.js 22.7 kB
assets/js/web-stories-embed.js 20 B
assets/js/web-stories-widget.js 587 B
assets/js/wp-dashboard.js 63.2 kB

compressed-size-action

Copy link
Contributor

@miina miina left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@swissspidy swissspidy changed the title Data Structure: reduce redundancy when storing fonts - II Data Structure: reduce redundancy when storing fonts Nov 28, 2022
Copy link
Contributor

@merapi merapi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's QA and Bug Bash it 👍🏻

@timarney
Copy link
Contributor Author

timarney commented Nov 29, 2022

@kkalarickal

For testing you should be able to look at the network request when saving

For example:

I added 8 text elements to a page

You should see a fonts property on the story data
Screen Shot 2022-11-29 at 7 08 49 AM

Each individual text element should only contain font family:

Screen Shot 2022-11-29 at 7 12 25 AM

@kkalarickal
Copy link

kkalarickal commented Nov 30, 2022

Confirmed that with the 12625 branch the story_data

  • contains a fonts{...} property common to all pages
  • each page only contains a reference to which font is used, and specific info like font size, opacity etc.
  • if you add more text elements in the page with different fonts, these are added to the top level fonts{...} property

After the change:image.png

Before the change (main branch) with redundant font info per pageimage.png

Screenshot of adding same text but with different size on the same page
image.png

Note that the font info remains the same (a reference to the fonts property), but the size is specific to the element.

@kkalarickal
Copy link

Confirmed that google fonts as well as custom fonts added to the web story plugin both work as expected.
Confirmed that text effects (bold, underline, italics, case, fill, highlight, color, size, opacity, padding etc. are reflected in the preview/published story front end.
Confirmed on Chrome/Firefox/Safari/Opera/Edge that the fonts are appearing as expected.

@timarney
Copy link
Contributor Author

timarney commented Nov 30, 2022

Let's QA and Bug Bash it 👍🏻

@merapi good to merge?

@merapi
Copy link
Contributor

merapi commented Dec 1, 2022

Let's QA and Bug Bash it 👍🏻

@merapi good to merge?

LG to me, I tested in on Windows and was also OK.

@timarney timarney merged commit f4fc019 into main Dec 2, 2022
@timarney timarney deleted the re-op-element-font-data-1 branch December 2, 2022 11:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Fonts Package: Story Editor /packages/story-editor Type: Code Quality Things that need a refactor, rewrite or just some good old developer ❤️ Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Data Structure: reduce redundancy when storing fonts
5 participants