Blocks: Avoir reusable blocks styling

blocks/library/categories/editor.scss

@@ -1,9 +1,7 @@
-.editor-block-list__block[data-type="core/categories"] {
-	.wp-block-categories ul {
-		padding-left: 2.5em;
+.gutenberg .wp-block-categories ul {
+	padding-left: 2.5em;
 
-		ul {
-			margin-top: 6px;
-		}
+	ul {
+		margin-top: 6px;
 	}
 }

blocks/library/code/editor.scss

@@ -1,4 +1,4 @@
-div[data-type="core/code"] {
+.gutenberg .wp-block-code {
 	textarea {
 		box-shadow: none;
 		font-family: $editor-html-font;

blocks/library/code/index.js

@@ -64,14 +64,14 @@ registerBlockType( 'core/code', {
 					</BlockDescription>
 				</InspectorControls>
 			),
-			<TextareaAutosize
-				key="block"
-				className={ className }
-				value={ attributes.content }
-				onChange={ ( event ) => setAttributes( { content: event.target.value } ) }
-				placeholder={ __( 'Write code…' ) }
-				aria-label={ __( 'Code' ) }
-			/>,
+			<div className={ className } key="block">
+				<TextareaAutosize
+					value={ attributes.content }
+					onChange={ ( event ) => setAttributes( { content: event.target.value } ) }
+					placeholder={ __( 'Write code…' ) }
+					aria-label={ __( 'Code' ) }
+				/>
+			</div>,
 		];
 	},
 

blocks/library/cover-image/editor.scss

@@ -1,4 +1,4 @@
-.editor-block-list__block[data-type="core/cover-image"] {
+.wp-block-cover-image {
 	.blocks-editable__tinymce[data-is-empty="true"]:before {
 		position: inherit;
 	}

blocks/library/freeform/editor.scss

@@ -1,4 +1,4 @@
-.editor-block-list__block[data-type="core/freeform"] .blocks-editable__tinymce {
+.wp-block-freeform.blocks-editable__tinymce {
 	p {
 		line-height: $editor-line-height;
 	}

blocks/library/freeform/old-editor.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -177,7 +182,7 @@ export default class OldEditor extends Component {
 	}
 
 	render() {
-		const { focus, id } = this.props;
+		const { focus, id, className } = this.props;
 
 		return [
 			focus && (
@@ -197,7 +202,7 @@ export default class OldEditor extends Component {
 			<div
 				key="editor"
 				id={ id }
-				className="blocks-editable__tinymce"
+				className={ classnames( className, 'blocks-editable__tinymce' ) }
 			/>,
 		];
 	}

blocks/library/gallery/editor.scss

@@ -1,7 +1,3 @@
-.editor-block-list__block[data-type="core/gallery"] .editor-block-list__block-edit {
-	overflow: hidden;
-}
-
 .blocks-gallery-image {
 	position: relative;
 

blocks/library/heading/editor.scss

@@ -1,4 +1,4 @@
-.editor-block-list__block[data-type="core/heading"] {
+.wp-block-heading {
 	h1,
 	h2,
 	h3,

blocks/library/heading/index.js

@@ -145,6 +145,7 @@ registerBlockType( 'core/heading', {
 			),
 			<Editable
 				key="editable"
+				wrapperClassName="wp-block-heading"
 				tagName={ nodeName.toLowerCase() }
 				value={ content }
 				focus={ focus }

blocks/library/html/editor.scss

@@ -1,14 +1,12 @@
-div[data-type="core/html"] {
-	textarea {
-		box-shadow: none;
-		font-family: $editor-html-font;
-		font-size: $text-editor-font-size;
-		color: $dark-gray-800;
-		border: 1px solid $light-gray-500;
-		border-radius: 4px;
-		padding: .8em 1.6em;
-		margin: 0;
-		overflow-x: auto;
-		width: 100%;
-	}
+.gutenberg textarea.wp-block-html {
+	box-shadow: none;
+	font-family: $editor-html-font;
+	font-size: $text-editor-font-size;
+	color: $dark-gray-800;
+	border: 1px solid $light-gray-500;
+	border-radius: 4px;
+	padding: .8em 1.6em;
+	margin: 0;
+	overflow-x: auto;
+	width: 100%;
 }

blocks/library/html/index.js

@@ -64,6 +64,7 @@ registerBlockType( 'core/html', {
 				key="preview"
 				dangerouslySetInnerHTML={ { __html: attributes.content } } /> :
 			<TextareaAutosize
+				className="wp-block-html"
 				key="editor"
 				value={ attributes.content }
 				onChange={ ( event ) => setAttributes( { content: event.target.value } ) }

blocks/library/latest-posts/editor.scss

@@ -1,10 +1,6 @@
-
-.editor-block-list__block[data-type="core/latest-posts"] {
-
-	.wp-block-latest-posts {
-		padding-left: 2.5em;
-		&.is-grid {
-			padding-left: 0;
-		}
+.gutenberg .wp-block-latest-posts {
+	padding-left: 2.5em;
+	&.is-grid {
+		padding-left: 0;
 	}
 }

blocks/library/more/editor.scss

@@ -3,7 +3,7 @@
 	text-align: center;
 }
 
-.editor-block-list__block .wp-block-more {
+.gutenberg .wp-block-more {
 	input {
 		font-size: 12px;
 		text-transform: uppercase;

blocks/library/paragraph/style.scss

@@ -18,7 +18,3 @@ p.has-drop-cap:not( :focus )  {
 p.has-background {
 	padding: 20px 30px;
 }
-
-.editor-block-list__block:not( .is-multi-selected ) .wp-block-paragraph {
-	background: white;
-}

blocks/library/preformatted/editor.scss

@@ -1,4 +1,4 @@
-div[data-type="core/preformatted"] {
+.wp-block-preformatted {
 	pre {
 		white-space: pre-wrap;
 		font-family: $editor-html-font;

blocks/library/table/editor.scss

@@ -1,9 +1,4 @@
 .editor-block-list__block[data-type="core/table"] {
-
-	.editor-block-toolbar__group > div {
-		display: flex;
-	}
-
 	&[data-align="left"],
 	&[data-align="right"] {
 		min-width: 33%;