Skip to content

Make Custom CSS work with FSE #1314

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.

Sign up for GitHub

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

Jump to bottom
Merged
HardeepAsrani merged 3 commits into from
Nov 16, 2022
Merged

Make Custom CSS work with FSE #1314

HardeepAsrani merged 3 commits into from
Nov 16, 2022

Conversation

@HardeepAsrani
Copy link
Member

@HardeepAsrani HardeepAsrani commented Nov 8, 2022 •
edited
Loading

Summary

This fixes the issue with Custom CSS extension not working with FSE & Tablet/Mobile view in Post Editor.

Test instructions

Make sure it works correctly both in back/front in both FSE/Post Editor. It won't work on Widgets/Customizer.

Checklist before the final review

  • Visual elements are not affected by independent changes.
  • It is at least compatible with the minimum WordPress version.
  • It loads additional script in frontend only if it is required.
  • Does not impact the Core Web Vitals.
  • In case of deprecation, old blocks are safely migrated.
  • It is usable in Widgets and FSE.

@pirate-bot
Copy link
Contributor

pirate-bot commented Nov 8, 2022 •
edited
Loading

Bundle Size Diff

Package Old Size New Size Diff
Animations 191.24 KB 191.24 KB 0 B (0.00%)
Blocks 1.28 MB 1.28 MB 0 B (0.00%)
CSS 6.25 KB 6.65 KB 408 B (6.37%)
Dashboard 43.12 KB 43.12 KB 0 B (0.00%)
Export Import 5.06 KB 5.06 KB 0 B (0.00%)
Pro 134.25 KB 134.25 KB 0 B (0.00%)

@github-actions
Copy link

github-actions bot commented Nov 8, 2022 •
edited
Loading

Plugin build for 52864af is ready 🛎️!

@pirate-bot
Copy link
Contributor

pirate-bot commented Nov 8, 2022 •
edited
Loading

E2E Summary

Typing

Test Average Time (ms) Standard Deviation (ms) Median Time (ms) Quantile for soft limit (%) Quantile for hard limit (%)
Typing 58.82 21.16 50.77 69.7 (60ms) 93.94 (80ms)
Values above 60ms "6 - 62.65, 14 - 74.06, 18 - 77.70, 22 - 75.06, 24 - 85.93, 29 - 78.75, 34 - 75.99, 35 - 62.82, 36 - 75.37, 38 - 90.88, 43 - 74.53, 45 - 230.31, 47 - 80.27, 49 - 80.12, 53 - 69.34, 55 - 75.48, 60 - 69.78, 61 - 72.16, 62 - 75.33, 67 - 72.51, 69 - 72.57, 71 - 75.39, 73 - 74.47, 76 - 79.00, 79 - 73.40, 82 - 80.09, 87 - 74.77, 94 - 77.50, 97 - 73.26, 98 - 63.03"

@irinelenache
Copy link
Contributor

irinelenache commented Nov 9, 2022

@HardeepAsrani Tested and the issue is fixed for Mobile/Tablet view in single posts, but it still isn't working in the Site editor, both editor and frontend.

You can check on this instance:

 Admin area URL: https://neve-pods.s3-tastewp.com/wp-admin 
 Username: irinel 
 Password: nfydH_Jzjz4

@HardeepAsrani
Copy link
Member Author

HardeepAsrani commented Nov 9, 2022

I tried on your instance and it seems to work fine for me. Can you confirm?

Screenshot 2022-11-09 at 11 18 34 PM

Screenshot 2022-11-09 at 11 18 37 PM

@irinelenache
Copy link
Contributor

irinelenache commented Nov 10, 2022

@HardeepAsrani I checked again and i was trying to add custom css to blocks that were inside the Post content block, and nothing was applied https://vertis.d.pr/i/u9Z2aG. When i added the same blocks as top level blocks and added the CSS, they looked ok https://vertis.d.pr/i/bTKlxR. Let me know if this is the expected behaviour

Also, after i refresh the site editor, the CSS is not applied anymore, until i make a change to it. Here is a video to better outline the issue https://vertis.d.pr/v/wvJdKu

@HardeepAsrani
Copy link
Member Author

HardeepAsrani commented Nov 14, 2022

@irinelenache

I checked again and i was trying to add custom css to blocks that were inside the Post content block, and nothing was applied https://vertis.d.pr/i/u9Z2aG. When i added the same blocks as top level blocks and added the CSS, they looked ok https://vertis.d.pr/i/bTKlxR. Let me know if this is the expected behaviour

It's happening because some of those items require you to be more specific, like for Post Title, you need to target the link inside instead of just selector.

I'll fix the other one.

@irinelenache
Copy link
Contributor

irinelenache commented Nov 15, 2022

@HardeepAsrani Thanks for explaining, the second issue is fixed now so i'm moving this to Ready to merge 🚀

@HardeepAsrani HardeepAsrani merged commit 6bf21df into development Nov 16, 2022
@HardeepAsrani HardeepAsrani deleted the css-fse branch November 16, 2022 11:47
@HardeepAsrani HardeepAsrani mentioned this pull request Nov 16, 2022
Merged
7 tasks
@pirate-bot
Copy link
Contributor

pirate-bot commented Nov 21, 2022

🎉 This PR is included in version 2.1.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@pirate-bot pirate-bot added the released Indicate that an issue has been resolved and released in a particular version of the product. label Nov 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

released Indicate that an issue has been resolved and released in a particular version of the product.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@HardeepAsrani @pirate-bot @irinelenache