Global Styles: load styles in iframed site editor #28731
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
oandregal
added
[Feature] Site Editor
oandregal
commented
Feb 4, 2021
| <BlockList className="edit-site-block-editor__block-list" /> | ||
| </WritingFlow> | ||
| </DropZoneProvider> | ||
| <div ref={ iframeRef }> |
There was a problem hiding this comment.
I don't think we should add a new div here. Used this to demonstrate the fix. Need to look at how can we attach the ref to a DOM node within the iframe.
6 tasks
|
Size Change: +100 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
Looks good! How about putting
|
|
Another idea
|
6 tasks
|
Tested and confirmed that it works. |
vindl
requested review from
jeyip,
mattwiebe,
Addison-Stavlo,
Copons and
vindl
oandregal
force-pushed
the
fix/iframe-global-styles
branch
from
f833184
to
8acf40a
Compare
|
I was hoping there was a way to attach refs to some DOM node within the iframe but I didn't see how so far. Tried using the I ended up going in a different direction: make the iframe updating itself upon style changes provided by the host document ― which was the direction @david-szabo97 pursued at #28730 but we only need to update the editor styles (inlined stylesheet), not the named ones. I don't think this is the final solution but it's working. I can look for a better way to do this in a follow-up PR. |
aristath
approved these changes
Feb 5, 2021
|
I believe this should this be patched in the 9.9 plugin and backported to the Core beta, so I'm flagging it as such. Feel free to correct. |
sirreal
added
the
Backport to WP 6.7 Beta/RC
The site editor is not part of the 5.7 beta, hence, I don't think we need to backport this PR. I don't have a good sense about whether we should release a 9.9.1 with this patch or 10.0. I'll let others with more experience weigh in. As a data point, I can share why I'm undecided so I'm able to learn how others think about this: we've had errors in templates that rendered the edit site unusable that didn't warrant a patch release; also, the site editor is an experimental feature. |
sirreal
removed
the
Backport to WP 6.7 Beta/RC
oandregal
changed the title
oandregal
changed the title
ellatrix
reviewed
Feb 8, 2021
| @@ -112,6 +114,7 @@ export default function BlockEditor( { setIsInserterOpen } ) { | |||
| <Popover.Slot name="block-toolbar" /> | |||
| <Iframe | |||
| style={ resizedCanvasStyles } | |||
| editorStyles={ settings.styles } | |||
There was a problem hiding this comment.
Why is it also passed further down to Canvas?
oandregal
pushed a commit
that referenced
this pull request
Feb 8, 2021
|
@nosolosw Why did you duplicate the logic from |
|
👋 @ellatrix for context, this is a summary of what needs to happen on the site editor:
I've tried to implement this flow using the hooks and left some comments at #28731 (comment) I wasn't sure how to make it work, though, hence the hotfix. Plan to iterate on this after doing some digging into the different pieces, happy to work on this with you! |
6 tasks
ellatrix
added a commit
that referenced
this pull request
Feb 10, 2021
oandregal
pushed a commit
that referenced
this pull request
Feb 11, 2021
oandregal
pushed a commit
that referenced
this pull request
Feb 11, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #28581
It looks like #28233 refactored the
useEditorStylesfeature and removed it from the iframe, hence the styles aren't updated upon user changes. This fixes it by bringing it back.This is what we need to have:
All of them (presets & block styles) can change upon user changes, so both the iframe and the host document need to be updated upon user changes.
Test instructions