Gutenberg: Lots of extra markup in v2.6

[rwrobe]

Issue Overview

The 2.6 release adds a lot of wrapping divs and internal divs to various components in a block.

Steps to reproduce

• Add any core block (or custom block) to a post
• Inspect and see the extra divs

Images

https://imgur.com/a/IkCWz

[aduth]

Can you elaborate on the problem that these divs are causing?

Aside: Looking briefly, most are from event normalization (e.g. focus outside detection). There's some hope that the need for element wrappers can be avoided in the future with enhancements to React's new Fragment:

key is the only attribute that can be passed to Fragment. _In the future, we may add support for additional attributes, such as event handlers._

https://reactjs.org/docs/fragments.html#keyed-fragments

[mtias]

Also, these are internal to the editor and not part of the content.

[rwrobe]

It's causing issues for styling more complex blocks. Specifically those with multiple elements that aren't laid out vertically-- e.g., a recent post with a thumbnail on the left and text content to the right.

[gziolo]

https://imgur.com/a/IkCWz

/cc @brandonpayton. I think this is caused by the fact that we apply Autocomplete to all RichText components. It existed before, but was only the case for Paragraph block.

[brandonpayton]

I think this is caused by the fact that we apply Autocomplete to all RichText components. It existed before, but was only the case for Paragraph block.

Those divs are indeed due to Autocomplete being added to RichText:

• There is a div added by the base Autocomplete component.
• Another added by the withFocusOutside HOC in order to add event listeners.
• Another added by the blocks Autocomplete component to add event listeners.

@gziolo and I were not pleased with these additions but did not see a better solution at the time. I'm hoping that React will eventually support specifying event listeners on Fragments as mentioned in the React 16.2 fragment support post:

In the future, we may add support for additional attributes, such as event handlers.

[rwrobe]

Does this mean that the divs are here to stay until there are updates to React? If so, can we add a class or wrapper so we can target these divs without having to use nth-child selectors in CSS?

[gziolo]

We will take a closer look if we can limit the number of divs that are there before Gutenberg gets merge into WordPress core. 👍

[danielbachhuber]

Related #6839

[ZebulanStanphill]

7477 removed some unneeded wrapping <div>s from Paragraph blocks.

[mtias]

Closing this as there's been some changes on the HoC wrappers. If there's anything specific still causing issues, please, open new issues.