[BBT-109] Conditionally render summary content

[g-elwell]

Description

This PR adds conditional rendering to the native <summary> HTML component which is being used to render block styles UI elements.

Fixes BBT-109

When using an uncontrolled HTML summary element, React will render all child content whether or not it is visible to the user. When a significant number of components are added to the tree (which is the case if we render style UI for every possible element within every block), performance will drop significantly.

To fix this, we can convert the summary element to be controlled by React, keeping it's open value in state and conditionally rendering it's content based on whether or not it is open.

Change Log

• Convert HTML summary to a controlled element

Steps to test

This bug was discovered when experimenting with rendering nested element styles UI within blocks, which results in almost 2000 components being rendered at once. To partially replicate this performance impact, we can copy/paste the styles components within BlocksItem several times. The more components present, the worse the performance will become. Then:

• Click the 'blocks' tab
• Notice a delay in rendering
• Click the search field and begin searching for a block
• Notice further delays and lag

Screenshots/Videos

Before - http://bigbite.im/v/EQ8KRW
After - http://bigbite.im/v/NE1E0n

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[Joe-Rouse]

Tested by adding lots of styles to theme.json so all the components render, and then copy and pasting these components inside of BlocksItem so they each render several times. Works as expected and the only delay you experience is when you open the offending component.