From 001ec39eb996c83096dd37f79dbe119fe3e24809 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 29 Mar 2017 09:37:42 +0100 Subject: [PATCH] Editor Chrome: Adding the editor mode switcher (#339) - Adding the `onChange` content handler - v1 of the editor header - Adding a v1 the text editor --- editor/assets/stylesheets/main.scss | 17 +++-- editor/assets/stylesheets/variables.scss | 2 + editor/editor/editor.js | 21 ------ editor/editor/index.js | 21 +----- editor/editor/layout.js | 50 ++++++++++++++ editor/editor/mode-switcher.js | 53 +++++++++++++++ editor/editor/mode/text.js | 13 ++++ editor/editor/mode/visual.js | 34 ++++++++++ editor/editor/style.scss | 85 ++++++++++++++++++++++++ editor/inserter/button.js | 51 +++++++++----- editor/inserter/index.js | 4 +- editor/inserter/style.scss | 10 +-- webpack.config.js | 4 +- 13 files changed, 293 insertions(+), 72 deletions(-) create mode 100644 editor/assets/stylesheets/variables.scss delete mode 100644 editor/editor/editor.js create mode 100644 editor/editor/layout.js create mode 100644 editor/editor/mode-switcher.js create mode 100644 editor/editor/mode/text.js create mode 100644 editor/editor/mode/visual.js create mode 100644 editor/editor/style.scss diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index 63a59ee44950e..c5c5023a54f7a 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -1,21 +1,28 @@ +@import './variables'; @import '../../inserter/style'; +@import '../../editor/style'; body.toplevel_page_gutenberg { background: #fff; + + #update-nag, .update-nag { + position: absolute; + right: 0; + top: 50px; + } + + #wpcontent { + padding-left: 0; + } } .gutenberg { - margin: -20px 0 0 -20px; - padding: 60px; - * { box-sizing: border-box; } } .gutenberg__editor { - max-width: 700px; - margin: 0 auto; position: relative; img { max-width: 100%; diff --git a/editor/assets/stylesheets/variables.scss b/editor/assets/stylesheets/variables.scss new file mode 100644 index 0000000000000..730512d97cd07 --- /dev/null +++ b/editor/assets/stylesheets/variables.scss @@ -0,0 +1,2 @@ +$gray: #575D65; +$light-gray: #e0e5e9; diff --git a/editor/editor/editor.js b/editor/editor/editor.js deleted file mode 100644 index 6d2e6f315d9bd..0000000000000 --- a/editor/editor/editor.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Internal dependencies - */ -import InserterButton from '../inserter/button'; - -const Editor = ( { state: { blocks, inserter }, toggleInserter } ) => { - return ( -
-
- { blocks.map( ( block, index ) => -
- { wp.blocks.getBlockSettings( block.blockType ).edit( block.attributes ) } -
- ) } -
- -
- ); -}; - -export default Editor; diff --git a/editor/editor/index.js b/editor/editor/index.js index fc720e1c6fb81..cb7e973122995 100644 --- a/editor/editor/index.js +++ b/editor/editor/index.js @@ -1,35 +1,18 @@ /** * Internal dependencies */ -import EditorComponent from './editor'; +import EditorLayout from './layout'; export default class Editor { constructor( id, settings ) { - this.toggleInserter = this.toggleInserter.bind( this ); this.id = id; this.settings = settings; - this.state = { - inserter: { opened: false }, - blocks: wp.blocks.parse( settings.content ) - }; - console.log( this.state.blocks ); // eslint-disable-line no-console this.render(); } - setState( newState ) { - this.state = Object.assign( {}, this.state, newState ); - this.render(); - } - - toggleInserter() { - this.setState( { - inserter: { opened: ! this.state.inserter.opened } - } ); - } - render() { wp.element.render( - , + , document.getElementById( this.id ) ); } diff --git a/editor/editor/layout.js b/editor/editor/layout.js new file mode 100644 index 0000000000000..064972747b763 --- /dev/null +++ b/editor/editor/layout.js @@ -0,0 +1,50 @@ +/** + * Internal dependencies + */ +import ModeSwitcher from './mode-switcher'; +import EditorText from './mode/text'; +import EditorVisual from './mode/visual'; + +class Layout extends wp.element.Component { + constructor( props ) { + super( ...arguments ); + this.switchMode = this.switchMode.bind( this ); + this.state = { + mode: 'visual', + html: props.initialContent, + blocks: wp.blocks.parse( this.props.initialContent ) + }; + } + + switchMode( newMode ) { + // TODO: we need a serializer from blocks here + const html = this.state.html; + const blocks = this.mode === 'visual' ? this.state.blocks : wp.blocks.parse( this.state.html ); + this.setState( { + mode: newMode, + html, + blocks + } ); + } + + createChangeHandler( type ) { + return ( value ) => this.setState( { [ type ]: value } ); + } + + render() { + const { mode, html, blocks } = this.state; + return ( +
+
+ +
+
+ { mode === 'text' && } + { mode === 'visual' && } +
+
+ ); + } +} + +export default Layout; diff --git a/editor/editor/mode-switcher.js b/editor/editor/mode-switcher.js new file mode 100644 index 0000000000000..2743d8f7acad1 --- /dev/null +++ b/editor/editor/mode-switcher.js @@ -0,0 +1,53 @@ +class ModeSwitcher extends wp.element.Component { + constructor() { + super( ...arguments ); + this.toggle = this.toggle.bind( this ); + this.state = { + opened: false + }; + } + + toggle() { + this.setState( { + opened: ! this.state.opened + } ); + } + + render() { + const { opened } = this.state; + const modes = [ + { value: 'visual', label: 'Visual' }, + { value: 'text', label: 'Text' }, + ]; + const switchMode = ( mode ) => () => { + this.setState( { opened: false } ); + this.props.onSwitch( mode ); + }; + const currentMode = modes.find( ( { value } ) => value === this.props.mode ); + + return ( +
+ + { opened && +
+
+ { modes.map( ( mode ) => + + ) } +
+ } +
+ ); + } +} + +export default ModeSwitcher; diff --git a/editor/editor/mode/text.js b/editor/editor/mode/text.js new file mode 100644 index 0000000000000..708d4c6a0080e --- /dev/null +++ b/editor/editor/mode/text.js @@ -0,0 +1,13 @@ +function Text( { html, onChange } ) { + const changeValue = ( event ) => { + onChange( event.target.value ); + }; + + return ( +
+