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

[WIP] Layout block support: Try replacing uniqid class name with descriptive class names #36847

Conversation

andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Nov 25, 2021

Description

🚧 🚧 🚧 🚧 🚧

This is a WIP PR exploring an idea for swapping out the randomly generated .wp-container-xxxx class names used by the Layout block support with descriptive classnames that we can then use to programmatically regenerate CSS in the editor from rendered markup. The goal is to find a way to resolve #35376 and this exploration follows the approach suggested (as an exploration) in this comment.

To-dos 🔨

  • Replace the server-rendered randomly generated class names with descriptive class names
  • See if we can extract the classnames from within the Post Content block
  • See if we can regenerate the styles from within the block editor, based on the classnames
  • If the approach looks viable, see if we can clean up the approach / make it tidy / add some tests
  • See if we can de-dupe the generated styles

WIP Screenshots

Step 1: render descriptive class names:

image

How has this been tested?

TBC

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@andrewserong andrewserong added [Type] Bug An existing feature does not function as intended [Block] Post Content Affects the Post Content Block labels Nov 25, 2021
@andrewserong andrewserong self-assigned this Nov 25, 2021
@andrewserong
Copy link
Contributor Author

I'm just closing out this draft PR exploration, as we'll revisit how we construct class names as part of server rendering in the style engine (tracked in #38167).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Content Affects the Post Content Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Post Content: Layout styles not applied in editor (e.g. Social Icons, Buttons, etc.)
1 participant