Opened 2 years ago
Closed 2 years ago
#56734 closed defect (bug) (reported-upstream)
Missing newlines in Block Editor code
Reported by: | markhoney | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 6.0.2 |
Component: | Editor | Keywords: | |
Focuses: | Cc: |
Description (last modified by )
When the new Block Editor generates code, parent/child blocks add a newline between the block comment and block HTML, but none before the block comment. This makes code hard to read, and could be improved by adding two newlines before a block comment. As an example, here's some code generated by a "columns" block with a heading block inside the first column:
<!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"60%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:60%"><!-- wp:heading {"textAlign":"left","level":4} --> <h4 class="has-text-align-left">Heading</h4> <!-- /wp:heading -->
This would be much easier to manually manage if it looked like this:
<!-- wp:columns --> <div class="wp-block-columns"> <!-- wp:column {"verticalAlignment":"center","width":"60%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:60%"> <!-- wp:heading {"textAlign":"left","level":4} --> <h4 class="has-text-align-left">Heading</h4> <!-- /wp:heading -->
A quick look at a couple of pages' code suggests that successive sibling blocks do appear to add newlines before/after in a way that makes them readable. The next part of the example code above is much more readable and looks like this:
<!-- wp:heading {"textAlign":"left","level":4} --> <h4 class="has-text-align-left">Heading</h4> <!-- /wp:heading --> <!-- wp:paragraph {"align":"left"} --> <p class="has-text-align-left">Text here</p> <!-- /wp:paragraph --> <!-- wp:heading {"textAlign":"left","level":4} --> <h4 class="has-text-align-left">Another heading</h4> <!-- /wp:heading -->
There's a similar issue with closing tags. The end of my test page looks like this:
<!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns -->
It would be much more helpful if it looked like this:
<!-- /wp:image --> </div> <!-- /wp:column --> </div> <!-- /wp:columns -->
Is this something that can be fixed/improved upon?
Change History (3)
#2
@
2 years ago
Thanks, submitted here: https://github.com/WordPress/gutenberg/issues/44691
Thanks for the report!
Could you file this on the Gutenberg GitHub repository?
https://github.com/WordPress/gutenberg/issues/new/choose