From 4897fae702e5150584076d6da4fc285277aa16a5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 28 Mar 2017 14:41:20 +0100 Subject: [PATCH 1/7] Editor Chrome: Adding the editor mode switcher - 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 | 67 +++++++++++++++++++ editor/editor/mode-switcher.js | 54 +++++++++++++++ editor/editor/mode/text.js | 9 +++ editor/editor/mode/visual.js | 34 ++++++++++ editor/editor/style.scss | 85 ++++++++++++++++++++++++ editor/inserter/button.js | 49 +++++++++----- editor/inserter/style.scss | 10 +-- 11 files changed, 302 insertions(+), 67 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 63a59ee44950e4..c5c5023a54f7aa 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 00000000000000..730512d97cd07d --- /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 6d2e6f315d9bd6..00000000000000 --- 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 fc720e1c6fb817..cbee5bc237701d 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 00000000000000..4dbe2d218a8e88 --- /dev/null +++ b/editor/editor/layout.js @@ -0,0 +1,67 @@ +/** + * Internal dependencies + */ +import ModeSwitcher from './mode-switcher'; +import EditorText from './mode/text'; +import EditorVisual from './mode/visual'; + +class Layout extends wp.element.Component { + constructor() { + super( ...arguments ); + this.switchMode = this.switchMode.bind( this ); + this.changeHtml = this.changeHtml.bind( this ); + this.changeBlocks = this.changeBlocks.bind( this ); + this.state = { + mode: 'visual', + html: '', + blocks: [] + }; + } + + componentDidMount() { + this.setState( { + html: this.props.content, + blocks: wp.blocks.parse( this.props.content ) + } ); + } + + 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 + } ); + } + + changeHtml( html ) { + this.setState( { + html + } ); + } + + changeBlocks( blocks ) { + this.setState( { + blocks + } ); + } + + 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 00000000000000..25862cc3fec863 --- /dev/null +++ b/editor/editor/mode-switcher.js @@ -0,0 +1,54 @@ +class ModeSwitcher extends wp.element.Component { + constructor() { + super( ...arguments ); + this.toggle = this.toggle.bind( this ); + this.state = { + opened: false + }; + } + + toggle( event ) { + event.preventDefault(); + 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 00000000000000..40925e2a829b84 --- /dev/null +++ b/editor/editor/mode/text.js @@ -0,0 +1,9 @@ +const Text = ( { html, onChange } ) => { + return ( +
+