Gutenberg Block Editor Floating Image Problem

  • Boldt

    (@enso)


    6 years, 10 months ago

    I haven’t found a solution to this problem. When an image is floated left or right in Gutenberg and the text wraps around the image the control bar of wrapped text blocks is hidden by the image.

    If the text block extends below the bottom of the floated image it’s possible to scroll the content up until the image disappears and the control bar becomes visible.

    But if the paragraph starts after the top of the image and ends before the bottom of the image that trick doesn’t work.

    Is there a solution to this situation?

    The link is to a screen cap image that shows the problem.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    6 years, 10 months ago

    We need an added CSS style that adds a large z-index to block toolbars. For example:

    .block-editor-block-list__block .block-editor-block-contextual-toolbar {
    z-index: 32767;
}

    The block looks a little weird still, but at least the tools are accessible. We’re supposed to enqueue admin styles, typically these are external CSS files. This is way overkill for one simple style.

    Much more hacky, but workable, would be to add it to the page through the “admin_print_styles” action. For example, added to a theme’s functions.php:

    //style block toolbar's z-index
add_action('admin_print_scripts', function() {
   echo '<style>
   .block-editor-block-list__block .block-editor-block-contextual-toolbar {
      z-index: 32767;
   }
   </style>';
});

    The real solution would be to submit a Trac ticket explaining the problem and let the editor devs fix the problem for all of us. Of course, this sort of fix could take a while.

    Thread Starter Boldt

    (@enso)

    6 years, 10 months ago

    We need an added CSS style that adds a large z-index to block toolbars.

    Yeah, I played around with that approach for a bit, but I couldn’t get it to work before I had to get on to something more urgent.

    I was mainly hoping that I was missing something obvious that other people were using. Oh well.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Gutenberg Block Editor Floating Image Problem’ is closed to new replies.