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

Audit of block markup between frontend and editor #23256

Closed
oxyc opened this issue Jun 17, 2020 · 1 comment
Closed

Audit of block markup between frontend and editor #23256

oxyc opened this issue Jun 17, 2020 · 1 comment
Labels
[Package] Block library /packages/block-library [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.

Comments

@oxyc
Copy link
Member

oxyc commented Jun 17, 2020

I thought it would be a good idea to keep track of the blocks with mismatching DOM elements between frontend and editor. Some of these are obviously not fixable (shortcode, html). I err on the side of caution (and need to log off) so just let me know and I can strike a block that's impossible to match.

Also I havent tested any of the FSE blocks, just let me know if I should mark something. Otherwise I'll get to them at some point I guess.

Block
Archive Contains wrapper divs: <Disabled>, <ServerSideRender>, Block
Audio Contains an extra div from <Disabled>, is this fine?
Reusable Block Multiple wrapper divs, can probably never match exactly but can it be improved?
x Button Except <div> instead of <a> but that's fine since they share a class I think
Buttons InnerBlock wrapper. Fixed in #23222 but needs technical input
Calendar Contains wrapper divs: <Disabled>, <ServerSideRender>, Block
Categories Contains wrapper divs and generally wrong classes for elements
Classic Contains wrapper divs
x Code
x Column
x Columns
x Cover
Embed Contains one wrapper div (guess it just needs light block)
File Contains one wrapper div and extra inner div.wp-block-file__content-wrapper
Gallery Contains one wrapper div and missing figcaption.blocks-gallery-item__caption
x Group
x Heading
HTML
Image <img> is nested within one extra div
Latest Comments Contains wrapper divs: <Disabled>, <ServerSideRender>, Block
Latest Posts One wrapper div
Legacy Widget Havent tested
x List
Media Text Multiple incorrect divs. Fixed in #23062
Missing Does not apply
More Does not apply
x Navigation
x Navigation link Except using <div> instead of <a> but that's fine I guess?
Next page Havent tested
x Paragraph
Post Author Havent tested
Post Comments Havent tested
Post Comments Count Havent tested
Post Content Havent tested
Post Date Havent tested
Post Excerpt Havent tested
Post Featured image Havent tested
Post Tags Havent tested
Post Title Havent tested
x Preformatted
Pullquote Contains wrapper div and one extra wrapper around the content, separating it from citation. Also not using <cite>
Query Havent tested
Query loop Havent tested
Query pagination Havent tested
Quote Contains wrapper div and one extra wrapper around the content, separating it from citation. Also not using <cite>. Partially #23034
RSS Contains wrapper divs: <Disabled>, <ServerSideRender>, Block
Search Havent tested
Separator Contains wrapper div
Shortcode Not feasible
Site title Havent tested
Social link Matches except it uses <button> instead of <a>, and as this has no class there's no common selector for it
x Social links
Subhead Havent tested
Spacer Contains wrapper div and missing classnames on actual <div>. Classnames fixed in #23235 but need assistance about wrapper div
Table Contains wrapper div
Tag Cloud Contains wrapper divs: <ServerSideRender>, Block
Template part Havent tested
Text columns Havent tested
x Verse
Video Contains an extra div from <Disabled>, is this fine?
Widget area Havent tested
@gziolo gziolo added [Package] Block library /packages/block-library [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. labels Jun 19, 2020
@gziolo
Copy link
Member

gziolo commented Jun 19, 2020

@ellatrix should be able to help here as she is leading efforts to make the markup look as close as possible between the front-end snd the editor.

@oxyc oxyc closed this as completed Nov 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Block library /packages/block-library [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Projects
None yet
Development

No branches or pull requests

2 participants