Skip to content

Commit

Permalink
Merge pull request #1078 from WordPress/try/single-p
Browse files Browse the repository at this point in the history
Try one block per paragraph
  • Loading branch information
mtias authored Jun 15, 2017
2 parents 7fb1b81 + 7b172da commit 2b368a2
Show file tree
Hide file tree
Showing 9 changed files with 69 additions and 70 deletions.
41 changes: 40 additions & 1 deletion blocks/editable/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import 'element-closest';
/**
* WordPress dependencies
*/
import { BACKSPACE, DELETE } from 'utils/keycodes';
import { BACKSPACE, DELETE, ENTER } from 'utils/keycodes';

/**
* Internal dependencies
Expand Down Expand Up @@ -212,6 +212,45 @@ export default class Editable extends wp.element.Component {
if ( keyCode === BACKSPACE ) {
this.onSelectionChange();
}

if ( keyCode === ENTER && this.props.inline && this.props.onSplit ) {
const endNode = this.editor.selection.getEnd();

// Make sure the current selection is on a line break.
if ( endNode.nodeName !== 'BR' ) {
return;
}

const prevNode = endNode.previousSibling;

// Make sure the previous node is a line break. We only want to
// split on a double line break.
if ( ! prevNode || prevNode.nodeName !== 'BR' ) {
return;
}

const { dom } = this.editor;
const rootNode = this.editor.getBody();
const beforeRange = dom.createRng();
const afterRange = dom.createRng();

dom.remove( prevNode );

beforeRange.setStart( rootNode, 0 );
beforeRange.setEnd( endNode.parentNode, dom.nodeIndex( endNode ) );

afterRange.setStart( endNode.parentNode, dom.nodeIndex( endNode ) + 1 );
afterRange.setEnd( rootNode, dom.nodeIndex( rootNode.lastChild ) + 1 );

const beforeFragment = beforeRange.extractContents();
const afterFragment = afterRange.extractContents();

const beforeElement = nodeListToReact( beforeFragment.childNodes, createElement );
const afterElement = nodeListToReact( afterFragment.childNodes, createElement );

this.setContent( beforeElement );
this.props.onSplit( beforeElement, afterElement );
}
}

onNewBlock() {
Expand Down
10 changes: 2 additions & 8 deletions blocks/editable/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,12 @@
}

.blocks-editable__tinymce {
margin: 0;

> p:empty {
min-height: $editor-font-size * $editor-line-height;
}

> p:first-child {
margin-top: 0;
}

> p:last-child {
margin-bottom: 0;
}

&:focus {
outline: none;
}
Expand Down
8 changes: 7 additions & 1 deletion blocks/library/heading/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ registerBlockType( 'core/heading', {
};
},

edit( { attributes, setAttributes, focus, setFocus, mergeBlocks } ) {
edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, insertBlockAfter } ) {
const { content, nodeName = 'H2' } = attributes;

return [
Expand All @@ -103,6 +103,12 @@ registerBlockType( 'core/heading', {
onChange={ ( value ) => setAttributes( { content: value } ) }
onMerge={ mergeBlocks }
inline
onSplit={ ( before, after ) => {
setAttributes( { content: before } );
insertBlockAfter( createBlock( 'core/text', {
content: after,
} ) );
} }
/>,
];
},
Expand Down
15 changes: 7 additions & 8 deletions blocks/library/text/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,18 @@
* WordPress dependencies
*/
import { __ } from 'i18n';
import { Children, cloneElement } from 'element';
import Toggle from 'components/form-toggle';

/**
* Internal dependencies
*/
import { registerBlockType, createBlock, query, setDefaultBlock } from '../../api';
import { registerBlockType, createBlock, query as hpq, setDefaultBlock } from '../../api';
import AlignmentToolbar from '../../alignment-toolbar';
import BlockControls from '../../block-controls';
import Editable from '../../editable';
import InspectorControls from '../../inspector-controls';

const { children } = query;
const { children, query } = hpq;

