Wordpress has a native feature to integrate frontend style to the Gutenberg editor without modification and without risk to impact other parts of the editor.

https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/themes/theme-support.md#editor-styles

This inserts any given css file by prepending its rules with a namespace '.editor-styles-wrapper'.
Basic usage is to declare the theme support add_theme_support('editor-styles') and add stylesheets with add_editor_style( $this->theme_dir . '/assets/build/style.min.css' ) for example.

I've seen multiple related tickets linked to this problem, that don't seem to use this system:

• https://jira.greenpeace.org/browse/PLANET-3917
  Ensure styling of blocks don't collide with the editor
• https://jira.greenpeace.org/browse/PLANET-4054
  Gutenberg Compatibility: Separate Bootstrap, layout styles and block styles in master theme
• https://jira.greenpeace.org/browse/PLANET-4117
  Gutenberg: Align full typography (headers / fonts / sizes) of Paragraph block with P4 CSS styleguide

Switzerland is using it already, although generating a different file not including all layout and block styles https://github.com/greenpeace/planet4-child-theme-switzerland/blob/62cba7797e6ebb17cac6617030db8edf65d513b6/functions.php#L96 .

Pros & cons

Pros

• Native solution
• No risk of applying our styles to other parts of the editor
• Adapted (and already applicable) to child-themes

Cons

• Some work required to readapt our css rules, with a review of all our blocks
• Default styles can't be removed, and have to be overriden (see current issues)

How it works

Rules are modified on the fly during editor loading and inserted in the editor:

• useEditorStyles() https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/editor-styles/index.js
• transformStyles() https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/utils/transform-styles/index.js

Root tags (body|html|:root) are replaced by the namespace .editor-styles-wrapper  https://github.com/WordPress/gutenberg/blob/02bc517e6ff1dd0af3923fc3ca01005a2badd6ab/packages/block-editor/src/utils/transform-styles/transforms/wrap.js#L4, the rest is encapsulated.

Exploratory tasks

• Editor width has to match our .page-template
  I've copied page-template rules to wp-block https://github.com/greenpeace/planet4-plugin-gutenberg-blocks/commit/99889575f6642e9583b830c68f8652b19dd06105#diff-1d8227442d5b198c6d5362b74a30d9a58a34c4de87df6535394bdddec936267cR11, maybe we can find a more clever way.
• _body.scss rule overflow-y: hidden  an overflow-x preventing scrolling in the editor
   Are these rules really needed in our styleguide ?
• H1 heading is not an H1 in the editor, additional css rule/selector are needed
• Some rules are too specific to work in this context (ie: div.page-template > ul, margins of some blocks) and need rework
• Default editor-styles-wrapper styles have to be unset/overriden
• Blocks vertical spacing declaration has to be reviewed to match both frontend and editor

Current issues

• https://github.com/WordPress/gutenberg/issues/27095
  Cannot remove default Editor Normalization Styles
• https://github.com/WordPress/gutenberg/issues/26494
  Allow themes to dynamically add CSS class names to the editor wrapper
• https://github.com/WordPress/gutenberg/issues/17854
  Block Editor: "editor-styles-wrapper" requires custom classes

Examples

• https://github.com/greenpeace/planet4-master-theme/compare/feature/editor-style
• https://github.com/greenpeace/planet4-plugin-gutenberg-blocks/compare/feature/editor-style