How to change editor width?

  • WP 6.61, TT4 theme, with a child theme w/ minor changes, including changing the width.

    How can i get the editor to also change width? In particular, i’m finding that:

    a) when i have an unconstrained block (e.g. a group with a background colour) it only covers about the middle half of the editor. It does work on preview and frontent

    b) the constrained width in the backend editor is quite a bit less than the default of my site, making it harder to visualise.

    Is there some tweak I was supposed to make to also get the editor to update?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter donbowman

    (@donbowman)

    is https://github.com/WordPress/gutenberg/issues/64149 related?

    Hi @donbowman, thanks for reaching out! It does look like what you’re experiencing on your site is similar to the issue described in the Github link you shared.

    I’m wondering if it makes any difference if the blocks are not grouped? Are the blocks grouped to have the same background color? Have you tried CSS for the background color of that group?

    Hi @donbowman,

    As we haven’t heard back from you in over a month, we assume your issue has been resolved. If you’re still encountering similar issues, feel free to mark this topic as unresolved, or start a new one. Thanks!

    Thread Starter donbowman

    (@donbowman)

    Its not resolved, i’m not sure what to do.

    why should it matter if i’m grouped or not? My objective is to make the editor match the published content, but it doesn’t in width. when i have a full width container/group, it shows live but not in editor.

    • This reply was modified 6 months, 2 weeks ago by donbowman.
    Thread Starter donbowman

    (@donbowman)

    I have this as a simple page/

    <!-- wp:group {"backgroundColor":"light-grey","layout":{"type":"default"}} -->
    <div class="wp-block-group has-light-grey-background-color has-background"><!-- wp:paragraph -->
    <p>I am a paragraph in a wide container.</p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:group -->


    I then see this:

    Hi @donbowman, thanks for getting back to us and sharing more details with a screenshot.

    In your screenshot, the texts width is set to None:

    And when set to None, it’s expected to not be full width in both the editor and live page, leaving spaces to both sides of the texts.

    My objective is to make the editor match the published content, but it doesn’t in width. when i have a full width container/group, it shows live but not in editor.

    In the editor when you select the texts, in the toolbar above it, select the icon on the left of the 3 dots, then select full width.

    On my test site, selecting it to full width adjusts the texts in both the editor and live page to the full width of the space.

    Let us know how that goes!

    Thread Starter donbowman

    (@donbowman)

    the group is set to full width, and it is the group w/ the background colour.

    when viewing the post, the group expands w/ colour to the entire width, but not when in the editor.

    Thread Starter donbowman

    (@donbowman)

    I don’t see that option on ‘Page’, only on ‘Post’.

    E.g. if i say ‘new post’, group gets that option, but ‘new page’, it does not.

    Moderator mizantium

    (@janmtm)

    Hi @donbowman !

    Thank you for clarifying.

    I ran a few tests according to what you’re describing and the tests all resulted in a change in the width of the Group Block, both in the Editor as well as in the live site and preview.

    For the preview, you can test the caching, by clearing your browser’s cache before previewing.

    For my tests, I tried new page and new post, with a Group Block having a Paragraph Block inside of it, and aiming to set the Group Block to ‘Wide Width’ as well as testing ‘Full Width’.

    I tried this with the Gutenberg plugin activated as well as deactivated on WordPress 6.61 and then updated to WordPress 6.6.2 and the results were the same in all four attempts. The width settings work in all cases.

    The reason that it matters if the Blocks were grouped or not is because for the Github issue that you referenced that was part of the specific scenario where the issue was happening. A template that had a post Content Block inside of a Group Block, is being used in a page, and in the Post Editor when that template is applied, the

    In your case, you are adding a page or post directly.

    The other thing to note is that as Kel mentioned above, the ‘Wide Width’ isn’t actually set in your page. In the code that you shared, if wide width was selected the code would have either of the following in the group code: “align”:”wide” or “align”:”full”.

    Instead it has neither of those, as this is what you shared:

    <!-- wp:group {"backgroundColor":"light-grey","layout":{"type":"default"}} -->
    <div class="wp-block-group has-light-grey-background-color has-background"><!-- wp:paragraph -->
    <p>I am a paragraph in a wide container.</p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:group -->

    You can check several things once more – that you’ve indeed set the Group block to ‘Wide Width’ or ‘Full Width’, and that the setting, “Inner blocks use content width”, is disabled on the Group and Paragraph Blocks.

    See here: https://d.pr/i/qR7Mj2

    Hope this helps!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to change editor width?’ is closed to new replies.