Skip to content

Commit

Permalink
Add "inline" prop to Editable component
Browse files Browse the repository at this point in the history
  • Loading branch information
aduth committed May 5, 2017
1 parent 1cb599d commit 76d62e7
Show file tree
Hide file tree
Showing 9 changed files with 41 additions and 23 deletions.
14 changes: 13 additions & 1 deletion blocks/components/editable/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,16 @@ export default class Editable extends wp.element.Component {
}

render() {
const { tagName, style, value, focus, className, showAlignments = false, formattingControls } = this.props;
const {
tagName,
style,
value,
focus,
className,
showAlignments = false,
inline,
formattingControls
} = this.props;
const classes = classnames( 'blocks-editable', className );

// Generating a key that includes `tagName` ensures that if the tag
Expand All @@ -335,6 +344,9 @@ export default class Editable extends wp.element.Component {
style={ style }
className={ classes }
defaultValue={ value }
settings={ {
forced_root_block: inline ? false : 'p'
} }
key={ key } />
);

Expand Down
5 changes: 1 addition & 4 deletions blocks/components/editable/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,7 @@ figcaption.blocks-editable {
margin-top: 0.5em;
color: $dark-gray-100;
text-align: center;

p {
font-size: $default-font-size;
}
font-size: $default-font-size;
}


Expand Down
7 changes: 5 additions & 2 deletions blocks/components/editable/tinymce.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export default class TinyMCE extends wp.element.Component {
}

initialize() {
const { settings, focus } = this.props;

tinymce.init( {
target: this.editorNode,
theme: false,
Expand All @@ -35,10 +37,11 @@ export default class TinyMCE extends wp.element.Component {
},
formats: {
strikethrough: { inline: 'del' }
}
},
...settings
} );

if ( this.props.focus ) {
if ( focus ) {
this.editorNode.focus();
}
}
Expand Down
1 change: 1 addition & 0 deletions blocks/library/button/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ registerBlock( 'core/button', {
value={ text }
onFocus={ setFocus }
onChange={ ( value ) => setAttributes( { text: value } ) }
inline
/>
{ focus &&
<form
Expand Down
4 changes: 3 additions & 1 deletion blocks/library/embed/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@ registerBlock( 'core/embed', {
value={ caption }
focus={ focus }
onFocus={ setFocus }
onChange={ ( value ) => setAttributes( { caption: value } ) } />
onChange={ ( value ) => setAttributes( { caption: value } ) }
inline
/>
) : null }
</figure>
);
Expand Down
1 change: 1 addition & 0 deletions blocks/library/heading/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ registerBlock( 'core/heading', {
onFocus={ setFocus }
onChange={ ( value ) => setAttributes( { content: value } ) }
onMerge={ mergeWithPrevious }
inline
/>
);
},
Expand Down
4 changes: 3 additions & 1 deletion blocks/library/image/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,9 @@ registerBlock( 'core/image', {
value={ caption }
focus={ focus }
onFocus={ setFocus }
onChange={ ( value ) => setAttributes( { caption: value } ) } />
onChange={ ( value ) => setAttributes( { caption: value } ) }
inline
/>
) : null }
</figure>
);
Expand Down
24 changes: 12 additions & 12 deletions blocks/library/quote/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,18 +121,18 @@ registerBlock( 'core/quote', {
showAlignments
/>
{ ( citation || !! focus ) && (
<footer>
<Editable
value={ citation }
onChange={
( nextCitation ) => setAttributes( {
citation: nextCitation
} )
}
focus={ focusedEditable === 'citation' ? focus : null }
onFocus={ () => setFocus( { editable: 'citation' } ) }
/>
</footer>
<Editable
tagName="footer"
value={ citation }
onChange={
( nextCitation ) => setAttributes( {
citation: nextCitation
} )
}
focus={ focusedEditable === 'citation' ? focus : null }
onFocus={ () => setFocus( { editable: 'citation' } ) }
inline
/>
) }
</blockquote>
);
Expand Down
4 changes: 2 additions & 2 deletions post-content.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ window._wpGutenbergPost = {
'<!-- /wp:core/text -->',

'<!-- wp:core/quote style="1" -->',
'<blockquote class="blocks-quote-style-1"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><footer><p>Matt Mullenweg, 2017</p></footer></blockquote>',
'<blockquote class="blocks-quote-style-1"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><footer>Matt Mullenweg, 2017</footer></blockquote>',
'<!-- /wp:core/quote -->',

'<!-- wp:core/text -->',
Expand All @@ -86,7 +86,7 @@ window._wpGutenbergPost = {
'<!-- /wp:core/text -->',

'<!-- wp:core/quote style="2" -->',
'<blockquote class="blocks-quote-style-2"><p>There is no greater agony than bearing an untold story inside you.</p><footer><p>Maya Angelou</p></footer></blockquote>',
'<blockquote class="blocks-quote-style-2"><p>There is no greater agony than bearing an untold story inside you.</p><footer>Maya Angelou</footer></blockquote>',
'<!-- /wp:core/quote -->',

'<!-- wp:core/separator -->',
Expand Down

0 comments on commit 76d62e7

Please sign in to comment.