Move the Classic block to the packages (#10397)

* Move the Classic block to the packages * Rename freeform => classic * Update the changelog of the block library package * Fix classic block editor styles
WordPress · Oct 9, 2018 · c303621 · c303621
1 parent 0df814a
commit c303621
Show file tree

Hide file tree

Showing 20 changed files with 34 additions and 171 deletions.
diff --git a/bin/build-plugin-zip.sh b/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 \

diff --git a/bin/get-server-blocks.php b/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;
 }

diff --git a/block-library/editor.scss b/block-library/editor.scss
diff --git a/block-library/index.js b/block-library/index.js
diff --git a/block-library/index.native.js b/block-library/index.native.js
diff --git a/block-library/style.scss b/block-library/style.scss
diff --git a/block-library/theme.scss b/block-library/theme.scss
diff --git a/lib/client-assets.php b/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' );
 

diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.1.0 (Unreleased)
+
+### New Features
+
+- Include the classic block if `wp.oldEditor` is defined.
+
 ## 2.0.0 (2018-09-05)
 
 ### Breaking Change

diff --git a/block-library/freeform/edit.js → packages/block-library/src/classic/edit.js b/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 }

diff --git a/block-library/freeform/editor.scss → ...ges/block-library/src/classic/editor.scss b/block-library/freeform/editor.scss → ...ges/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;

diff --git a/block-library/freeform/index.js → packages/block-library/src/classic/index.js b/block-library/freeform/index.js → packages/block-library/src/classic/index.js
diff --git a/...freeform/test/__snapshots__/index.js.snap → .../classic/test/__snapshots__/index.js.snap b/...freeform/test/__snapshots__/index.js.snap → .../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"
   />,

diff --git a/block-library/freeform/test/index.js → ...s/block-library/src/classic/test/index.js b/block-library/freeform/test/index.js → ...s/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', () => {

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -7,6 +7,7 @@
 @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";

diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
@@ -5,6 +5,7 @@ import '@wordpress/core-data';
 import {
 	registerBlockType,
 	setDefaultBlockName,
+	setUnknownTypeHandlerName,
 } from '@wordpress/blocks';
 
 /**
@@ -44,6 +45,8 @@ import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
 
+import * as classic from './classic';
+
 export const registerCoreBlocks = () => {
 	[
 		// Common blocks are grouped at the top to prioritize their display
@@ -69,6 +72,7 @@ export const registerCoreBlocks = () => {
 		...embed.common,
 		...embed.others,
 		file,
+		window.wp && window.wp.oldEditor ? classic : null, // Only add the classic block in WP Context
 		html,
 		latestComments,
 		latestPosts,
@@ -85,9 +89,16 @@ export const registerCoreBlocks = () => {
 		textColumns,
 		verse,
 		video,
-	].forEach( ( { name, settings } ) => {
+	].forEach( ( block ) => {
+		if ( ! block ) {
+			return;
+		}
+		const { name, settings } = block;
 		registerBlockType( name, settings );
 	} );
 
 	setDefaultBlockName( paragraph.name );
+	if ( window.wp && window.wp.oldEditor ) {
+		setUnknownTypeHandlerName( classic.name );
+	}
 };
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
@@ -22,7 +22,6 @@
 	<arg name="extensions" value="php"/>
 
 	<file>./bin</file>
-	<file>./block-library</file>
 	<file>./packages/block-library/src</file>
 	<file>./lib</file>
 	<exclude-pattern>./lib/parser.php</exclude-pattern>

diff --git a/test/unit/__mocks__/@wordpress/block-library.js b/test/unit/__mocks__/@wordpress/block-library.js
@@ -0,0 +1,5 @@
+// Make sure the classic block is registered.
+window.wp = window.wp || {};
+window.wp.oldEditor = {};
+
+export * from '../../../../packages/block-library/src';
diff --git a/test/unit/jest.config.json b/test/unit/jest.config.json
@@ -1,7 +1,7 @@
 {
 	"rootDir": "../../",
 	"collectCoverageFrom": [
-		"(edit-post|block-library)/**/*.js",
+		"(edit-post)/**/*.js",
 		"packages/**/*.js"
 	],
 	"coveragePathIgnorePatterns": [
@@ -13,7 +13,7 @@
 		"<rootDir>/gutenberg-mobile/"
 	],
 	"moduleNameMapper": {
-		"@wordpress\\/(components|edit-post|block-library)$": "$1",
+		"@wordpress\\/(components|edit-post)$": "$1",
 		"@wordpress\\/(block-serialization-spec-parser|is-shallow-equal)$": "packages/$1",
 		"@wordpress\\/([a-z0-9-]+)$": "packages/$1/src"
 	},

diff --git a/webpack.config.js b/webpack.config.js
@@ -21,21 +21,6 @@ const mainCSSExtractTextPlugin = new ExtractTextPlugin( {
 	filename: './build/[basename]/style.css',
 } );
 
-// CSS loader for styles specific to block editing.
-const editBlocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './build/block-library/edit-blocks.css',
-} );
-
-// CSS loader for styles specific to blocks in general.
-const blocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './build/block-library/style.css',
-} );
-
-// CSS loader for default visual block styles.
-const themeBlocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './build/block-library/theme.css',
-} );
-
 // Configuration for the ExtractTextPlugin.
 const extractConfig = {
 	use: [
@@ -78,7 +63,6 @@ function camelCaseDash( string ) {
 const entryPointNames = [
 	'components',
 	'edit-post',
-	'block-library',
 ];
 
 const gutenbergPackages = [
@@ -87,6 +71,7 @@ const gutenbergPackages = [
 	'autop',
 	'blob',
 	'blocks',
+	'block-library',
 	'block-serialization-default-parser',
 	'block-serialization-spec-parser',
 	'compose',
@@ -182,40 +167,13 @@ const config = {
 				],
 				use: 'babel-loader',
 			},
-			{
-				test: /style\.s?css$/,
-				include: [
-					/block-library/,
-				],
-				use: blocksCSSPlugin.extract( extractConfig ),
-			},
-			{
-				test: /editor\.s?css$/,
-				include: [
-					/block-library/,
-				],
-				use: editBlocksCSSPlugin.extract( extractConfig ),
-			},
-			{
-				test: /theme\.s?css$/,
-				include: [
-					/block-library/,
-				],
-				use: themeBlocksCSSPlugin.extract( extractConfig ),
-			},
 			{
 				test: /\.s?css$/,
-				exclude: [
-					/block-library/,
-				],
 				use: mainCSSExtractTextPlugin.extract( extractConfig ),
 			},
 		],
 	},
 	plugins: [
-		blocksCSSPlugin,
-		editBlocksCSSPlugin,
-		themeBlocksCSSPlugin,
 		mainCSSExtractTextPlugin,
 		// Create RTL files with a -rtl suffix
 		new WebpackRTLPlugin( {