wpengine / faustjs

Faust.js™ - The Headless WordPress Framework

Home Page:https://faustjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

'Inner blocks use content width' Incorrectly Applied

FranklinsHand opened this issue · comments

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.

  • Yes

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