wpengine / faustjs

Faust.js™ - The Headless WordPress Framework
https://faustjs.org
Other
1.43k stars 132 forks source link

'Inner blocks use content width' Incorrectly Applied #1881

Open FranklinsHand opened 6 months ago

FranklinsHand commented 6 months ago

Description

The Column and Group blocks in the block editor have a Layout section with an option called 'Inner blocks use content width' which, when turned on, applies a max-width to the blocks inside of the Column or Group it is applied to. The faustwp Core Block CoreColumn block incorrectly applies this max-width to the column not the blocks inside the column.

Steps to reproduce

  1. Follow the getting started tutorial and the Get started with WPGraphQL Content Blocks tutorial in order to set up content blocks.
  2. Edit a page with the block editor.
  3. Add a columns block with two columns.
  4. In the first column, set 'Inner blocks use content width' property to true, and set the width to 10px.
  5. Add a block to both columns.
  6. Compare the html generated in the block editor with produced by Faust.

Additional context

In the block editor the columns are an even width because the max-width property is applied to the paragraph block inside of the column, instead of the column itself. Screenshot 2024-04-26 at 3 28 12 PM

The block rendered by Faust sets the max-width property directly to the column, causing the column to have a width of 10px. Screenshot 2024-04-26 at 3 28 48 PM

@faustwp/core Version

3.0.1

@faustwp/cli Version

3.0.1

FaustWP Plugin Version

1.2.3

WordPress Version

6.5.2

Additional environment details

@faustwp/core: 3.0.1

Please confirm that you have searched existing issues in the repo.

FranklinsHand commented 6 months ago

I have been looking into this issue more and I think this arises from there being no way for a parent block to pass information to an inner block. The actual Gutenburg editor does not pass down this information as an attribute to the inner component either. Instead, it generates a class like this on the fly to set the max-width of the inner component.

Screenshot 2024-05-02 at 11 10 26 AM