Replace gutenberg in classNames with block-editor (WordPress#10783)

antpb · Oct 26, 2018 · 9f053ba · 9f053ba
1 parent fb05abc
commit 9f053ba
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 32 deletions.
diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
@@ -82,7 +82,7 @@ $z-layers: (
 	".components-popover:not(.is-mobile).is-bottom": 99990,
 
 	// Shows above edit post sidebar; Specificity needs to be higher than 3 classes.
-	".gutenberg__editor .components-popover.components-color-palette__picker.is-bottom": 100001,
+	".block-editor__container .components-popover.components-color-palette__picker.is-bottom": 100001,
 
 	".components-autocomplete__results": 1000000,
 

diff --git a/docs/extensibility/theme-support.md b/docs/extensibility/theme-support.md
@@ -45,7 +45,7 @@ Some blocks such as the image block have the possibility to define a "wide" or "
 add_theme_support( 'align-wide' );
 ```
 
-For more information about this function, see [the developer docs on `add_theme_support()`](https://developer.wordpress.org/reference/functions/add_theme_support/). 
+For more information about this function, see [the developer docs on `add_theme_support()`](https://developer.wordpress.org/reference/functions/add_theme_support/).
 
 ### Wide Alignments and Floats
 
@@ -238,7 +238,7 @@ You can style the editor like any other webpage. Here's how to change the backgr
 
 ```css
 /* Add this to your `style-editor.css` file */
-body.gutenberg-editor-page {
+body.block-editor-page {
 	background-color: #d3ebf3;
 	color: #00005d;
 }
@@ -250,19 +250,19 @@ To change the main column width of the editor, add the following CSS to `style-e
 
 ```css
 /* Main column width */
-body.gutenberg-editor-page .editor-post-title__block,
-body.gutenberg-editor-page .editor-default-block-appender,
-body.gutenberg-editor-page .editor-block-list__block {
+body.block-editor-page .editor-post-title__block,
+body.block-editor-page .editor-default-block-appender,
+body.block-editor-page .editor-block-list__block {
 	max-width: 720px;
 }
 
 /* Width of "wide" blocks */
-body.gutenberg-editor-page .editor-block-list__block[data-align="wide"] {
+body.block-editor-page .editor-block-list__block[data-align="wide"] {
 	max-width: 1080px;
 }
 
 /* Width of "full-wide" blocks */
-body.gutenberg-editor-page .editor-block-list__block[data-align="full"] {
+body.block-editor-page .editor-block-list__block[data-align="full"] {
 	max-width: none;
 }
 ```

diff --git a/gutenberg.php b/gutenberg.php
@@ -21,14 +21,16 @@
  * The main entry point for the Gutenberg editor. Renders the editor on the
  * wp-admin page for the plugin.
  *
+ * The gutenberg and gutenberg__editor classNames are left for backward compatibility.
+ *
  * @since 0.1.0
  */
 function the_gutenberg_project() {
 	global $post_type_object;
 	?>
-	<div class="gutenberg">
+	<div class="block-editor gutenberg">
 		<h1 class="screen-reader-text"><?php echo esc_html( $post_type_object->labels->edit_item ); ?></h1>
-		<div id="editor" class="gutenberg__editor"></div>
+		<div id="editor" class="block-editor__container gutenberg__editor"></div>
 		<div id="metaboxes" style="display: none;">
 			<?php the_gutenberg_metaboxes(); ?>
 		</div>
@@ -476,19 +478,20 @@ function toggleDropdown() {
 add_action( 'admin_print_scripts-edit.php', 'gutenberg_replace_default_add_new_button' );
 
 /**
- * Adds the gutenberg-editor-page class to the body tag on the Gutenberg page.
+ * Adds the block-editor-page class to the body tag on the Gutenberg page.
  *
  * @since 1.5.0
  *
  * @param string $classes Space separated string of classes being added to the body tag.
- * @return string The $classes string, with gutenberg-editor-page appended.
+ * @return string The $classes string, with block-editor-page appended.
  */
 function gutenberg_add_admin_body_class( $classes ) {
+	// gutenberg-editor-page is left for backward compatibility.
 	if ( current_theme_supports( 'editor-styles' ) && current_theme_supports( 'dark-editor-style' ) ) {
-		return "$classes gutenberg-editor-page is-fullscreen-mode wp-embed-responsive is-dark-theme";
+		return "$classes block-editor-page gutenberg-editor-page is-fullscreen-mode wp-embed-responsive is-dark-theme";
 	} else {
 		// Default to is-fullscreen-mode to avoid jumps in the UI.
-		return "$classes gutenberg-editor-page is-fullscreen-mode wp-embed-responsive";
+		return "$classes block-editor-page gutenberg-editor-page is-fullscreen-mode wp-embed-responsive";
 	}
 }
 

diff --git a/packages/block-library/src/archives/editor.scss b/packages/block-library/src/archives/editor.scss
@@ -1,3 +1,3 @@
-.gutenberg ul.wp-block-archives {
+.block-editor ul.wp-block-archives {
 	padding-left: 2.5em;
 }
diff --git a/packages/block-library/src/categories/editor.scss b/packages/block-library/src/categories/editor.scss
@@ -1,4 +1,4 @@
-.gutenberg .wp-block-categories ul {
+.block-editor .wp-block-categories ul {
 	padding-left: 2.5em;
 
 	ul {

diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
@@ -1,4 +1,4 @@
-.gutenberg .wp-block-latest-posts {
+.block-editor .wp-block-latest-posts {
 	padding-left: 2.5em;
 	&.is-grid {
 		padding-left: 0;

diff --git a/packages/block-library/src/more/editor.scss b/packages/block-library/src/more/editor.scss
@@ -3,7 +3,7 @@
 	text-align: center;
 }
 
-.gutenberg .wp-block-more { // needs specificity
+.block-editor .wp-block-more { // needs specificity
 	display: block;
 	text-align: center;
 	white-space: nowrap;

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
@@ -150,6 +150,6 @@ $color-palette-circle-spacing: 14px;
 	min-width: unset;
 }
 
-.gutenberg__editor .components-popover.components-color-palette__picker.is-bottom {
-	z-index: z-index(".gutenberg__editor .components-popover.components-color-palette__picker.is-bottom");
+.block-editor__container .components-popover.components-color-palette__picker.is-bottom {
+	z-index: z-index(".block-editor__container .components-popover.components-color-palette__picker.is-bottom");
 }
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -71,7 +71,7 @@ html.wp-toolbar {
 	background: $white;
 }
 
-body.gutenberg-editor-page {
+body.block-editor-page {
 	background: $white;
 
 	#wpcontent {
@@ -84,7 +84,7 @@ body.gutenberg-editor-page {
 
 	/* We hide legacy notices in Gutenberg, because they were not designed in a way that scaled well.
 	   Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
-	#wpbody-content > div:not(.gutenberg):not(#screen-meta) {
+	#wpbody-content > div:not(.block-editor):not(#screen-meta) {
 		display: none;
 	}
 
@@ -108,8 +108,8 @@ body.gutenberg-editor-page {
 	}
 }
 
-.gutenberg,
-// The modals are shown outside the .gutenberg wrapper, they need these styles
+.block-editor,
+// The modals are shown outside the .block-editor wrapper, they need these styles
 .components-modal__frame {
 	box-sizing: border-box;
 
@@ -125,7 +125,7 @@ body.gutenberg-editor-page {
 	}
 }
 
-.gutenberg__editor {
+.block-editor__container {
 	// on mobile the main content area has to scroll
 	// otherwise you can invoke the overscroll bounce on the non-scrolling container, causing (ノಠ益ಠ)ノ彡┻━┻
 	@include break-small {

diff --git a/packages/editor/src/components/plain-text/style.scss b/packages/editor/src/components/plain-text/style.scss
@@ -1,4 +1,4 @@
-.gutenberg .editor-plain-text {
+.block-editor .editor-plain-text {
 	box-shadow: none;
 	font-family: inherit;
 	font-size: inherit;

diff --git a/packages/editor/src/editor-styles/transforms/editor-width.js b/packages/editor/src/editor-styles/transforms/editor-width.js
@@ -7,9 +7,9 @@ export const getEditorWidthRules = ( width ) => {
 	return {
 		type: 'rule',
 		selectors: [
-			'body.gutenberg-editor-page .editor-post-title__block',
-			'body.gutenberg-editor-page .editor-default-block-appender',
-			'body.gutenberg-editor-page .editor-block-list__block',
+			'body.block-editor-page .editor-post-title__block',
+			'body.block-editor-page .editor-default-block-appender',
+			'body.block-editor-page .editor-block-list__block',
 		],
 		declarations: [
 			{

diff --git a/packages/editor/src/editor-styles/transforms/test/__snapshots__/editor-width.js.snap b/packages/editor/src/editor-styles/transforms/test/__snapshots__/editor-width.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Editor Width should generate the editor width styles 1`] = `
-"body.gutenberg-editor-page .editor-post-title__block,
-body.gutenberg-editor-page .editor-default-block-appender,
-body.gutenberg-editor-page .editor-block-list__block {
+"body.block-editor-page .editor-post-title__block,
+body.block-editor-page .editor-default-block-appender,
+body.block-editor-page .editor-block-list__block {
 max-width: 300px;
 }"
 `;