Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'Inner blocks use content width' Incorrectly Applied #1881

Open
1 task done
FranklinsHand opened this issue Apr 26, 2024 · 1 comment
Open
1 task done

'Inner blocks use content width' Incorrectly Applied #1881

FranklinsHand opened this issue Apr 26, 2024 · 1 comment

Comments

@FranklinsHand
Copy link

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
@FranklinsHand
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants