Move the HTML block into the blocks library package (#10396)(#10397)

* Move the HTML block into the blocks library package

* Move the Classic block to the packages

* Move the Classic block to the packages

bin/build-plugin-zip.sh

@@ -120,7 +120,6 @@ status "Creating archive... 🎁"
 zip -r gutenberg.zip \
 	gutenberg.php \
 	lib/*.php \
-	block-library/*/*.php \
 	packages/block-library/src/*/*.php \
 	packages/block-serialization-default-parser/*.php \
 	post-content.php \

bin/get-server-blocks.php

@@ -30,9 +30,6 @@
 require_once dirname( dirname( __FILE__ ) ) . '/lib/client-assets.php';
 
 // Register server-side code for individual blocks.
-foreach ( glob( dirname( dirname( __FILE__ ) ) . '/block-library/*/index.php' ) as $block_logic ) {
-	require_once $block_logic;
-}
 foreach ( glob( dirname( dirname( __FILE__ ) ) . '/packages/block-library/src/*/index.php' ) as $block_logic ) {
 	require_once $block_logic;
 }

components/code-editor/index.js

@@ -3,6 +3,7 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -76,6 +77,11 @@ class LazyCodeEditor extends Component {
 		this.state = {
 			status: 'pending',
 		};
+
+		deprecated( 'wp.components.CodeEditor', {
+			version: '4.2',
+			alternative: 'wp.codeEditor directly or any alternative React component for syntax highlighting',
+		} );
 	}
 
 	componentDidMount() {

docs/reference/deprecated.md

@@ -23,6 +23,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
 - `getMetaBox` selector (`core/edit-post`) has been removed. Use `isMetaBoxLocationActive` selector (`core/edit-post`) instead.
 - Attribute type coercion has been removed. Omit the source to preserve type via serialized comment demarcation.
 - `mediaDetails` in object passed to `onFileChange` callback of `wp.editor.mediaUpload`. Please use `media_details` property instead.
+- `wp.components.CodeEditor` has been removed. Used `wp.codeEditor` directly instead.
 
 ## 4.1.0
 

lib/client-assets.php

@@ -731,14 +731,14 @@ function gutenberg_register_scripts_and_styles() {
 
 	wp_register_style(
 		'wp-edit-blocks',
-		gutenberg_url( 'build/block-library/edit-blocks.css' ),
+		gutenberg_url( 'build/block-library/editor.css' ),
 		array(
 			'wp-components',
 			'wp-editor',
 			// Always include visual styles so the editor never appears broken.
 			'wp-block-library-theme',
 		),
-		filemtime( gutenberg_dir_path() . 'build/block-library/edit-blocks.css' )
+		filemtime( gutenberg_dir_path() . 'build/block-library/editor.css' )
 	);
 	wp_style_add_data( 'wp-edit-blocks', 'rtl', 'replace' );
 

packages/block-library/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.1.0 (Unreleased)
+
+### New Features
+
+- Include the classic block if `wp.oldEditor` is defined.
+- Include the HTML block.
+
 ## 2.0.0 (2018-09-05)
 
 ### Breaking Change

block-library/freeform/edit.js → packages/block-library/src/classic/edit.js

@@ -5,11 +5,6 @@ import { Component } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { BACKSPACE, DELETE, F10 } from '@wordpress/keycodes';
 
-/**
- * Internal dependencies
- */
-import './editor.scss';
-
 function isTmceEmpty( editor ) {
 	// When tinyMce is empty the content seems to be:
 	// <p><br data-mce-bogus="1"></p>
@@ -26,7 +21,7 @@ function isTmceEmpty( editor ) {
 	return /^\n?$/.test( body.innerText || body.textContent );
 }
 
-export default class FreeformEdit extends Component {
+export default class ClassicEdit extends Component {
 	constructor( props ) {
 		super( props );
 		this.initialize = this.initialize.bind( this );
@@ -176,7 +171,7 @@ export default class FreeformEdit extends Component {
 				key="toolbar"
 				id={ `toolbar-${ clientId }` }
 				ref={ ( ref ) => this.ref = ref }
-				className="freeform-toolbar"
+				className="block-library-classic__toolbar"
 				onClick={ this.focus }
 				data-placeholder={ __( 'Classic' ) }
 				onKeyDown={ this.onToolbarKeyDown }

block-library/freeform/editor.scss → packages/block-library/src/classic/editor.scss

@@ -144,7 +144,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 	padding-top: 0;
 }
 
-.freeform-toolbar {
+.block-library-classic__toolbar {
 	width: auto;
 	margin: 0 #{ -$block-padding };
 	position: sticky;

block-library/freeform/test/__snapshots__/index.js.snap → packages/block-library/src/classic/test/__snapshots__/index.js.snap

@@ -3,7 +3,7 @@
 exports[`core/freeform block edit matches snapshot 1`] = `
 Array [
   <div
-    class="freeform-toolbar"
+    class="block-library-classic__toolbar"
     data-placeholder="Classic"
     id="toolbar-undefined"
   />,

block-library/freeform/test/index.js → packages/block-library/src/classic/test/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { name, settings } from '../';
-import { blockEditRender } from '../../../packages/block-library/src/test/helpers';
+import { blockEditRender } from '../../test/helpers';
 
 describe( 'core/freeform', () => {
 	test( 'block edit matches snapshot', () => {

packages/block-library/src/editor.scss

@@ -7,8 +7,10 @@
 @import "./cover-image/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
+@import "./classic/editor.scss";
 @import "./gallery/editor.scss";
 @import "./heading/editor.scss";
+@import "./html/editor.scss";
 @import "./image/editor.scss";
 @import "./latest-comments/editor.scss";
 @import "./latest-posts/editor.scss";

packages/block-library/src/html/editor.scss

@@ -0,0 +1,12 @@
+.wp-block-html .editor-plain-text {
+	font-family: $editor-html-font;
+	font-size: $text-editor-font-size;
+	color: $dark-gray-800;
+	padding: 0.8em 1em;
+	border: 1px solid $light-gray-500;
+	border-radius: 4px;
+
+	&:focus {
+		box-shadow: none;
+	}
+}

block-library/html/index.js → packages/block-library/src/html/index.js

@@ -3,16 +3,11 @@
  */
 import { RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Disabled, SandBox, CodeEditor } from '@wordpress/components';
+import { Disabled, SandBox } from '@wordpress/components';
 import { getPhrasingContentSchema } from '@wordpress/blocks';
-import { BlockControls } from '@wordpress/editor';
+import { BlockControls, PlainText } from '@wordpress/editor';
 import { withState } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import './editor.scss';
-
 export const name = 'core/html';
 
 export const settings = {
@@ -63,7 +58,7 @@ export const settings = {
 
 	edit: withState( {
 		isPreview: false,
-	} )( ( { attributes, setAttributes, setState, isSelected, toggleSelection, isPreview } ) => (
+	} )( ( { attributes, setAttributes, setState, isPreview } ) => (
 		<div className="wp-block-html">
 			<BlockControls>
 				<div className="components-toolbar">
@@ -86,11 +81,11 @@ export const settings = {
 					( isPreview || isDisabled ) ? (
 						<SandBox html={ attributes.content } />
 					) : (
-						<CodeEditor
+						<PlainText
 							value={ attributes.content }
-							focus={ isSelected }
-							onFocus={ toggleSelection }
 							onChange={ ( content ) => setAttributes( { content } ) }
+							placeholder={ __( 'Write HTML…' ) }
+							aria-label={ __( 'HTML' ) }
 						/>
 					)
 				) }

packages/block-library/src/html/test/__snapshots__/index.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`core/html block edit matches snapshot 1`] = `
+<div
+  class="wp-block-html"
+>
+  <textarea
+    aria-label="HTML"
+    class="editor-plain-text"
+    placeholder="Write HTML…"
+    rows="1"
+  />
+</div>
+`;

block-library/html/test/index.js → packages/block-library/src/html/test/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { name, settings } from '../';
-import { blockEditRender } from '../../../packages/block-library/src/test/helpers';
+import { blockEditRender } from '../../test/helpers';
 
 describe( 'core/html', () => {
 	test( 'block edit matches snapshot', () => {