registerBlockType( 'core/text', {
title: __( 'Text' ),
Expand All @@ -24,7 +23,7 @@ registerBlockType( 'core/text', {
category: 'common',

attributes: {
content: children(),
content: query( 'p', children() ),
},

merge( attributes, attributesToMerge ) {
Expand Down Expand Up @@ -60,6 +59,8 @@ registerBlockType( 'core/text', {
</InspectorControls>
),
<Editable
inline
tagName="p"
key="editable"
value={ content }
onChange={ ( nextContent ) => {
Expand All @@ -86,12 +87,10 @@ registerBlockType( 'core/text', {
const { align, content } = attributes;

if ( ! align ) {
return content;
return <p>{ content }</p>;
}

return Children.map( content, ( paragraph ) => (
cloneElement( paragraph, { style: { textAlign: align } } )
) );
return <p style={ { textAlign: align } }>{ content }</p>;
},
} );

Expand Down
10 changes: 1 addition & 9 deletions blocks/test/fixtures/core-text-align-right.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,7 @@
"attributes": {
"align": "right",
"content": [
{
"type": "p",
"attributes": {
"style": {
"textAlign": "right"
}
},
"children": "... like this one, which is separate from the above and right aligned."
}
[ "... like this one, which is separate from the above and right aligned." ]
]
}
}
Expand Down
4 changes: 0 additions & 4 deletions blocks/test/fixtures/core-text-multi-paragraph.html

This file was deleted.

33 changes: 0 additions & 33 deletions blocks/test/fixtures/core-text-multi-paragraph.json

This file was deleted.

This file was deleted.

14 changes: 12 additions & 2 deletions post-content.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,13 @@ window._wpGutenbergPost = {
raw: [
'<!-- wp:core/text data="{\\"projectName\\":\\"gutenberg\\",\\"isAwesome\\":true}" -->',
'<p>The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of <em>pieces of content</em>—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you\'ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.</p>',
'<p>What you are reading now is a <strong>text block</strong>, the most basic block of all. A text block can have multiple paragraphs, if that\'s how you prefer to write your posts. But you can also split it by hitting enter twice. Once blocks are split they get their own controls to be moved freely around the post...</p>',
'<!-- /wp:core/text -->',

'<!-- wp:core/text -->',
'<p>What you are reading now is a <strong>text block</strong>, the most basic block of all. A text block can have multiple paragraphs, if that\'s how you prefer to write your posts. But you can also split it by hitting enter twice. Once blocks are split they get their own controls to be moved freely around the post...</p>',
'<!-- /wp:core/text -->',

'<!-- wp:core/text align="right" -->',
'<p style="text-align:right;">... like this one, which is separate from the above and right aligned.</p>',
'<!-- /wp:core/text -->',

Expand Down Expand Up @@ -43,7 +46,11 @@ window._wpGutenbergPost = {
'<!-- /wp:core/heading -->',

'<!-- wp:core/text -->',
'<p>Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That\'s the spirit behind the inserter—the <code>(+)</code> button you\'ll see around the editor—which allows you to browse all available content blocks and insert them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.<p>Go give it a try, you may discover things WordPress can already insert into your posts that you didn\'t know about. Here\'s a short list of what you can currently find there:</p>',
'<p>Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That\'s the spirit behind the inserter—the <code>(+)</code> button you\'ll see around the editor—which allows you to browse all available content blocks and insert them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.</p>',
'<!-- /wp:core/text -->',

'<!-- wp:core/text -->',
'<p>Go give it a try, you may discover things WordPress can already insert into your posts that you didn\'t know about. Here\'s a short list of what you can currently find there:</p>',
'<!-- /wp:core/text -->',

'<!-- wp:core/list -->',
Expand Down Expand Up @@ -104,6 +111,9 @@ window._wpGutenbergPost = {

'<!-- wp:core/text -->',
'<p>Est quis reque cetero ad. Sea id autem nominavi deseruisse. <strong>Veniam qualisque definitionem pri id</strong>, ea autem feugiat delenit ius, mei at loem affert accumsan. Dicat eruditi cu est, te pro dicant pericula conclusionemque, ei vim detracto euripidis intellegam. Eius postea volumus mei ad.</p>',
'<!-- /wp:core/text -->',

'<!-- wp:core/text -->',
'<p>Prima ridens denique his te, ferri illum volumus an his. Eu vel dicat homero qualisqu, vitae regione deserunt vis ei. Graeci incorrupte liberavisse no mea, saepe voluptaria usu ex, vis dicant euismod id. At dolor reprimique eos, quo altera detraxit moderatius id. Quo iudico utinam eu, ad alia munere mel.</p>',
'<!-- /wp:core/text -->',

Expand Down

0 comments on commit 2b368a2

Please sign in to comment.