Skip to content

Commit ad19a58

Browse files
TugTug
authored
Merge pull request #731 from wordpress-mobile/update/gutenberg-editor-refactoring
Use last gutenberg changes including the editor and block-editor packages refactoring
2 parents 7cc5710 + 11fe689 commit ad19a58

27 files changed

+299
-330
lines changed

‎gutenberg

Submodule gutenberg updated 951 files

‎sass-transformer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ if ( reactNativeMinorVersion >= 56 ) {
6363

6464
// TODO: need to find a way to pass the include paths and the default asset files via some config
6565
const autoImportIncludePaths = [
66-
path.join( path.dirname( __filename ), 'gutenberg/assets/stylesheets' ),
6766
path.join( path.dirname( __filename ), 'src' ),
67+
path.join( path.dirname( __filename ), 'gutenberg/assets/stylesheets' ),
6868
];
6969
const autoImportAssets = [
7070
'_colors.scss',

‎src/_colors.scss

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/** @format */
2+
3+
// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
4+
$black: #000;
5+
$dark-gray-900: #191e23;
6+
$dark-gray-800: #23282d;
7+
$dark-gray-700: #32373c;
8+
$dark-gray-600: #40464d;
9+
$dark-gray-500: #555d66; // Use this most of the time for dark items.
10+
$dark-gray-400: #606a73;
11+
$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast.
12+
$dark-gray-200: #7e8993;
13+
$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast.
14+
$dark-gray-100: #8f98a1;
15+
$light-gray-900: #a2aab2;
16+
$light-gray-800: #b5bcc2;
17+
$light-gray-700: #ccd0d4;
18+
$light-gray-600: #d7dade;
19+
$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
20+
$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
21+
$light-gray-300: #edeff0;
22+
$light-gray-200: #f3f4f5;
23+
$light-gray-100: #f8f9f9;
24+
$white: #fff;
25+
26+
// Dark opacities, for use with light themes.
27+
$dark-opacity-900: rgba(#000510, 0.9);
28+
$dark-opacity-800: rgba(#00000a, 0.85);
29+
$dark-opacity-700: rgba(#06060b, 0.8);
30+
$dark-opacity-600: rgba(#000913, 0.75);
31+
$dark-opacity-500: rgba(#0a1829, 0.7);
32+
$dark-opacity-400: rgba(#0a1829, 0.65);
33+
$dark-opacity-300: rgba(#0e1c2e, 0.62);
34+
$dark-opacity-200: rgba(#162435, 0.55);
35+
$dark-opacity-100: rgba(#223443, 0.5);
36+
$dark-opacity-light-900: rgba(#304455, 0.45);
37+
$dark-opacity-light-800: rgba(#425863, 0.4);
38+
$dark-opacity-light-700: rgba(#667886, 0.35);
39+
$dark-opacity-light-600: rgba(#7b86a2, 0.3);
40+
$dark-opacity-light-500: rgba(#9197a2, 0.25);
41+
$dark-opacity-light-400: rgba(#95959c, 0.2);
42+
$dark-opacity-light-300: rgba(#829493, 0.15);
43+
$dark-opacity-light-200: rgba(#8b8b96, 0.1);
44+
$dark-opacity-light-100: rgba(#747474, 0.05);
45+
46+
// Light opacities, for use with dark themes.
47+
$light-opacity-900: rgba($white, 1);
48+
$light-opacity-800: rgba($white, 0.9);
49+
$light-opacity-700: rgba($white, 0.85);
50+
$light-opacity-600: rgba($white, 0.8);
51+
$light-opacity-500: rgba($white, 0.75);
52+
$light-opacity-400: rgba($white, 0.7);
53+
$light-opacity-300: rgba($white, 0.65);
54+
$light-opacity-200: rgba($white, 0.6);
55+
$light-opacity-100: rgba($white, 0.55);
56+
$light-opacity-light-900: rgba($white, 0.5);
57+
$light-opacity-light-800: rgba($white, 0.45);
58+
$light-opacity-light-700: rgba($white, 0.4);
59+
$light-opacity-light-600: rgba($white, 0.35);
60+
$light-opacity-light-500: rgba($white, 0.3);
61+
$light-opacity-light-400: rgba($white, 0.25);
62+
$light-opacity-light-300: rgba($white, 0.2);
63+
$light-opacity-light-200: rgba($white, 0.15);
64+
$light-opacity-light-100: rgba($white, 0.1);
65+
66+
// Additional colors.
67+
// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
68+
$blue-wordpress-700: #00669b;
69+
$blue-dark-900: #0071a1;
70+
71+
$blue-medium-900: #006589;
72+
$blue-medium-800: #00739c;
73+
$blue-medium-700: #007fac;
74+
$blue-medium-600: #008dbe;
75+
$blue-medium-500: #00a0d2;
76+
$blue-medium-400: #33b3db;
77+
$blue-medium-300: #66c6e4;
78+
$blue-medium-200: #bfe7f3;
79+
$blue-medium-100: #e5f5fa;
80+
$blue-medium-highlight: #b3e7fe;
81+
$blue-medium-focus: #007cba;
82+
83+
// Alert colors.
84+
$alert-yellow: #f0b849;
85+
$alert-red: #d94f4f;
86+
$alert-green: #4ab866;
87+
88+
// Primary Accent (Blues)
89+
$blue-wordpress: #0087be;
90+
$blue-light: #78dcfa;
91+
$blue-medium: #00aadc;
92+
$blue-dark: #005082;
93+
94+
// Grays
95+
$gray: #87a6bc;
96+
$gray-light: lighten( $gray, 33% ); //#f3f6f8
97+
$gray-dark: darken( $gray, 38% ); //#2e4453
98+
99+
// $gray-text: ideal for standard, non placeholder text
100+
// $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
101+
$gray-text: $gray-dark;
102+
$gray-text-min: darken( $gray, 18% ); //#537994
103+
104+
// Shades of gray
105+
$gray-lighten-10: lighten( $gray, 10% ); // #a8bece
106+
$gray-lighten-20: lighten( $gray, 20% ); // #c8d7e1
107+
$gray-lighten-30: lighten( $gray, 30% ); // #e9eff3
108+
$gray-darken-10: darken( $gray, 10% ); // #668eaa
109+
$gray-darken-20: darken( $gray, 20% ); // #4f748e
110+
$gray-darken-30: darken( $gray, 30% ); // #3d596d
111+
112+
//
113+
// See wordpress.com/design-handbook/colors/ for more info.
114+
115+
// Secondary Accent (Oranges)
116+
$orange-jazzy: #f0821e;
117+
$orange-fire: #d54e21;
118+
119+
// Alerts
120+
$alert-yellow: #f0b849;
121+
$alert-red: #d94f4f;
122+
$alert-green: #4ab866;
123+
$alert-purple: #855da6;
124+
125+
// Custom
126+
$toolbar-button: #7b9ab1;
127+
$toolbar-button-disabled: $gray-lighten-30;

‎src/variables.android.scss ‎src/_variables.android.scss

File renamed without changes.

‎src/variables.ios.scss ‎src/_variables.ios.scss

File renamed without changes.

‎src/app/App.test.js

+12-8
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,22 @@ describe( 'App', () => {
1414
const app = renderer.create( <App /> );
1515
const rendered = app.toJSON();
1616
expect( rendered ).toBeTruthy();
17+
app.unmount();
1718
} );
1819

1920
it( 'renders without crashing with a block focused', () => {
2021
const app = renderer.create( <App /> );
21-
const blocks = select( 'core/editor' ).getBlocks();
22-
dispatch( 'core/editor' ).selectBlock( blocks[ 0 ].clientId );
22+
const blocks = select( 'core/block-editor' ).getBlocks();
23+
dispatch( 'core/block-editor' ).selectBlock( blocks[ 0 ].clientId );
2324
const rendered = app.toJSON();
2425
expect( rendered ).toBeTruthy();
26+
app.unmount();
2527
} );
2628

2729
it( 'Code block is a TextInput', () => {
28-
renderer
29-
.create( <App /> )
30-
.root.findAllByType( BlockHolder )
30+
const app = renderer.create( <App /> );
31+
32+
app.root.findAllByType( BlockHolder )
3133
.forEach( ( blockHolder ) => {
3234
if ( 'core/code' === blockHolder.props.name ) {
3335
// TODO: hardcoded indices are ugly and error prone. Can we do better here?
@@ -40,17 +42,19 @@ describe( 'App', () => {
4042
expect( inputComponent.type ).toBe( 'TextInput' );
4143
}
4244
} );
45+
46+
app.unmount();
4347
} );
4448

4549
it( 'Heading block test', () => {
46-
renderer
47-
.create( <App /> )
48-
.root.findAllByType( BlockHolder )
50+
const app = renderer.create( <App /> );
51+
app.root.findAllByType( BlockHolder )
4952
.forEach( ( blockHolder ) => {
5053
if ( 'core/heading' === blockHolder.props.name ) {
5154
const aztec = blockHolder.findByType( 'RCTAztecView' );
5255
expect( aztec.props.text.text ).toBe( '<h2>What is Gutenberg?</h2>' );
5356
}
5457
} );
58+
app.unmount();
5559
} );
5660
} );

0 commit comments

Comments
 (0)