Columns block styles needs polishing and probably markup changes in the editor

[samikeijonen]

Describe the bug

Columns block styles needs polishing in the front-end and in the editor. Responsive styles for starters.

But a bigger issue that I noticed is the markup.

Front-end markup

<div class="wp-block-columns has-2-columns">
   <div class="wp-block-column">
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.</p>
   </div>
	
   <div class="wp-block-column">
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.</p>
   </div>
</div>

This is now OK for basic columns. And we can style columns as we want.

Example CSS

.wp-core-columns {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(2, 1fr);

   // etc.
}

In the editor the markup looks like this:

<div class="wp-block-columns has-2-columns">
   <div class="editor-inner-blocks">
      <div class="editor-block-list__layout">
         <div class="editor-block-list__block">
            <p>Blocks somewhere over here.</p>
         </div>

         <div class="editor-block-list__block">
            <p>Blocks somewhere over here.</p>
         </div>
      </div>
   </div>
</div>

Which means that wp-block-columns always have only one direct wrapper <div class="editor-inner-blocks"> inside it and there is no <div class="wp-block-column"> anywhere.

Expected behavior
Have <div class="wp-block-column"> wrappers in the editor also so that styles would work.

Screenshots
With example CSS columns in the editor looks like this:

It's in 2 columns because of Core styles but other than that it doesn't respect any of my styles.

[mmilad]

is there any progress regarding this issue?
it would be nice enough to pass a class to editor-block-list__block

[erikjoling]

I'm also noticing strange behaviour related to the markup in the editor.

Let's say we have this gutenberg code.

<!-- wp:columns -->
<div class="wp-block-columns has-2-columns">

	<!-- wp:column -->
	<div class="wp-block-column">
		<!-- wp:paragraph -->
		<p>Paragraph</p>
		<!-- /wp:paragraph -->
	</div>
	<!-- /wp:column -->

	<!-- wp:column {"className":"custom-class-name"} -->
	<div class="wp-block-column custom-class-name">
		<!-- wp:paragraph -->
		<p>Paragraph</p>
		<!-- /wp:paragraph -->
	</div>
	<!-- /wp:column -->
	
</div>
<!-- /wp:columns -->

Currently, in the editor, this is turned into:

<!-- Editor (removed UI markup for clarity) -->
<div class="wp-block-columns has-2-columns">
	<div class="block-core-columns">
		<p class="wp-block-paragraph"></p>
	</div>
	<div class="block-core-columns">
		<p class="wp-block-paragraph"></p>
	</div>
</div>

I would expect the column class to be wp-block-column in stead of block-core-columns.

And I would expect custom-class-name to be added to the second column class.

[youknowriad]

I think this is going to be fixed by the work @ellatrix is doing on the light BlockWrapper