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
Next Next commit
Implement image alignment controls
  • Loading branch information
@aduth
aduth committed Apr 25, 2017
commit 3e50f252e9708e741d60058f1e45032c661fc57d
64 changes: 59 additions & 5 deletions blocks/library/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,32 @@ import Editable from 'components/editable';

const { attr, children } = query;

/**
* Component returning an image element.
*
* @param {string} props.url Image source
* @param {string} props.alt Image alt
* @param {?string} props.align Optional alignment
* @return {WPElement} Image element
*/
function Image( { url, alt, align = 'none' } ) {
return <img src={ url } alt={ alt } className={ `align${ align }` } />;
}

/**
* Returns an attribute setter with behavior that if the target value is
* already the assigned attribute value, it will be set to undefined.
*
* @param {string} align Alignment value
* @return {Function} Attribute setter
*/
function applyOrUnset( align ) {
Copy link
Member

@mtias mtias Apr 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this just be toggle? :D

Copy link
Member Author

@aduth aduth Apr 26, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're too slow @mtias *! But yeah, toggle is appropriate too.

Edit: * Re: Having been merged seconds prior.

return ( attributes, setAttributes ) => {
const nextAlign = attributes.align === align ? undefined : align;
setAttributes( { align: nextAlign } );
};
}

registerBlock( 'core/image', {
title: wp.i18n.__( 'Image' ),

Expand All @@ -16,15 +42,43 @@ registerBlock( 'core/image', {
attributes: {
url: attr( 'img', 'src' ),
alt: attr( 'img', 'alt' ),
caption: children( 'figcaption' )
caption: children( 'figcaption' ),
align: ( node ) => ( node.className.match( /\balign(\S+)/ ) || [] )[ 1 ]
},

controls: [
{
Copy link
Member

@mtias mtias Apr 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the full-bleed or whatever we call that missing?

Copy link

@joyously joyously Apr 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it's not an alignment. It's a width manipulation.

Copy link
Member

@mtias mtias Apr 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But it's a control.

icon: 'align-left',
title: wp.i18n.__( 'Align left' ),
isActive: ( { align } ) => 'left' === align,
onClick: applyOrUnset( 'left' )
},
{
icon: 'align-center',
title: wp.i18n.__( 'Align center' ),
isActive: ( { align } ) => 'center' === align,
onClick: applyOrUnset( 'center' )
},
{
icon: 'align-right',
title: wp.i18n.__( 'Align right' ),
isActive: ( { align } ) => 'right' === align,
onClick: applyOrUnset( 'right' )
},
{
icon: 'align-none',
title: wp.i18n.__( 'No alignment' ),
isActive: ( { align } ) => ! align || 'none' === align,
onClick: applyOrUnset( 'none' )
}
],

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

return (
<figure>
<img src={ url } alt={ alt } />
<Image url={ url } alt={ alt } align={ align } />
{ caption || !! focus ? (
<Editable
tagName="figcaption"
Expand All @@ -39,8 +93,8 @@ registerBlock( 'core/image', {
},

save( { attributes } ) {
const { url, alt, caption } = attributes;
const img = <img src={ url } alt={ alt } />;
const { url, alt, align, caption } = attributes;
const img = <Image url={ url } alt={ alt } align={ align } />;

if ( ! caption ) {
return img;
Expand Down
19 changes: 13 additions & 6 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:31
#: blocks/library/image/index.js:85
msgid "Write caption…"
msgstr ""

Expand All @@ -24,29 +24,36 @@ msgstr ""
msgid "Heading %s"
msgstr ""

#: blocks/library/image/index.js:10
#: blocks/library/image/index.js:36
msgid "Image"
msgstr ""

#: blocks/library/list/index.js:11
msgid "List"
msgstr ""

#: blocks/library/image/index.js:52
#: blocks/library/list/index.js:25
#: blocks/library/text/index.js:23
msgid "Align left"
msgstr ""

#: blocks/library/image/index.js:58
#: blocks/library/list/index.js:33
#: blocks/library/text/index.js:31
msgid "Align center"
msgstr ""

#: blocks/library/image/index.js:64
#: blocks/library/list/index.js:41
#: blocks/library/text/index.js:39
msgid "Align right"
msgstr ""

#: blocks/library/image/index.js:70
msgid "No alignment"
msgstr ""

#: blocks/library/list/index.js:11
msgid "List"
msgstr ""

#: blocks/library/list/index.js:49
msgid "Justify"
msgstr ""
Expand Down