diff --git a/gutenberg b/gutenberg index de77ad841f..a981491e4e 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit de77ad841fb1097777970b59965c390f0a686581 +Subproject commit a981491e4e65c99302649a4e1aff7c3822850a22 diff --git a/sass-transformer.js b/sass-transformer.js index d0659b846b..2628eba9f8 100644 --- a/sass-transformer.js +++ b/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', diff --git a/src/_colors.scss b/src/_colors.scss new file mode 100644 index 0000000000..fec3f69d39 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/variables.android.scss b/src/_variables.android.scss similarity index 100% rename from src/variables.android.scss rename to src/_variables.android.scss diff --git a/src/variables.ios.scss b/src/_variables.ios.scss similarity index 100% rename from src/variables.ios.scss rename to src/_variables.ios.scss diff --git a/src/app/App.test.js b/src/app/App.test.js index 6856cc30b4..648fd070c6 100644 --- a/src/app/App.test.js +++ b/src/app/App.test.js @@ -14,20 +14,22 @@ describe( 'App', () => { const app = renderer.create( ); const rendered = app.toJSON(); expect( rendered ).toBeTruthy(); + app.unmount(); } ); it( 'renders without crashing with a block focused', () => { const app = renderer.create( ); - 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( ) - .root.findAllByType( BlockHolder ) + const app = renderer.create( ); + + 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( ) - .root.findAllByType( BlockHolder ) + const app = renderer.create( ); + app.root.findAllByType( BlockHolder ) .forEach( ( blockHolder ) => { if ( 'core/heading' === blockHolder.props.name ) { const aztec = blockHolder.findByType( 'RCTAztecView' ); expect( aztec.props.text.text ).toBe( '

What is Gutenberg?

