Make WordPress Core

#56734 closed defect (bug) (reported-upstream)

Missing newlines in Block Editor code

Reported by: markhoney's profile markhoney Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.0.2
Component: Editor Keywords:
Focuses: Cc:

Description (last modified by sabernhardt)

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)

#1 @sabernhardt
22 months ago

  • Description modified (diff)
  • Focuses ui administration coding-standards removed

Thanks for the report!

Could you file this on the Gutenberg GitHub repository?
https://github.com/WordPress/gutenberg/issues/new/choose

#3 @sabernhardt
22 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Nice! Thanks for moving it!

Note: See TracTickets for help on using tickets.