Skip to content

Implement image alignment controls #416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aduth merged 3 commits into from
Apr 26, 2017
Merged

Implement image alignment controls #416

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3e50f25
Implement image alignment controls
aduth Apr 12, 2017
7fd79a1
Control image alignment by encoding block attributes as wrapper props
aduth Apr 26, 2017
0857901
Apply wrapper props as opt-in from block implementation
aduth Apr 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Apply wrapper props as opt-in from block implementation
  • Loading branch information
@aduth
aduth committed Apr 26, 2017
commit 08579019b77a52af4f21036f70e5811e71cdb4f1
7 changes: 7 additions & 0 deletions blocks/library/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,13 @@ registerBlock( 'core/image', {
}
],

getEditWrapperProps( attributes ) {
const { align } = attributes;
if ( 'left' === align || 'right' === align ) {
return { 'data-align': align };
}
},

edit( { attributes, setAttributes, focus, setFocus } ) {
const { url, alt, caption } = attributes;

Expand Down
27 changes: 7 additions & 20 deletions editor/modes/visual-editor/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import { connect } from 'react-redux';
import classnames from 'classnames';
import { reduce } from 'lodash';

/**
* Internal dependencies
Expand All @@ -30,24 +29,6 @@ const formattingControls = [
}
];

/**
* Returns an object of block attributes to be assigned as data-* attribute
* props on the block's wrapper element.
*
* @param {Object} attributes Block attributes
* @return {Object} Wrapper element props
*/
export function getBlockAttributesAsProps( attributes ) {
return reduce( attributes, ( result, value, key ) => {
const type = typeof value;
if ( 'string' === type || 'number' === type || 'boolean' === type ) {
result[ 'data-' + key ] = String( value );
}

return result;
}, {} );
}

class VisualEditorBlock extends wp.element.Component {
constructor() {
super( ...arguments );
Expand Down Expand Up @@ -152,6 +133,12 @@ class VisualEditorBlock extends wp.element.Component {

const { onSelect, onStartTyping, onHover, onMouseLeave, onFocus, onInsertAfter } = this.props;

// Determine whether the block has props to apply to the wrapper
let wrapperProps;
if ( settings.getEditWrapperProps ) {
wrapperProps = settings.getEditWrapperProps( block.attributes );
}

// Disable reason: Each block can receive focus but must be able to contain
// block children. Tab keyboard navigation enabled by tabIndex assignment.

Expand All @@ -168,7 +155,7 @@ class VisualEditorBlock extends wp.element.Component {
onMouseLeave={ onMouseLeave }
className={ className }
data-type={ block.blockType }
{ ...getBlockAttributesAsProps( block.attributes ) }
{ ...wrapperProps }
>
{ ( ( isSelected && ! isTyping ) || isHovered ) && <BlockMover uid={ block.uid } /> }
{ isSelected && ! isTyping &&
Expand Down
30 changes: 0 additions & 30 deletions editor/modes/visual-editor/test/block.js
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions languages/gutenberg.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ msgid "Embed"
msgstr ""

#: blocks/library/embed/index.js:31
#: blocks/library/image/index.js:74
#: blocks/library/image/index.js:81
msgid "Write caption…"
msgstr ""

Expand Down Expand Up @@ -102,15 +102,15 @@ msgstr ""
msgid "Publish"
msgstr ""

#: editor/modes/visual-editor/block.js:18
#: editor/modes/visual-editor/block.js:17
msgid "Bold"
msgstr ""

#: editor/modes/visual-editor/block.js:23
#: editor/modes/visual-editor/block.js:22
msgid "Italic"
msgstr ""

#: editor/modes/visual-editor/block.js:28
#: editor/modes/visual-editor/block.js:27
msgid "Strikethrough"
msgstr ""

Expand Down