Wordpress-ios: Notifications: Column Blocks aren't processed

[jleandroperez]

Expected behavior

Comment Notifications containing Column Blocks should layout the content in columns.

Actual behavior

Text isn't laid out in columns

Steps to reproduce the behavior

1. Add a new Comment
2. Insert a Columns Comment
3. Add content to each comment
4. Mention a second User

As a result, whenever User B gets the iOS notification, the contents will not be displayed in columns.

Payload

<!-- wp:heading -->
<h2>Layout: 50/50</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>50/50 Left | BLA BLA BLA BLA</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>50/50 Right| BLA BLA BLA BLA</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

WordPress iOS 15.6, iOS 13

[designsimply]

This might be the intended behavior for small screens. @pinarol @iamthomasbishop I believe you discussed this when working on the columns block in Gutenberg Mobile—can you let us know what you think about how columns should be expected to display in the Reader based on how they look in the block editor?

[iamthomasbishop]

can you let us know what you think about how columns should be expected to display in the Reader based on how they look in the block editor?

@designsimply If I'm understanding correctly, what I would generally expect is for columns to be laid out as they are in the editor, which is as follows (depending on device size):

• Portrait phone: columns span the full container, always stack
• Landscape phone (or larger): up to 3 columns per row

I don't think columns is a case where we necessarily have to match identically, because layouts already can differ wildly between themes. But we did try to find a neutral approach to columns on the mobile editor that would work on a variety of different scenarios, and on narrow viewports specifically, stacking is usually a safe bet.

I'm curious if we are able to define breakpoints in Reader so we can define columns' composition based on that?

@jleandroperez was this on an iPhone?

Side note: We are also in the process of adding support for wide and full width blocks, so we might want to consider honoring those settings to some extent. // cc @pinarol @geriux @maxme

[jleandroperez]

Huh apologies I lost track of this ping. Yes it was an iPhone X!