' ); } } ); + app.unmount(); } ); } ); diff --git a/src/app/AppContainer.js b/src/app/AppContainer.js index 966e6efac0..305cc8d4c7 100644 --- a/src/app/AppContainer.js +++ b/src/app/AppContainer.js @@ -2,35 +2,57 @@ * @format */ import React from 'react'; +import type { EmitterSubscription } from 'react-native'; +import RNReactNativeGutenbergBridge, { + subscribeParentGetHtml, + subscribeParentToggleHTMLMode, + subscribeSetTitle, + subscribeUpdateHtml, +} from 'react-native-gutenberg-bridge'; import { isEmpty } from 'lodash'; + import { parse, serialize } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge'; +import { BlockEditorProvider } from '@wordpress/block-editor'; +import { UnsupportedBlock } from '@wordpress/editor'; -import MainApp from './MainApp'; import type { BlockType } from '../store/types'; -import { name as unsupportedBlockName } from '../block-types/unsupported-block'; + +import BlockManager from '../block-management/block-manager'; type PropsType = { - rootClientId: ?string, initialHtmlModeEnabled: boolean, - showHtml: boolean, + editorMode: string, editedPostContent: string, title: string, initialTitle: string, initialHtml: string, editTitle: string => mixed, - resetBlocks: Array => mixed, + resetEditorBlocks: Array => mixed, + resetEditorBlocksWithoutUndoLevel: Array => mixed, setupEditor: ( mixed, ?mixed ) => mixed, - toggleBlockMode: ?string => mixed, - getBlocks: () => Array, + toggleEditorMode: ?string => mixed, + blocks: Array, + isReady: boolean, + mode: string, post: ?mixed, + getEditedPostContent: () => string, + switchMode: string => mixed, }; +/* + * This container combines features similar to the following components on Gutenberg: + * - `gutenberg/packages/editor/src/components/provider/index.js` + * - `gutenberg/packages/edit-post/src/components/layout/index.js` + */ class AppContainer extends React.Component { lastHtml: ?string; lastTitle: ?string; + subscriptionParentGetHtml: ?EmitterSubscription; + subscriptionParentToggleHTMLMode: ?EmitterSubscription; + subscriptionParentSetTitle: ?EmitterSubscription; + subscriptionParentUpdateHtml: ?EmitterSubscription; constructor( props: PropsType ) { super( props ); @@ -50,24 +72,55 @@ class AppContainer extends React.Component { this.lastHtml = serialize( parse( props.initialHtml ) ); this.lastTitle = props.initialTitle; - if ( props.initialHtmlModeEnabled && ! props.showHtml ) { + if ( props.initialHtmlModeEnabled && props.mode === 'visual' ) { // enable html mode if the initial mode the parent wants it but we're not already in it - this.toggleHtmlModeAction(); + this.toggleMode(); } } - componentDidMount = () => { - const blocks = this.props.getBlocks(); - const hasUnsupportedBlocks = ! isEmpty( blocks.filter( ( { name } ) => name === unsupportedBlockName ) ); + componentDidMount() { + const blocks = this.props.blocks; + const hasUnsupportedBlocks = ! isEmpty( blocks.filter( ( { name } ) => name === UnsupportedBlock.name ) ); RNReactNativeGutenbergBridge.editorDidMount( hasUnsupportedBlocks ); + + this.subscriptionParentGetHtml = subscribeParentGetHtml( () => { + this.serializeToNativeAction(); + } ); + + this.subscriptionParentToggleHTMLMode = subscribeParentToggleHTMLMode( () => { + this.toggleMode(); + } ); + + this.subscriptionParentSetTitle = subscribeSetTitle( ( payload ) => { + this.props.editTitle( payload.title ); + } ); + + this.subscriptionParentUpdateHtml = subscribeUpdateHtml( ( payload ) => { + this.updateHtmlAction( payload.html ); + } ); + } + + componentWillUnmount() { + if ( this.subscriptionParentGetHtml ) { + this.subscriptionParentGetHtml.remove(); + } + if ( this.subscriptionParentToggleHTMLMode ) { + this.subscriptionParentToggleHTMLMode.remove(); + } + if ( this.subscriptionParentSetTitle ) { + this.subscriptionParentSetTitle.remove(); + } + if ( this.subscriptionParentUpdateHtml ) { + this.subscriptionParentUpdateHtml.remove(); + } } - serializeToNativeAction = () => { - if ( this.props.showHtml ) { - this.updateHtmlAction( this.props.editedPostContent ); + serializeToNativeAction() { + if ( this.props.mode === 'text' ) { + this.updateHtmlAction( this.props.getEditedPostContent() ); } - const html = serialize( this.props.getBlocks() ); + const html = serialize( this.props.blocks ); const title = this.props.title; const hasChanges = title !== this.lastTitle || html !== this.lastHtml; @@ -76,66 +129,94 @@ class AppContainer extends React.Component { this.lastTitle = title; this.lastHtml = html; - }; - - toggleHtmlModeAction = () => { - this.props.toggleBlockMode( this.props.rootClientId ); - }; - - setTitleAction = ( title: string ) => { - this.props.editTitle( title ); - }; + } - updateHtmlAction = ( html: string = '' ) => { + updateHtmlAction( html: string = '' ) { const parsed = parse( html ); - this.props.resetBlocks( parsed ); - }; + this.props.resetEditorBlocksWithoutUndoLevel( parsed ); + } + + toggleMode() { + const { mode, switchMode } = this.props; + switchMode( mode === 'visual' ? 'text' : 'visual' ); + } render() { + const { + blocks, + editTitle, + isReady, + mode, + resetEditorBlocks, + resetEditorBlocksWithoutUndoLevel, + title, + } = this.props; + + if ( ! isReady ) { + return null; + } + return ( - + + + ); } } export default compose( [ - withSelect( ( select, { rootClientId } ) => { + withSelect( ( select ) => { const { - getBlocks, - getBlockMode, - getEditedPostContent, + __unstableIsEditorReady: isEditorReady, + getEditorBlocks, getEditedPostAttribute, + getEditedPostContent, } = select( 'core/editor' ); + const { + getEditorMode, + } = select( 'core/edit-post' ); return { - getBlocks, - showHtml: getBlockMode( rootClientId ) === 'html', - editedPostContent: getEditedPostContent(), + isReady: isEditorReady(), + blocks: getEditorBlocks(), + mode: getEditorMode(), title: getEditedPostAttribute( 'title' ), + getEditedPostContent, }; } ), withDispatch( ( dispatch ) => { const { editPost, - resetBlocks, setupEditor, - toggleBlockMode, + resetEditorBlocks, } = dispatch( 'core/editor' ); + const { + switchEditorMode, + } = dispatch( 'core/edit-post' ); return { editTitle( title ) { - editPost( { title: title } ); + editPost( { title } ); + }, + resetEditorBlocks, + resetEditorBlocksWithoutUndoLevel( blocks ) { + resetEditorBlocks( blocks, { + __unstableShouldCreateUndoLevel: false, + } ); }, - resetBlocks, setupEditor, - toggleBlockMode, + switchMode( mode ) { + switchEditorMode( mode ); + }, }; } ), ] )( AppContainer ); diff --git a/src/app/MainApp.js b/src/app/MainApp.js deleted file mode 100644 index 3f80f9835e..0000000000 --- a/src/app/MainApp.js +++ /dev/null @@ -1,74 +0,0 @@ -/** @flow - * @format */ - -import React from 'react'; -import { - subscribeParentGetHtml, - subscribeParentToggleHTMLMode, - subscribeSetTitle, - subscribeUpdateHtml, -} from 'react-native-gutenberg-bridge'; - -import BlockManager from '../block-management/block-manager'; -import { SlotFillProvider } from '@wordpress/components'; - -import type { EmitterSubscription } from 'react-native'; - -type PropsType = { - rootClientId: ?string, - serializeToNativeAction: void => void, - toggleHtmlModeAction: void => void, - setTitleAction: string => void, - updateHtmlAction: string => void, - title: string, -}; - -type StateType = {}; - -export default class MainScreen extends React.Component { - subscriptionParentGetHtml: ?EmitterSubscription; - subscriptionParentToggleHTMLMode: ?EmitterSubscription; - subscriptionParentSetTitle: ?EmitterSubscription; - subscriptionParentUpdateHtml: ?EmitterSubscription; - - componentDidMount() { - this.subscriptionParentGetHtml = subscribeParentGetHtml( () => { - this.props.serializeToNativeAction(); - } ); - - this.subscriptionParentToggleHTMLMode = subscribeParentToggleHTMLMode( () => { - this.props.toggleHtmlModeAction(); - } ); - - this.subscriptionParentSetTitle = subscribeSetTitle( ( payload ) => { - this.props.setTitleAction( payload.title ); - } ); - - this.subscriptionParentUpdateHtml = subscribeUpdateHtml( ( payload ) => { - this.props.updateHtmlAction( payload.html ); - } ); - } - - componentWillUnmount() { - if ( this.subscriptionParentGetHtml ) { - this.subscriptionParentGetHtml.remove(); - } - if ( this.subscriptionParentToggleHTMLMode ) { - this.subscriptionParentToggleHTMLMode.remove(); - } - if ( this.subscriptionParentSetTitle ) { - this.subscriptionParentSetTitle.remove(); - } - if ( this.subscriptionParentUpdateHtml ) { - this.subscriptionParentUpdateHtml.remove(); - } - } - - render() { - return ( - - - - ); - } -} diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js index 42fdedf4af..e41d1af970 100644 --- a/src/block-management/block-holder.js +++ b/src/block-management/block-holder.js @@ -21,7 +21,7 @@ import type { BlockType } from '../store/types'; import styles from './block-holder.scss'; // Gutenberg imports -import { BlockEdit } from '@wordpress/editor'; +import { BlockEdit } from '@wordpress/block-editor'; import TextInputState from 'react-native/lib/TextInputState'; @@ -191,7 +191,7 @@ export default compose( [ getPreviousBlockClientId, getNextBlockClientId, isBlockSelected, - } = select( 'core/editor' ); + } = select( 'core/block-editor' ); const name = getBlockName( clientId ); const attributes = getBlockAttributes( clientId ); const order = getBlockIndex( clientId, rootClientId ); @@ -221,7 +221,7 @@ export default compose( [ replaceBlocks, selectBlock, updateBlockAttributes, - } = dispatch( 'core/editor' ); + } = dispatch( 'core/block-editor' ); return { mergeBlocks, diff --git a/src/block-management/block-holder.scss b/src/block-management/block-holder.scss index de18de2591..58defac2eb 100644 --- a/src/block-management/block-holder.scss +++ b/src/block-management/block-holder.scss @@ -1,6 +1,5 @@ /** @format */ -@import 'colors.scss'; @import 'block-styles.scss'; .blockHolder { @@ -30,33 +29,6 @@ padding-bottom: 4; } -.unsupportedBlock { - background-color: #e9eff3; // grey lighten 30 - padding-top: 8; - padding-bottom: 8; - padding-left: 8; - padding-right: 8; -} - -.unsupportedBlockImagePlaceholder { - margin: auto; - text-align: center; - background-color: #4f748e; // dark grey - width: 20; - height: 20; - margin-top: 24; - margin-bottom: 8; -} - -.unsupportedBlockMessage { - text-align: center; - color: #4f748e; // grey darken 20 - padding-top: 24; - padding-bottom: 24; - font-size: 16px; - font-family: $default-regular-font; -} - .aztec_container { flex: 1; } \ No newline at end of file diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js index 5b67c4fc6c..be398f28e4 100644 --- a/src/block-management/block-manager.js +++ b/src/block-management/block-manager.js @@ -29,7 +29,8 @@ import SafeArea from 'react-native-safe-area'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks'; -import { DefaultBlockAppender, PostTitle } from '@wordpress/editor'; +import { PostTitle } from '@wordpress/editor'; +import { DefaultBlockAppender } from '@wordpress/block-editor'; import { sendNativeEditorDidLayout, subscribeSetFocusOnTitle } from 'react-native-gutenberg-bridge'; type PropsType = { @@ -51,15 +52,16 @@ type PropsType = { type StateType = { blockTypePickerVisible: boolean, isKeyboardVisible: boolean, - rootViewHeight: number; - safeAreaBottomInset: number; - isFullyBordered: boolean; + rootViewHeight: number, + safeAreaBottomInset: number, + isFullyBordered: boolean, }; export class BlockManager extends React.Component { scrollViewRef: Object; postTitleRef: ?Object; subscriptionParentSetFocusOnTitle: ?Object; + _isMounted: boolean; constructor( props: PropsType ) { super( props ); @@ -116,7 +118,7 @@ export class BlockManager extends React.Component { onSafeAreaInsetsUpdate( result: Object ) { const { safeAreaInsets } = result; - if ( this.state.safeAreaBottomInset !== safeAreaInsets.bottom ) { + if ( this._isMounted && this.state.safeAreaBottomInset !== safeAreaInsets.bottom ) { this.setState( { ...this.state, safeAreaBottomInset: safeAreaInsets.bottom } ); } } @@ -128,7 +130,7 @@ export class BlockManager extends React.Component { } ); } - onContentViewLayout = ( event: LayoutChangeEvent ) => { + onContentViewLayout( event: LayoutChangeEvent ) { const { width: fullWidth } = Dimensions.get( 'window' ); const { width } = event.nativeEvent.layout; const isFullyBordered = fullWidth > width + 1; //+1 is for not letting fraction differences effect the result on Android @@ -142,6 +144,7 @@ export class BlockManager extends React.Component { } componentDidMount() { + this._isMounted = true; Keyboard.addListener( 'keyboardDidShow', this.keyboardDidShow ); Keyboard.addListener( 'keyboardDidHide', this.keyboardDidHide ); SafeArea.addEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); @@ -159,6 +162,7 @@ export class BlockManager extends React.Component { if ( this.subscriptionParentSetFocusOnTitle ) { this.subscriptionParentSetFocusOnTitle.remove(); } + this._isMounted = false; } keyboardDidShow() { @@ -169,7 +173,7 @@ export class BlockManager extends React.Component { this.setState( { isKeyboardVisible: false } ); } - onCaretVerticalPositionChange = ( targetId: number, caretY: number, previousCaretY: ?number ) => { + onCaretVerticalPositionChange( targetId: number, caretY: number, previousCaretY: ?number ) { handleCaretVerticalPositionChange( this.scrollViewRef, targetId, caretY, previousCaretY ); } @@ -314,8 +318,8 @@ export default compose( [ getSelectedBlock, getSelectedBlockClientId, isBlockSelected, - getBlockMode, - } = select( 'core/editor' ); + } = select( 'core/block-editor' ); + const selectedBlockClientId = getSelectedBlockClientId(); return { @@ -325,7 +329,6 @@ export default compose( [ selectedBlock: getSelectedBlock(), selectedBlockClientId, selectedBlockOrder: getBlockIndex( selectedBlockClientId ), - showHtml: getBlockMode() === 'html', }; } ), withDispatch( ( dispatch ) => { @@ -334,7 +337,7 @@ export default compose( [ insertBlock, replaceBlock, selectBlock, - } = dispatch( 'core/editor' ); + } = dispatch( 'core/block-editor' ); return { insertBlock, diff --git a/src/block-management/block-manager.scss b/src/block-management/block-manager.scss index 742f0f92bc..362fa6abb1 100644 --- a/src/block-management/block-manager.scss +++ b/src/block-management/block-manager.scss @@ -1,8 +1,5 @@ /** @format */ -@import '../variables.scss'; -@import 'colors.scss'; - .container { flex: 1; justify-content: flex-start; diff --git a/src/block-management/block-picker.js b/src/block-management/block-picker.js index 8d4b42878f..3d8527416a 100644 --- a/src/block-management/block-picker.js +++ b/src/block-management/block-picker.js @@ -13,7 +13,7 @@ import { FlatList, Text, TouchableHighlight, View } from 'react-native'; * WordPress dependencies */ import { SVG } from '@wordpress/components'; -import { BottomSheet } from '@wordpress/editor'; +import { BottomSheet, UnsupportedBlock } from '@wordpress/editor'; import { Component } from '@wordpress/element'; import { getBlockTypes } from '@wordpress/blocks'; @@ -21,7 +21,6 @@ import { getBlockTypes } from '@wordpress/blocks'; * Internal dependencies */ import styles from './block-picker.scss'; -import { name as unsupportedBlockName } from '../block-types/unsupported-block'; type PropsType = { style?: StyleSheet, @@ -32,7 +31,7 @@ type PropsType = { }; export default class BlockPicker extends Component { - availableBlockTypes = getBlockTypes().filter( ( { name } ) => name !== unsupportedBlockName ); + availableBlockTypes = getBlockTypes().filter( ( { name } ) => name !== UnsupportedBlock.name ); render() { const numberOfColumns = this.calculateNumberOfColumns(); diff --git a/src/block-management/block-picker.scss b/src/block-management/block-picker.scss index b640c20cdc..b11aa74918 100644 --- a/src/block-management/block-picker.scss +++ b/src/block-management/block-picker.scss @@ -1,8 +1,5 @@ /** @format */ -@import 'variables.scss'; -@import 'colors.scss'; - .touchableArea { border-radius: 8px 8px 8px 8px; } diff --git a/src/block-management/block-styles.scss b/src/block-management/block-styles.scss index 7ea0f46cf2..550e6ea19f 100644 --- a/src/block-management/block-styles.scss +++ b/src/block-management/block-styles.scss @@ -1,7 +1,5 @@ /** @format */ -@import '../variables.scss'; - .blockCode { font-family: $default-monospace-font; } diff --git a/src/block-management/block-toolbar.js b/src/block-management/block-toolbar.js index 598af91351..ec6a3fc8d7 100644 --- a/src/block-management/block-toolbar.js +++ b/src/block-management/block-toolbar.js @@ -8,7 +8,7 @@ import { View, ScrollView, Keyboard } from 'react-native'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { Toolbar, ToolbarButton } from '@wordpress/components'; -import { BlockFormatControls, BlockControls } from '@wordpress/editor'; +import { BlockFormatControls, BlockControls } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import styles from './block-toolbar.scss'; diff --git a/src/block-management/inline-toolbar/index.js b/src/block-management/inline-toolbar/index.js index 85fe3a90a7..382c641d64 100644 --- a/src/block-management/inline-toolbar/index.js +++ b/src/block-management/inline-toolbar/index.js @@ -6,7 +6,7 @@ import { View } from 'react-native'; import InlineToolbarActions from './actions'; import { ToolbarButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { InspectorControls } from '@wordpress/editor'; +import { InspectorControls } from '@wordpress/block-editor'; type PropsType = { clientId: string, diff --git a/src/block-management/inline-toolbar/style.scss b/src/block-management/inline-toolbar/style.scss index a0fc300e35..13889c9135 100644 --- a/src/block-management/inline-toolbar/style.scss +++ b/src/block-management/inline-toolbar/style.scss @@ -1,7 +1,5 @@ /** @format */ -@import 'colors.scss'; - .toolbar { flex-direction: row; height: 44px; diff --git a/src/block-types/unsupported-block/edit.js b/src/block-types/unsupported-block/edit.js deleted file mode 100644 index 97d20895a0..0000000000 --- a/src/block-types/unsupported-block/edit.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @format - * @flow - */ - -import React from 'react'; -import { View, Text } from 'react-native'; -import type { BlockType } from '../../store/types'; - -type PropsType = BlockType & { - onChange: ( clientId: string, attributes: mixed ) => void, - onToolbarButtonPressed: ( button: number, clientId: string ) => void, - onBlockHolderPressed: ( clientId: string ) => void, -}; - -// Styles -import styles from '../../block-management/block-holder.scss'; - -export default class UnsupportedBlockEdit extends React.Component { - render() { - return ( - - Unsupported - - ); - } -} diff --git a/src/block-types/unsupported-block/index.js b/src/block-types/unsupported-block/index.js deleted file mode 100644 index 0150da01c6..0000000000 --- a/src/block-types/unsupported-block/index.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * @format - * @flow - */ - -import React from 'react'; - -// Gutenberg imports -import { __ } from '@wordpress/i18n'; -import { RawHTML } from '@wordpress/element'; - -import edit from './edit'; - -type Attributes = { - content: String -} - -export const name = 'gmobile/unsupported'; - -export const settings = { - title: __( 'Unsupported Block' ), - - description: __( 'Unsupported block type.' ), - - icon: 'editor-code', - - category: 'formatting', - - attributes: { - content: { - type: 'string', - source: 'html', - }, - }, - - supports: { - className: false, - customClassName: false, - }, - - transforms: { - }, - - edit, - - save( { attributes }: { attributes: Attributes } ) { - return { attributes.content }; - }, -}; diff --git a/src/colors.scss b/src/colors.scss deleted file mode 100644 index 6186d4796d..0000000000 --- a/src/colors.scss +++ /dev/null @@ -1,44 +0,0 @@ -/** @format */ - -// Partly imported from wp-calypso/assets/stylesheets/shared/_colors.scss - -// 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; \ No newline at end of file diff --git a/src/components/html-text-input.js b/src/components/html-text-input.js index bb2d5d38a1..12ec8b122a 100644 --- a/src/components/html-text-input.js +++ b/src/components/html-text-input.js @@ -125,7 +125,8 @@ export default compose( [ }; } ), withDispatch( ( dispatch ) => { - const { editPost, resetBlocks } = dispatch( 'core/editor' ); + const { resetBlocks } = dispatch( 'core/block-editor' ); + const { editPost } = dispatch( 'core/editor' ); return { onChange( content ) { editPost( { content } ); diff --git a/src/components/html-text-input.scss b/src/components/html-text-input.scss index 888c742aa8..d5e60e6f03 100644 --- a/src/components/html-text-input.scss +++ b/src/components/html-text-input.scss @@ -1,7 +1,5 @@ /** @format */ -@import '../variables.scss'; - .htmlView { font-family: $default-monospace-font; background-color: white; diff --git a/src/index.js b/src/index.js index ba033c1c3e..326c3b9b0c 100644 --- a/src/index.js +++ b/src/index.js @@ -23,24 +23,9 @@ const gutenbergSetup = () => { const editorSetup = () => { require( '@wordpress/format-library' ); - const wpBlockLibrary = require( '@wordpress/block-library' ); - const wpBlocks = require( '@wordpress/blocks' ); - const registerCoreBlocks = wpBlockLibrary.registerCoreBlocks; - const registerBlockType = wpBlocks.registerBlockType; - const setUnregisteredTypeHandlerName = wpBlocks.setUnregisteredTypeHandlerName; - const unregisterBlockType = wpBlocks.unregisterBlockType; - const UnsupportedBlock = require( './block-types/unsupported-block' ); + const editPost = require( '@wordpress/edit-post' ); - // register and setup blocks - registerCoreBlocks(); - registerBlockType( UnsupportedBlock.name, UnsupportedBlock.settings ); - setUnregisteredTypeHandlerName( UnsupportedBlock.name ); - - // disable Code and More blocks for release - if ( ! __DEV__ ) { - unregisterBlockType( 'core/code' ); - unregisterBlockType( 'core/more' ); - } + editPost.initializeEditor(); }; const setupLocale = ( locale, extraTranslations ) => { diff --git a/symlinked-packages/@wordpress/block-editor b/symlinked-packages/@wordpress/block-editor new file mode 120000 index 0000000000..9131c65a06 --- /dev/null +++ b/symlinked-packages/@wordpress/block-editor @@ -0,0 +1 @@ +../../gutenberg/packages/block-editor/src \ No newline at end of file diff --git a/symlinked-packages/@wordpress/edit-post b/symlinked-packages/@wordpress/edit-post new file mode 120000 index 0000000000..ea37753ccf --- /dev/null +++ b/symlinked-packages/@wordpress/edit-post @@ -0,0 +1 @@ +../../gutenberg/packages/edit-post/src \ No newline at end of file diff --git a/symlinked-packages/@wordpress/token-list b/symlinked-packages/@wordpress/token-list new file mode 120000 index 0000000000..1ae50a2a59 --- /dev/null +++ b/symlinked-packages/@wordpress/token-list @@ -0,0 +1 @@ +../../gutenberg/packages/token-list/src \ No newline at end of file