Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Iframe the editor content #21102

Closed
wants to merge 17 commits into from
Closed

Iframe the editor content #21102

wants to merge 17 commits into from

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Mar 24, 2020

Description

Fixes #20797.
Fixes #21193.
Fixes #6156.

See #25775 for FSE.

  • There would be no admin CSS bleed at all. This is something we’ve been struggling with since the beginning.
  • There would be no need to simulate media queries, which is arguably technically more difficult than using an iframe.
  • Relative units like (r)em and vw/vh just work.
  • For a full site, a theme stylesheet can be just dropped in the editor without any adjustment. I think this is important as it makes the life of theme authors much easier.
  • It's possible to have one selection per window, so one in the admin and one in the content. This is useful for e.g. the link UI where the selection in the content can be kept while the selection is also in an input element (for the URL). Maybe be useful in other cases.

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Mar 24, 2020

Size Change: +732 B (0%)

Total Size: 1.28 MB

Filename Size Change
build/block-editor/index.js 130 kB +116 B (0%)
build/block-editor/style-rtl.css 11.5 kB +20 B (0%)
build/block-editor/style.css 11.5 kB +20 B (0%)
build/block-library/editor-rtl.css 9.07 kB -5 B (0%)
build/block-library/editor.css 9.07 kB -4 B (0%)
build/block-library/index.js 150 kB +51 B (0%)
build/components/index.js 171 kB +149 B (0%)
build/components/style-rtl.css 15.4 kB +14 B (0%)
build/components/style.css 15.4 kB +16 B (0%)
build/edit-post/index.js 306 kB +125 B (0%)
build/edit-post/style-rtl.css 6.5 kB +15 B (0%)
build/edit-post/style.css 6.49 kB +18 B (0%)
build/edit-site/style-rtl.css 3.94 kB +1 B
build/edit-site/style.css 3.94 kB -1 B
build/editor/editor-styles-rtl.css 493 B +17 B (3%)
build/editor/editor-styles.css 495 B +17 B (3%)
build/editor/index.js 43.3 kB +28 B (0%)
build/editor/style-rtl.css 3.9 kB +68 B (1%)
build/editor/style.css 3.9 kB +67 B (1%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.81 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/blocks/archives/editor-rtl.css 120 B 0 B
build/block-library/blocks/archives/editor.css 119 B 0 B
build/block-library/blocks/audio/editor-rtl.css 118 B 0 B
build/block-library/blocks/audio/editor.css 118 B 0 B
build/block-library/blocks/audio/style-rtl.css 152 B 0 B
build/block-library/blocks/audio/style.css 152 B 0 B
build/block-library/blocks/block/editor-rtl.css 211 B 0 B
build/block-library/blocks/block/editor.css 211 B 0 B
build/block-library/blocks/button/editor-rtl.css 513 B 0 B
build/block-library/blocks/button/editor.css 513 B 0 B
build/block-library/blocks/button/style-rtl.css 488 B 0 B
build/block-library/blocks/button/style.css 488 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 275 B 0 B
build/block-library/blocks/buttons/editor.css 275 B 0 B
build/block-library/blocks/buttons/style-rtl.css 346 B 0 B
build/block-library/blocks/buttons/style.css 346 B 0 B
build/block-library/blocks/calendar/style-rtl.css 249 B 0 B
build/block-library/blocks/calendar/style.css 249 B 0 B
build/block-library/blocks/categories/editor-rtl.css 135 B 0 B
build/block-library/blocks/categories/editor.css 135 B 0 B
build/block-library/blocks/categories/style-rtl.css 132 B 0 B
build/block-library/blocks/categories/style.css 132 B 0 B
build/block-library/blocks/code/style-rtl.css 181 B 0 B
build/block-library/blocks/code/style.css 181 B 0 B
build/block-library/blocks/columns/editor-rtl.css 239 B 0 B
build/block-library/blocks/columns/editor.css 239 B 0 B
build/block-library/blocks/columns/style-rtl.css 467 B 0 B
build/block-library/blocks/columns/style.css 466 B 0 B
build/block-library/blocks/cover/editor-rtl.css 440 B 0 B
build/block-library/blocks/cover/editor.css 438 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.27 kB 0 B
build/block-library/blocks/cover/style.css 1.27 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 529 B 0 B
build/block-library/blocks/embed/editor.css 529 B 0 B
build/block-library/blocks/embed/style-rtl.css 419 B 0 B
build/block-library/blocks/embed/style.css 419 B 0 B
build/block-library/blocks/file/editor-rtl.css 246 B 0 B
build/block-library/blocks/file/editor.css 245 B 0 B
build/block-library/blocks/file/style-rtl.css 288 B 0 B
build/block-library/blocks/file/style.css 289 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.49 kB 0 B
build/block-library/blocks/freeform/editor.css 2.49 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 692 B 0 B
build/block-library/blocks/gallery/editor.css 693 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.11 kB 0 B
build/block-library/blocks/gallery/style.css 1.11 kB 0 B
build/block-library/blocks/group/editor-rtl.css 364 B 0 B
build/block-library/blocks/group/editor.css 364 B 0 B
build/block-library/blocks/group/style-rtl.css 117 B 0 B
build/block-library/blocks/group/style.css 117 B 0 B
build/block-library/blocks/heading/editor-rtl.css 174 B 0 B
build/block-library/blocks/heading/editor.css 174 B 0 B
build/block-library/blocks/heading/style-rtl.css 137 B 0 B
build/block-library/blocks/heading/style.css 137 B 0 B
build/block-library/blocks/html/editor-rtl.css 324 B 0 B
build/block-library/blocks/html/editor.css 325 B 0 B
build/block-library/blocks/image/editor-rtl.css 738 B 0 B
build/block-library/blocks/image/editor.css 737 B 0 B
build/block-library/blocks/image/style-rtl.css 508 B 0 B
build/block-library/blocks/image/style.css 507 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 201 B 0 B
build/block-library/blocks/latest-comments/editor.css 200 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 315 B 0 B
build/block-library/blocks/latest-comments/style.css 315 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 183 B 0 B
build/block-library/blocks/latest-posts/editor.css 183 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 568 B 0 B
build/block-library/blocks/latest-posts/style.css 567 B 0 B
build/block-library/blocks/list/editor-rtl.css 129 B 0 B
build/block-library/blocks/list/editor.css 129 B 0 B
build/block-library/blocks/list/style-rtl.css 127 B 0 B
build/block-library/blocks/list/style.css 127 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 240 B 0 B
build/block-library/blocks/media-text/editor.css 240 B 0 B
build/block-library/blocks/media-text/style-rtl.css 579 B 0 B
build/block-library/blocks/media-text/style.css 577 B 0 B
build/block-library/blocks/more/editor-rtl.css 479 B 0 B
build/block-library/blocks/more/editor.css 479 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 438 B 0 B
build/block-library/blocks/navigation-link/editor.css 440 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 747 B 0 B
build/block-library/blocks/navigation-link/style.css 745 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.31 kB 0 B
build/block-library/blocks/navigation/editor.css 1.31 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 222 B 0 B
build/block-library/blocks/navigation/style.css 222 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 440 B 0 B
build/block-library/blocks/nextpage/editor.css 440 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 161 B 0 B
build/block-library/blocks/paragraph/editor.css 161 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 279 B 0 B
build/block-library/blocks/paragraph/style.css 279 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 255 B 0 B
build/block-library/blocks/post-author/editor.css 255 B 0 B
build/block-library/blocks/post-author/style-rtl.css 229 B 0 B
build/block-library/blocks/post-author/style.css 230 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 187 B 0 B
build/block-library/blocks/post-content/editor.css 187 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 134 B 0 B
build/block-library/blocks/post-excerpt/editor.css 134 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 387 B 0 B
build/block-library/blocks/post-featured-image/editor.css 386 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 149 B 0 B
build/block-library/blocks/post-featured-image/style.css 149 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 231 B 0 B
build/block-library/blocks/pullquote/editor.css 231 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 359 B 0 B
build/block-library/blocks/pullquote/style.css 359 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 142 B 0 B
build/block-library/blocks/query-loop/editor.css 141 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 361 B 0 B
build/block-library/blocks/query-loop/style.css 363 B 0 B
build/block-library/blocks/query/editor-rtl.css 179 B 0 B
build/block-library/blocks/query/editor.css 179 B 0 B
build/block-library/blocks/quote/editor-rtl.css 121 B 0 B
build/block-library/blocks/quote/editor.css 121 B 0 B
build/block-library/blocks/quote/style-rtl.css 215 B 0 B
build/block-library/blocks/quote/style.css 214 B 0 B
build/block-library/blocks/rss/editor-rtl.css 270 B 0 B
build/block-library/blocks/rss/editor.css 270 B 0 B
build/block-library/blocks/rss/style-rtl.css 314 B 0 B
build/block-library/blocks/rss/style.css 313 B 0 B
build/block-library/blocks/search/editor-rtl.css 213 B 0 B
build/block-library/blocks/search/editor.css 213 B 0 B
build/block-library/blocks/search/style-rtl.css 384 B 0 B
build/block-library/blocks/search/style.css 386 B 0 B
build/block-library/blocks/separator/editor-rtl.css 151 B 0 B
build/block-library/blocks/separator/editor.css 151 B 0 B
build/block-library/blocks/separator/style-rtl.css 281 B 0 B
build/block-library/blocks/separator/style.css 281 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 547 B 0 B
build/block-library/blocks/shortcode/editor.css 547 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 251 B 0 B
build/block-library/blocks/site-logo/editor.css 251 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 166 B 0 B
build/block-library/blocks/site-logo/style.css 166 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 211 B 0 B
build/block-library/blocks/social-link/editor.css 211 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 749 B 0 B
build/block-library/blocks/social-links/editor.css 749 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.36 kB 0 B
build/block-library/blocks/social-links/style.css 1.36 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 321 B 0 B
build/block-library/blocks/spacer/editor.css 321 B 0 B
build/block-library/blocks/spacer/style-rtl.css 107 B 0 B
build/block-library/blocks/spacer/style.css 107 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 148 B 0 B
build/block-library/blocks/subhead/editor.css 148 B 0 B
build/block-library/blocks/subhead/style-rtl.css 134 B 0 B
build/block-library/blocks/subhead/style.css 134 B 0 B
build/block-library/blocks/table/editor-rtl.css 530 B 0 B
build/block-library/blocks/table/editor.css 530 B 0 B
build/block-library/blocks/table/style-rtl.css 433 B 0 B
build/block-library/blocks/table/style.css 433 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 162 B 0 B
build/block-library/blocks/tag-cloud/editor.css 162 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 145 B 0 B
build/block-library/blocks/tag-cloud/style.css 145 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 644 B 0 B
build/block-library/blocks/template-part/editor.css 645 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 146 B 0 B
build/block-library/blocks/text-columns/editor.css 146 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 209 B 0 B
build/block-library/blocks/text-columns/style.css 209 B 0 B
build/block-library/blocks/verse/editor-rtl.css 153 B 0 B
build/block-library/blocks/verse/editor.css 153 B 0 B
build/block-library/blocks/verse/style-rtl.css 117 B 0 B
build/block-library/blocks/verse/style.css 117 B 0 B
build/block-library/blocks/video/editor-rtl.css 547 B 0 B
build/block-library/blocks/video/editor.css 548 B 0 B
build/block-library/blocks/video/style-rtl.css 241 B 0 B
build/block-library/blocks/video/style.css 241 B 0 B
build/block-library/common-rtl.css 940 B 0 B
build/block-library/common.css 937 B 0 B
build/block-library/style-rtl.css 8.37 kB 0 B
build/block-library/style.css 8.37 kB 0 B
build/block-library/theme-rtl.css 789 B 0 B
build/block-library/theme.css 790 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/compose/index.js 10.6 kB 0 B
build/core-data/index.js 15.4 kB 0 B
build/data-controls/index.js 827 B 0 B
build/data/index.js 8.98 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.95 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-site/index.js 24.8 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.13 kB 0 B
build/edit-widgets/style.css 3.13 kB 0 B
build/element/index.js 4.63 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.74 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.27 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 697 B 0 B
build/keyboard-shortcuts/index.js 2.54 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.85 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 2.92 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 2.84 kB 0 B
build/viewport/index.js 1.86 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@ellatrix
Copy link
Member Author

Getting pretty close 😄

@ellatrix ellatrix force-pushed the try/iframe branch 2 times, most recently from 842a623 to b49c215 Compare March 26, 2020 14:19
@ellatrix
Copy link
Member Author

Should now work with all themes! (Tested Twenty Twenty and Twenty Nineteen.)

@ellatrix
Copy link
Member Author

Everything should be working well, it's almost done. Biggest things remaining is fixing the embed sandbox and adjusting the remaining e2e tests.

@tomtev
Copy link

tomtev commented Apr 22, 2020

@ellatrix Do you think it's doable? This would make it a lot easier to have proper responsive previews and styling and make Gutenberg a truly Wysiwyg

@ellatrix
Copy link
Member Author

Yes, I think it would work. The only blocker is that some blocks using non-React libraries may be using the wrong window/document. To solve this we could still preview the save version in the editor and allow editing through a modal loaded in the parent window. And of course encourage these blocks to update to the right window/document, or the library that it uses. So it kind of depends how much we would mind and how many blocks there would be like this.

@simison
Copy link
Member

simison commented Apr 30, 2020

@ellatrix do you mean that 3rd party libraries using window or document cause trouble? We should somehow proxy them use window.frames[ 'editor-content' ] instead?

@ellatrix
Copy link
Member Author

ellatrix commented May 4, 2020

It may cause problems. It is possible to use window and document correctly if it's based on the block node (node.ownerDocument etc).

How would you proxy? You have two different windows, of which the block needs to use different things. You cannot combine these. And we cannot predict what the block needs.

@ellatrix
Copy link
Member Author

ellatrix commented May 4, 2020

After chatting with some people, we're thinking it may be interesting to try this for full site editing and block previews, but leave the post editor alone for now to give blocks some time to make their blocks work in iframe mode (full site editor and previews).

If we use the iframe for the post editor now, we may need some fallback mechanism for blocks that have problems loading. I'm not sure how we'd detect these problems though.

E.g. a block may be using some jQuery library to render the content.

@ZebulanStanphill
Copy link
Member

Considering the current state of theme support for the block editor, I really want to see this land. Combined with the ongoing removal of editor-only block wrapper divs, we could make editor styling so, so much easier.

@paaljoachim
Copy link
Contributor

It would be great to get an update and hear how things are going @ellatrix Thanks!
Please let us know how we can help.

Base automatically changed from master to trunk March 1, 2021 15:43
@getsource
Copy link
Member

Going through and testing this, and it's looking good so far, thank you!

I noticed that this PR could use a refresh/rebase, and haven't yet tested it out with trunk.
I'm guessing you'd probably prefer to do this directly on the PR, but if it'd be helpful to refresh it, I'm happy to give it a pass in a patch or branch.

@paaljoachim
Copy link
Contributor

Sounds great Mike!
You could perhaps send a direct message to @ellatrix on Slack. To get direct feedback.

@ellatrix
Copy link
Member Author

I'm doing some preparatory work still, like #29573.

Ideally after this we enable the iframe in the template editor and maybe add an option for the post editor.
The template editor is the most urgent I think.

@ellatrix ellatrix mentioned this pull request Apr 30, 2021
7 tasks
@ellatrix
Copy link
Member Author

#31375 iframes the template editor.

@niklasp
Copy link
Contributor

niklasp commented Jan 24, 2022

Yes, I think it would work. The only blocker is that some blocks using non-React libraries may be using the wrong window/document. To solve this we could still preview the save version in the editor and allow editing through a modal loaded in the parent window. And of course encourage these blocks to update to the right window/document, or the library that it uses. So it kind of depends how much we would mind and how many blocks there would be like this.

We plugin authors need a guide on what you mean by the correct window

@lkraav
Copy link

lkraav commented Apr 8, 2022

Hi @saas786 can you take a look to see if you can help land this? Watch out for getting into a rabbit hole, though, it's OK to bow out in favor of more reachable targets.

@saas786
Copy link

saas786 commented Apr 20, 2022

Tried to test out this PR via try/iframe branch.

There is conflict with WordPress 5.9.3 like:

**Fatal error**: Cannot declare class WP_Widget_Block, because the name is already in use
WP_Theme_JSON
WP_Theme_JSON_Resolver
WP_Widget_Block

**Fatal error**: Uncaught Error: Call to undefined method WP_Theme_JSON_Resolver::get_origin()

So will be nice if you rebase try/iframe so can test it out.

Also when tried to edit page via Template Editor: wp-admin/themes.php?page=gutenberg-edit-site&postType=page&postId=2

I found WooCommerce Memberships plugin blocks broke the page. Deactivating the plugin resolves the issue.

So plugins incompatible with Iframe based solution includes at least:

  • WooCommerce Memberships

@lkraav
Copy link

lkraav commented Apr 20, 2022

So will be nice if you rebase try/iframe so can test it out.

Is rebasing this beyond our own current team ability?

@saas786
Copy link

saas786 commented Apr 21, 2022

So will be nice if you rebase try/iframe so can test it out.

Is rebasing this beyond our own current team ability?

It involves 1.5 years worth of commits, say about 6103 commits behind trunk.
PR has about 114 changed files.

So that will take quite a bit of effort & time.

@ellatrix is the right person to rebase it safely, as I am sure lots of APIs have changed since too. So code will not only need rebasing, but updating too.

@lkraav
Copy link

lkraav commented Oct 12, 2022

Refresher discussion in #core-editor. There's at least these blockers, if not more:

  • Classic block doesn’t work in an iframe
  • Meta-boxes: how to render them at all?
  • Third-party blocks could break in an iframe (if they don’t follow the dev note we wrote for the site editor)
  • ...

For iframed Site Editor, this worked out, because we don’t support classic blocks or meta-boxes from the start. For post editor, it would be a big breaking change.

Of the above, meta boxes probably cannot be negotiated.

Currently not sure what could be next, but my company is still interested in sponsoring someone skilled enough to try to figure these things out. Find me on #core-editor.

@ellatrix
Copy link
Member Author

Update: I will soon create a new PR that adds the iframe to the post editor if a theme is a block based theme. Seems like the best way to move forward is in small steps, so enabling it only for block based themes is prudent.

@ellatrix
Copy link
Member Author

Also, if we detect any meta boxes or classic editor, we can avoid the iframe for now.

@ellatrix
Copy link
Member Author

Let's continue in #46212.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Needs Accessibility Feedback Need input from accessibility [Type] Enhancement A suggestion for improvement.
Projects
None yet