Use last gutenberg changes including the editor and block-editor packages refactoring

sass-transformer.js

@@ -63,8 +63,8 @@ if ( reactNativeMinorVersion >= 56 ) {
 
 // TODO: need to find a way to pass the include paths and the default asset files via some config
 const autoImportIncludePaths = [
-	path.join( path.dirname( __filename ), 'gutenberg/assets/stylesheets' ),
 	path.join( path.dirname( __filename ), 'src' ),
+	path.join( path.dirname( __filename ), 'gutenberg/assets/stylesheets' ),
 ];
 const autoImportAssets = [
 	'_colors.scss',

src/_colors.scss

@@ -0,0 +1,127 @@
+/** @format */
+
+// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
+$black: #000;
+$dark-gray-900: #191e23;
+$dark-gray-800: #23282d;
+$dark-gray-700: #32373c;
+$dark-gray-600: #40464d;
+$dark-gray-500: #555d66; // Use this most of the time for dark items.
+$dark-gray-400: #606a73;
+$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast.
+$dark-gray-200: #7e8993;
+$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast.
+$dark-gray-100: #8f98a1;
+$light-gray-900: #a2aab2;
+$light-gray-800: #b5bcc2;
+$light-gray-700: #ccd0d4;
+$light-gray-600: #d7dade;
+$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
+$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
+$light-gray-300: #edeff0;
+$light-gray-200: #f3f4f5;
+$light-gray-100: #f8f9f9;
+$white: #fff;
+
+// Dark opacities, for use with light themes.
+$dark-opacity-900: rgba(#000510, 0.9);
+$dark-opacity-800: rgba(#00000a, 0.85);
+$dark-opacity-700: rgba(#06060b, 0.8);
+$dark-opacity-600: rgba(#000913, 0.75);
+$dark-opacity-500: rgba(#0a1829, 0.7);
+$dark-opacity-400: rgba(#0a1829, 0.65);
+$dark-opacity-300: rgba(#0e1c2e, 0.62);
+$dark-opacity-200: rgba(#162435, 0.55);
+$dark-opacity-100: rgba(#223443, 0.5);
+$dark-opacity-light-900: rgba(#304455, 0.45);
+$dark-opacity-light-800: rgba(#425863, 0.4);
+$dark-opacity-light-700: rgba(#667886, 0.35);
+$dark-opacity-light-600: rgba(#7b86a2, 0.3);
+$dark-opacity-light-500: rgba(#9197a2, 0.25);
+$dark-opacity-light-400: rgba(#95959c, 0.2);
+$dark-opacity-light-300: rgba(#829493, 0.15);
+$dark-opacity-light-200: rgba(#8b8b96, 0.1);
+$dark-opacity-light-100: rgba(#747474, 0.05);
+
+// Light opacities, for use with dark themes.
+$light-opacity-900: rgba($white, 1);
+$light-opacity-800: rgba($white, 0.9);
+$light-opacity-700: rgba($white, 0.85);
+$light-opacity-600: rgba($white, 0.8);
+$light-opacity-500: rgba($white, 0.75);
+$light-opacity-400: rgba($white, 0.7);
+$light-opacity-300: rgba($white, 0.65);
+$light-opacity-200: rgba($white, 0.6);
+$light-opacity-100: rgba($white, 0.55);
+$light-opacity-light-900: rgba($white, 0.5);
+$light-opacity-light-800: rgba($white, 0.45);
+$light-opacity-light-700: rgba($white, 0.4);
+$light-opacity-light-600: rgba($white, 0.35);
+$light-opacity-light-500: rgba($white, 0.3);
+$light-opacity-light-400: rgba($white, 0.25);
+$light-opacity-light-300: rgba($white, 0.2);
+$light-opacity-light-200: rgba($white, 0.15);
+$light-opacity-light-100: rgba($white, 0.1);
+
+// Additional colors.
+// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
+$blue-wordpress-700: #00669b;
+$blue-dark-900: #0071a1;
+
+$blue-medium-900: #006589;
+$blue-medium-800: #00739c;
+$blue-medium-700: #007fac;
+$blue-medium-600: #008dbe;
+$blue-medium-500: #00a0d2;
+$blue-medium-400: #33b3db;
+$blue-medium-300: #66c6e4;
+$blue-medium-200: #bfe7f3;
+$blue-medium-100: #e5f5fa;
+$blue-medium-highlight: #b3e7fe;
+$blue-medium-focus: #007cba;
+
+// Alert colors.
+$alert-yellow: #f0b849;
+$alert-red: #d94f4f;
+$alert-green: #4ab866;
+
+// Primary Accent (Blues)
+$blue-wordpress: #0087be;
+$blue-light: #78dcfa;
+$blue-medium: #00aadc;
+$blue-dark: #005082;
+
+// Grays
+$gray: #87a6bc;
+$gray-light: lighten( $gray, 33% ); //#f3f6f8
+$gray-dark: darken( $gray, 38% ); //#2e4453
+
+// $gray-text: ideal for standard, non placeholder text
+// $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
+$gray-text: $gray-dark;
+$gray-text-min: darken( $gray, 18% ); //#537994
+
+// Shades of gray
+$gray-lighten-10: lighten( $gray, 10% ); // #a8bece
+$gray-lighten-20: lighten( $gray, 20% ); // #c8d7e1
+$gray-lighten-30: lighten( $gray, 30% ); // #e9eff3
+$gray-darken-10: darken( $gray, 10% ); // #668eaa
+$gray-darken-20: darken( $gray, 20% ); // #4f748e
+$gray-darken-30: darken( $gray, 30% ); // #3d596d
+
+//
+// See wordpress.com/design-handbook/colors/ for more info.
+
+// Secondary Accent (Oranges)
+$orange-jazzy: #f0821e;
+$orange-fire: #d54e21;
+
+// Alerts
+$alert-yellow: #f0b849;
+$alert-red: #d94f4f;
+$alert-green: #4ab866;
+$alert-purple: #855da6;
+
+// Custom
+$toolbar-button: #7b9ab1;
+$toolbar-button-disabled: $gray-lighten-30;

src/app/App.test.js

@@ -14,20 +14,22 @@ describe( 'App', () => {
 		const app = renderer.create( <App /> );
 		const rendered = app.toJSON();
 		expect( rendered ).toBeTruthy();
+		app.unmount();
 	} );
 
 	it( 'renders without crashing with a block focused', () => {
 		const app = renderer.create( <App /> );
-		const blocks = select( 'core/editor' ).getBlocks();
-		dispatch( 'core/editor' ).selectBlock( blocks[ 0 ].clientId );
+		const blocks = select( 'core/block-editor' ).getBlocks();
+		dispatch( 'core/block-editor' ).selectBlock( blocks[ 0 ].clientId );
 		const rendered = app.toJSON();
 		expect( rendered ).toBeTruthy();
+		app.unmount();
 	} );
 
 	it( 'Code block is a TextInput', () => {
-		renderer
-			.create( <App /> )
-			.root.findAllByType( BlockHolder )
+		const app = renderer.create( <App /> );
+
+		app.root.findAllByType( BlockHolder )
 			.forEach( ( blockHolder ) => {
 				if ( 'core/code' === blockHolder.props.name ) {
 					// TODO: hardcoded indices are ugly and error prone. Can we do better here?
@@ -40,17 +42,19 @@ describe( 'App', () => {
 					expect( inputComponent.type ).toBe( 'TextInput' );
 				}
 			} );
+
+		app.unmount();
 	} );
 
 	it( 'Heading block test', () => {
-		renderer
-			.create( <App /> )
-			.root.findAllByType( BlockHolder )
+		const app = renderer.create( <App /> );
+		app.root.findAllByType( BlockHolder )
 			.forEach( ( blockHolder ) => {
 				if ( 'core/heading' === blockHolder.props.name ) {
 					const aztec = blockHolder.findByType( 'RCTAztecView' );
 					expect( aztec.props.text.text ).toBe( '<h2>What is Gutenberg?</h2>' );
 				}
 			} );
+		app.unmount();
 	} );
 } );