Site Editor, Components, and Iframes - Style issues with components using emotion and Iframes.

[Addison-Stavlo]

Description

In the Site Editor, certain components (such as Modals and Popovers) when applied from the editor canvas frame render without including necessary styles for other child components.

The few component's that have stuck out as having missing styles in this circumstance (the 'Disabled' component and the various 'Flex' components) all seem to use emotion / css-in-JS as their style delivery mechanism.

Example 1

One example is in the Selection dropdown for the Template Part block. When it is rendered from the Template Part Block's placeholder in the editor canvas frame, the preview (that is wrapped in a <Disabled> component) is not disabled as expected and is interactable with the mouse:

Notice how the cursor is able to interact with blocks in the preview.

However, when this dropdown component is accessed through the "Replace" button in the block toolbar the <Disabled> components disabling styles work as expected:

Note - As an aside from the issue with the disabled component, in both versions the previews are unable to inherit the site's background color. In the post editor everything works as expected, this preview is disabled from interaction and inherit the editors background colors:

Example 2

For example, take a Modal that contains a pair of buttons nested in flex components similar to:

<Modal>
    <Flex justify="flex-end">
        <FlexItem>
            <Button> Cancel </Button>
        </FlexItem>
        <FlexItem>
            <Button> Create </Button>
        </FlexItem>
    </Flex>
</Modal>

Also, consider that this modal is triggered by a block on the canvas (ex- the Template Part's placeholder flow for creation explored here).

We would expect these Flex components and styles to render the buttons as flex items at the end of a flex group. In the post editor, this appears as expected:

However, when this is rendered in the Site Editor the Flex components do not have their associated styles:

Consider for a second if we replaced the parent <Modal> with a <Placeholder> component, the Flex components do receive their expected style:

So it seems like this happens when emotion styled components are rendered in other components that are outside the parent frame. 🤔

Similar to example 1, if this Modal is based outside of the editing canvas and rendered from the editor itself (such as the similar 'Convert to template part' modal that is found through the block toolbar's ellipsis menu), these styles are included as expected:

[jasmussen]

Worth crosslinking this with #30503, which mentions a StyleFrame component to address this issue.

[ryelle]

I'm running into this trying to create a modal component for the Pattern Directory editor.

I've made a demo plugin to reproduce the issue. It seems like the emotion styles in the modal content are not being picked up. The components are given a unique prefix ID (cache key), but no styles are registered to that UUID key. It must have something to do with the iframe use, though, because the "Modal test" block in my demo plugin works fine on the post editor, but breaks on the site editor.

I used the Grid and Spinner components to test.

Post Editor	Site Editor

Unfortunately, I'm out of my depth on how these emotion styles are generated - how does emotion know which component styles to load, and why might it skip modal content but only on an iframed editor?