search

thec4aa / c4aa-org

The Center for Artistic Activism WordPress Child Theme
https://c4aa.org
1 stars 5 forks source link

Layout widths in theme.json aren't working on front end. #303

Closed slambert closed 5 months ago

slambert commented 5 months ago

Describe the bug Setting a block to "wide width" shows 1100px in the interface, but the actual .align-wide css is 100%

Those set to "none" or max 840px wide are sized using a relative calculation:

max-width: calc(6 * (100vw / 12) - 28px);

To Reproduce

  1. Create or go to a page with an align-wide block or block set to "none" width.
  2. make a window wider than 1100px
  3. Notice that the wide width block still has margins, but extends far wider than 1100px. And the none width block extends wider than 840px.

Expected behavior The width settings should be limited by the settings in theme.json

Screenshots

Block interface:

Image

Inspector:

Image

Desktop (please complete the following information):

Additional context

theme.json settings:

        "layout": {
            "contentSize": "840px",
            "wideSize": "1100px"
        },

This Gutenberg issue seems to be describing the same thing.

And this appears to offer an answer. For an older theme, there still may need some css to be written. Need to check if Twenty Nineteen does this out of the box, and if so, we need to add css or remove legacy code to make this work. Will investigate...

slambert commented 5 months ago

I got started on this:

https://github.com/thec4aa/c4aa-org/compare/develop...fix/303-layout-widths

But adding these styles does not completely solve the problem.

Images that have a block setting of Layout: None (not set to alignwide, aligncenter, alignleft, or alignright) default to aligning to the left ride of what would be the wide-width layout. Ideally they'd be center aligned by default.

Headers - especially clip path headers – were not set up for this layout. They also want to be all the way over on the left.

Edit: Creating a new issue for this.