diff --git a/src/app/App.test.js b/src/app/App.test.js index f847a232e6dbdf..d3c60ab6f6cd06 100644 --- a/src/app/App.test.js +++ b/src/app/App.test.js @@ -39,7 +39,7 @@ describe( 'App', () => { if ( 'core/code' === blockHolder.props.name ) { // TODO: hardcoded indices are ugly and error prone. Can we do better here? const blockHolderContainer = blockHolder.children[ 0 ].children[ 0 ].children[ 0 ]; - const contentComponent = blockHolderContainer.children[ 1 ]; + const contentComponent = blockHolderContainer.children[ 0 ]; const inputComponent = contentComponent.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ] .children[ 0 ].children[ 0 ]; diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js index 84b91f2a33eb10..0d1b24a8e2186c 100644 --- a/src/block-management/block-holder.js +++ b/src/block-management/block-holder.js @@ -1,7 +1,7 @@ /** - * @format - * @flow - */ +* @format +* @flow +*/ import React from 'react'; import { View, Text, TouchableWithoutFeedback } from 'react-native'; @@ -15,6 +15,7 @@ import styles from './block-holder.scss'; import { getBlockType, getUnknownTypeHandlerName } from '@wordpress/blocks'; type PropsType = BlockType & { + showTitle: boolean, onChange: ( clientId: string, attributes: mixed ) => void, onToolbarButtonPressed: ( button: number, clientId: string ) => void, onBlockHolderPressed: ( clientId: string ) => void, @@ -56,9 +57,9 @@ export default class BlockHolder extends React.Component { let style; if ( blockType.name === 'core/code' ) { - style = styles.block_code; + style = styles.blockCode; } else if ( blockType.name === 'core/paragraph' ) { - style = styles[ 'aztec_editor' ]; + style = styles.blockText; } // TODO: setAttributes needs to change the state/attributes @@ -86,15 +87,21 @@ export default class BlockHolder extends React.Component { return blockType; } + renderBlockTitle() { + return ( + + BlockType: { this.props.name } + + ); + } + render() { return ( - - BlockType: { this.props.name } - + { this.props.showTitle && this.renderBlockTitle() } { this.getBlockForType.bind( this )() } { this.renderToolbarIfBlockFocused.bind( this )() } diff --git a/src/block-management/block-holder.scss b/src/block-management/block-holder.scss index edc19aa9ad631a..1977e2a6beb45b 100644 --- a/src/block-management/block-holder.scss +++ b/src/block-management/block-holder.scss @@ -8,10 +8,7 @@ .blockContainer { background-color: white; - padding-left: 8; - padding-right: 8; - padding-top: 8; - padding-bottom: 8; + padding: 8px; } .blockTitle { @@ -49,8 +46,4 @@ .aztec_container { flex: 1; -} - -.aztec_editor { - min-height: 50; -} +} \ No newline at end of file diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js index 5634ce9e96d818..954683d24e364d 100644 --- a/src/block-management/block-manager.js +++ b/src/block-management/block-manager.js @@ -35,6 +35,7 @@ type PropsType = BlockListType; type StateType = { dataSource: DataSource, showHtml: boolean, + inspectBlocks: boolean, blockTypePickerVisible: boolean, selectedBlockType: string, html: string, @@ -46,6 +47,7 @@ export default class BlockManager extends React.Component this.state = { dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.clientId ), showHtml: false, + inspectBlocks: false, blockTypePickerVisible: false, selectedBlockType: 'core/paragraph', // just any valid type to start from html: '', @@ -194,7 +196,7 @@ export default class BlockManager extends React.Component item.clientId } renderItem={ this.renderItem.bind( this ) } /> @@ -222,15 +224,21 @@ export default class BlockManager extends React.Component return ( - - View html output + View html output + + Inspect blocks { this.state.showHtml && this.renderHTML() } { ! this.state.showHtml && list } @@ -250,6 +258,10 @@ export default class BlockManager extends React.Component this.setState( { showHtml } ); } + handleInspectBlocksChanged = ( inspectBlocks: boolean ) => { + this.setState( { inspectBlocks } ); + } + handleHTMLUpdate = ( html: string ) => { this.setState( { html } ); } @@ -270,6 +282,7 @@ export default class BlockManager extends React.Component onToolbarButtonPressed={ this.onToolbarButtonPressed.bind( this ) } onBlockHolderPressed={ this.onBlockHolderPressed.bind( this ) } onChange={ this.onChange.bind( this ) } + showTitle={ this.state.inspectBlocks } focused={ value.item.focused } clientId={ value.clientId } { ...value.item } diff --git a/src/block-management/block-manager.scss b/src/block-management/block-manager.scss index d381eabad85bf0..f2906f2eea37e7 100644 --- a/src/block-management/block-manager.scss +++ b/src/block-management/block-manager.scss @@ -5,12 +5,12 @@ .container { flex: 1; justify-content: flex-start; - background-color: #caa; + background-color: #fff; + padding-top: 30; } .list { flex: 1; - background-color: #ccc; } .htmlView { @@ -26,8 +26,15 @@ .switch { flex-direction: row; justify-content: flex-start; + align-items: center; + margin: 10px; } +.switchLabel { + margin-left: 10px; +} + + .lineStyleAddHere { flex: 1; background-color: #0087be; // blue_wordpress diff --git a/src/block-management/block-styles.scss b/src/block-management/block-styles.scss index dc688986686fba..7ea0f46cf24aee 100644 --- a/src/block-management/block-styles.scss +++ b/src/block-management/block-styles.scss @@ -2,6 +2,10 @@ @import '../variables.scss'; -.block_code { +.blockCode { font-family: $default-monospace-font; } + +.blockText { + min-height: 50; +} \ No newline at end of file