[wp-trac] [WordPress Trac] #56734: Missing newlines in Block Editor code

[WordPress Trac]

#56734: Missing newlines in Block Editor code
--------------------------+------------------------------
 Reporter:  markhoney     |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Editor        |     Version:  6.0.2
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------
Changes (by sabernhardt):

 * focuses:  ui, administration, coding-standards =>


Old description:

> 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?

New description:

 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?

--

Comment:

 Thanks for the report!

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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56734#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform