Core blocks: Use core-blocks prefix for class names

core-blocks/button/edit.js

@@ -142,7 +142,7 @@ class ButtonEdit extends Component {
 				</span>
 				{ isSelected && (
 					<form
-						className="blocks-button__inline-link"
+						className="core-blocks-button__inline-link"
 						onSubmit={ ( event ) => event.preventDefault() }>
 						<Dashicon icon="admin-links" />
 						<UrlInput

core-blocks/button/editor.scss

@@ -18,7 +18,7 @@
 	}
 }
 
-.blocks-button__inline-link {
+.core-blocks-button__inline-link {
 	background: #fff;
 	display: flex;
 	flex-wrap: wrap;
@@ -36,7 +36,7 @@
 
 	.editor-url-input__suggestions {
 		width: $blocks-button__link-input-width - $icon-button-size - $icon-button-size;
-		z-index: z-index( '.blocks-button__inline-link .editor-url-input__suggestions' );
+		z-index: z-index( '.core-blocks-button__inline-link .editor-url-input__suggestions' );
 	}
 
 	> .dashicon {

core-blocks/cover-image/editor.scss

@@ -21,11 +21,11 @@
 		color: inherit;
 	}
 
-	&.has-left-content .block-rich-text__inline-toolbar {
+	&.has-left-content .editor-rich-text__inline-toolbar {
 		justify-content: flex-start;
 	}
 
-	&.has-right-content .block-rich-text__inline-toolbar{
+	&.has-right-content .editor-rich-text__inline-toolbar{
 		justify-content: flex-end;
 	}
 }

core-blocks/gallery/edit.js

@@ -257,7 +257,7 @@ export default class GalleryEdit extends Component {
 							<FormFileUpload
 								multiple
 								isLarge
-								className="blocks-gallery-add-item-button"
+								className="core-blocks-gallery-add-item-button"
 								onChange={ this.uploadFromFiles }
 								accept="image/*"
 								icon="insert"

core-blocks/gallery/editor.scss

@@ -34,12 +34,12 @@
 	}
 
 	.components-form-file-upload,
-	.button.blocks-gallery-add-item-button {
+	.button.core-blocks-gallery-add-item-button {
 		width: 100%;
 		height: 100%;
 	}
 
-	.button.blocks-gallery-add-item-button {
+	.button.core-blocks-gallery-add-item-button {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -59,14 +59,14 @@
 	}
 }
 
-.blocks-gallery-item__inline-menu {
+.core-blocks-gallery-item__inline-menu {
 	padding: 2px;
 	position: absolute;
 	top: 0;
 	right: 0;
 	background-color: $blue-medium-500;
 	display: inline-flex;
-	z-index: z-index( '.blocks-gallery-item__inline-menu' );
+	z-index: z-index( '.core-blocks-gallery-item__inline-menu' );
 
 	.components-button {
 		color: $white;

core-blocks/gallery/gallery-image.js

@@ -117,7 +117,7 @@ class GalleryImage extends Component {
 		return (
 			<figure className={ className } tabIndex="-1" onKeyDown={ this.onKeyDown } ref={ this.bindContainer }>
 				{ isSelected &&
-					<div className="blocks-gallery-item__inline-menu">
+					<div className="core-blocks-gallery-item__inline-menu">
 						<IconButton
 							icon="no-alt"
 							onClick={ onRemove }

core-blocks/image/edit.js

@@ -240,29 +240,29 @@ class ImageEdit extends Component {
 							onChange={ this.updateImageURL }
 						/>
 					) }
-					<div className="blocks-image__dimensions">
-						<p className="blocks-image__dimensions__row">
+					<div className="core-blocks-image__dimensions">
+						<p className="core-blocks-image__dimensions__row">
 							{ __( 'Image Dimensions' ) }
 						</p>
-						<div className="blocks-image__dimensions__row">
+						<div className="core-blocks-image__dimensions__row">
 							<TextControl
 								type="number"
-								className="blocks-image__dimensions__width"
+								className="core-blocks-image__dimensions__width"
 								label={ __( 'Width' ) }
 								value={ width !== undefined ? width : '' }
 								placeholder={ imageWidth }
 								onChange={ this.updateWidth }
 							/>
 							<TextControl
 								type="number"
-								className="blocks-image__dimensions__height"
+								className="core-blocks-image__dimensions__height"
 								label={ __( 'Height' ) }
 								value={ height !== undefined ? height : '' }
 								placeholder={ imageHeight }
 								onChange={ this.updateHeight }
 							/>
 						</div>
-						<div className="blocks-image__dimensions__row">
+						<div className="core-blocks-image__dimensions__row">
 							<ButtonGroup aria-label={ __( 'Image Size' ) }>
 								{ [ 25, 50, 75, 100 ].map( ( scale ) => {
 									const scaledWidth = Math.round( imageWidth * ( scale / 100 ) );

core-blocks/image/editor.scss

@@ -87,15 +87,15 @@
 	}
 }
 
-.edit-post-sidebar .blocks-image__dimensions {
+.edit-post-sidebar .core-blocks-image__dimensions {
 	margin-bottom: 1em;
 
-	.blocks-image__dimensions__row {
+	.core-blocks-image__dimensions__row {
 		display: flex;
 		justify-content: space-between;
 
-		.blocks-image__dimensions__width,
-		.blocks-image__dimensions__height {
+		.core-blocks-image__dimensions__width,
+		.core-blocks-image__dimensions__height {
 			margin-bottom: 0.5em;
 
 			// Fix the text and placeholder text being misaligned in Safari
@@ -104,11 +104,11 @@
 			}
 		}
 
-		.blocks-image__dimensions__width {
+		.core-blocks-image__dimensions__width {
 			margin-right: 5px;
 		}
 
-		.blocks-image__dimensions__height {
+		.core-blocks-image__dimensions__height {
 			margin-left: 5px;
 		}
 	}

core-blocks/list/editor.scss

@@ -1,6 +1,6 @@
-.blocks-list .editor-rich-text__tinymce,
-.blocks-list .editor-rich-text__tinymce ul,
-.blocks-list .editor-rich-text__tinymce ol {
+.core-blocks-list .editor-rich-text__tinymce,
+.core-blocks-list .editor-rich-text__tinymce ul,
+.core-blocks-list .editor-rich-text__tinymce ol {
 	padding-left: 1.3em;
 	margin-left: 1.3em;
 }

core-blocks/list/index.js

@@ -295,7 +295,7 @@ export const settings = {
 						onSetup={ this.setupEditor }
 						onChange={ this.setNextValues }
 						value={ values }
-						wrapperClassName="blocks-list"
+						wrapperClassName="core-blocks-list"
 						className={ className }
 						placeholder={ __( 'Write list…' ) }
 						onMerge={ mergeBlocks }

core-blocks/list/test/__snapshots__/index.js.snap

@@ -2,7 +2,7 @@
 
 exports[`core/list block edit matches snapshot 1`] = `
 <div
-  class="blocks-list editor-rich-text"
+  class="core-blocks-list editor-rich-text"
 >
   <div>
     <div>

core-blocks/more/edit.native.js

@@ -19,18 +19,18 @@ export default function MoreEdit( { attributes, setAttributes } ) {
 	const value = customText !== undefined ? customText : defaultText;
 
 	return (
-		<View className={ styles[ 'blocks-more-container' ] }>
-			<View className={ styles[ 'blocks-more-sub-container' ] }>
-				<Text className={ styles[ 'blocks-more-left-marker' ] }>&lt;!--</Text>
+		<View className={ styles[ 'core-blocks-more__container' ] }>
+			<View className={ styles[ 'core-blocks-more__sub-container' ] }>
+				<Text className={ styles[ 'core-blocks-more__left-marker' ] }>&lt;!--</Text>
 				<PlainText
-					className={ styles[ 'blocks-more-plain-text' ] }
+					className={ styles[ 'core-blocks-more__plain-text' ] }
 					value={ value }
 					multiline={ true }
 					underlineColorAndroid="transparent"
 					onChange={ ( newValue ) => setAttributes( { customText: newValue } ) }
 					placeholder={ defaultText }
 				/>
-				<Text className={ styles[ 'blocks-more-right-marker' ] }>--&gt;</Text>
+				<Text className={ styles[ 'core-blocks-more__right-marker' ] }>--&gt;</Text>
 			</View>
 		</View> );
 }

core-blocks/more/editor.native.scss

@@ -1,22 +1,22 @@
 // @format
 
-.blocks-more-container {
+.core-blocks-more__container {
 	align-items: center;
 	padding-left: 4;
 	padding-right: 4;
 	padding-top: 4;
 	padding-bottom: 4;
 }
 
-.blocks-more-sub-container {
+.core-blocks-more__sub-container {
 	align-items: center;
 	flex-direction: row;
 }
 
-.blocks-more-left-marker {
+.core-blocks-more__left-marker {
 	padding-right: 4;
 }
 
-.blocks-more-right-marker {
+.core-blocks-more__right-marker {
 	padding-left: 4;
 }

core-blocks/pullquote/editor.scss

@@ -1,7 +1,7 @@
 .editor-block-list__block[data-type="core/pullquote"] {
 	&[data-align="left"],
 	&[data-align="right"] {
-		& .blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]:before,
+		& .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]:before,
 		& .editor-rich-text p {
 			font-size: 20px;
 		}
@@ -24,7 +24,7 @@
 		transform: translateX( -50% );
 	}
 
-	& > .blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]:before,
+	& > .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]:before,
 	& > .editor-rich-text p {
 		font-size: 24px;
 		line-height: 1.6;

core-blocks/pullquote/index.js

@@ -90,7 +90,7 @@ export const settings = {
 						}
 						/* translators: the text of the quotation */
 						placeholder={ __( 'Write quote…' ) }
-						wrapperClassName="blocks-pullquote__content"
+						wrapperClassName="core-blocks-pullquote__content"
 					/>
 					{ ( citation || isSelected ) && (
 						<RichText

core-blocks/pullquote/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`core/pullquote block edit matches snapshot 1`] = `
   class="wp-block-pullquote"
 >
   <div
-    class="blocks-pullquote__content editor-rich-text"
+    class="core-blocks-pullquote__content editor-rich-text"
   >
     <div>
       <div>

edit-post/assets/stylesheets/_z-index.scss

@@ -22,11 +22,11 @@ $z-layers: (
 	'.editor-block-list__insertion-point': 5,
 	'.editor-format-toolbar__link-modal': 81, // should appear above block controls
 	'.editor-format-toolbar__link-container': 81, // link suggestions should also
-	'.blocks-gallery-item__inline-menu': 20,
+	'.core-blocks-gallery-item__inline-menu': 20,
 	'.editor-block-settings-menu__popover': 21, // Below the header, but above the block toolbar
 	'.editor-url-input__suggestions': 30,
 	'.edit-post-header': 30,
-	'.blocks-button__inline-link .editor-url-input__suggestions': 6, // URL suggestions for button block above sibling inserter
+	'.core-blocks-button__inline-link .editor-url-input__suggestions': 6, // URL suggestions for button block above sibling inserter
 	'.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter
 
 	// Should have lower index than anything else positioned inside the block containers

editor/components/post-excerpt/style.scss

@@ -1,4 +1,4 @@
-.editor-post-excerpt > .blocks-base-control {
+.editor-post-excerpt > .components-base-control {
 	margin-bottom: 0;
 }
 

editor/components/rich-text/index.js

@@ -867,7 +867,7 @@ export class RichText extends Component {
 					</BlockFormatControls>
 				) }
 				{ isSelected && inlineToolbar && (
-					<div className="block-rich-text__inline-toolbar">
+					<div className="editor-rich-text__inline-toolbar">
 						{ formatToolbar }
 					</div>
 				) }

editor/components/rich-text/style.scss

@@ -82,7 +82,7 @@
 	}
 }
 
-.block-rich-text__inline-toolbar {
+.editor-rich-text__inline-toolbar {
 	display: flex;
 	justify-content: center;
 	position: absolute;