Home Forums Community Forum Gutenberg editor display issue with max-width from Avada when page has a sidebar

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • PeterC66
    Participant
    Post count: 11

    I use WP 5.3.2 and Avada 6.1.2, and have disabled Fusion Builder for all post types. I prefer to use the Gutenberg editor with the occasional FB element. I have found ways to do this, despite it being a little awkward and coming across several of the issues mentioned before in this forum.

    One issue I cannot solve is that when I am in the Gutenberg editor on a page with a sidebar each block is very limited in width. This is especially noticeable in, for example, in a columns block. In the image below you will see the width of the text within both columns is very small.

    Paragraph block, and a columns block with Paragraph blocks in both columns

    The problem disappears if I turn off the sidebar in the page.

    Looking deeper, all blocks seem to be getting the following from /wp-admin/post.php line 90

    .block-editor-page.has-sidebar .wp-block:not([data-align="wide"]):not([data-align="full"]) > * {
      max-width: calc(100% - 23% - 80px);
    }
    

    If I remove this maxwidth in Chrome inspector from

    <div class="editor-block-list__block-edit block-editor-block-list__block-edit">
    

    then all seems to be as I would expect.

    This max-width is coming from Avada – in themes\Avada\includes\class-avada-block-editor.php line 126 has

    $custom_css .= '
      .block-editor-page.has-sidebar .wp-block:not([data-align="wide"]):not([data-align="full"]) > * {
        max-width: ' . Fusion_Sanitize::add_css_values( [ '100%', '-' . $sidebar_width, '-' . $single_sidebar_gutter ] ) . ';
      }';
    

    If I deactivate Fusion Builder the problem remains, so it seems to be in Avada rather than FB.

    Any ideas how to resolve this apart from switching off the sidebar temporarily each time?

    Shaminder
    Keymaster
    Post count: 77

    Hi

    You can install fusion white label branding plugin by going to WordPress admin panel dashboard → Avada → Plugins.
    Once installed, you can go the plugins settings ⇒ WP admin and add the following CSS code

    .block-editor-page.has-sidebar .wp-block:not([data-align="wide"]):not([data-align="full"]) > * {
        max-width: 100% !important;
    }

    Screenshot here. This will address your issue

    Note that the Avada community forum is primarily for a user to user interaction.

    If you would like hands-on assistance here, please register for support and create a support ticket as explained here → https://theme-fusion.com/avada-doc/getting-started/avada-theme-support

    Thank you!

    Shaminder

    Maximus80
    Keymaster
    Post count: 24

    Hello!

    The block editor width is usually much smaller than what Avada displays it at. Nevertheless, we have added a new Theme Option to Avada 6.2, which lets you disable our styles in the back-end: https://i.imgur.com/E1mMNYu.png.

    Thanks!

    PeterC66
    Participant
    Post count: 11

    Thanks Shaminder. I have done effectively what you suggest (but not by using that plugin), and it has solved the issue, with what feels like a Kluge. I still do not understand why Avada/Fusion does this to the Gutenberg editor display, unless it is just an unfortunate side-effect of Fusion Builder.

    I have noticed that in the Avada documentation about how Avada works with WP 5 and the block editor that it is all about turning off Gutenberg, and not about turning off Fusion. My conclusion is that they do not work well together.

    Thanks Maximus80. You say ‘The block editor width is usually much smaller than what Avada displays it at’, but clearly my experience is the opposite. The image in my original post does not display but if you right click on this
    Screenshot of the problem and display in a new tab you should see the problem. I am afraid I do not understand what you mean exactly by ‘disable our styles in the back-end’. I want Avada styling in my website, I just do not want any aspect of styling to mess up my editing in Gutenberg.

    Michael C
    Keymaster
    Post count: 437

    Hi PeterC66,

    The option that Markus is showing you is for exactly that. We add styling to the block editor (Gutenberg) to closer match what you will get on the front-end of your website (so it takes into account your Theme Options). If you don’t want that, you can disable it in the theme options. That returns Gutenberg back to its original styling.

    The front-end of your website will not change. This options is specifically for styling of the Gutenberg editor.

    Thanks

    PeterC66
    Participant
    Post count: 11

    Hi Michael C, Thanks for that explanation. I am fine now in that I have disabled what Avada does to leave space for sidebars. My feedback to Avada would be that it was a very odd behaviour which looked like a fault and took me several hours to diagnose and pin down to Avada (not WP, Gutenberg, plugins, my code). The solution suggested, and my version of the implementation is not pretty (but it works).

    I would add that I suspect the behaviour I found of very narrow paragraph blocks within columns in Gutenberg is not what Avada intended. It looks like double or treble repetition of a max-width adjustment (ie every block is having a max-width adjustment, even those within other blocks).

    There is no need to respond to me about this, as I have disabled the ‘feature. But if what happened to my pages happened to anyone else Avada might like to correct it.

    Peter

Viewing 6 posts - 1 through 6 (of 6 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.