Skip to content
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.

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

Blocks: add "Button" #616

Merged
merged 3 commits into from
May 4, 2017
Merged

Blocks: add "Button" #616

merged 3 commits into from
May 4, 2017

Conversation

mtias
Copy link
Member

@mtias mtias commented May 3, 2017

Button

Starts a simple block to easily add a button to a post.

image


image

@mtias mtias added [Feature] Blocks Overall functionality of blocks [Status] In Progress Tracking issues with work in progress labels May 3, 2017
@jasmussen
Copy link
Contributor

jasmussen commented May 3, 2017

I dig this a lot. The link on the right works well, it would be good to get this merged in and tested so we can really feel it. It doesn't work too well responsively though.

Otherwise, thumbs up!

@mtias
Copy link
Member Author

mtias commented May 3, 2017

I am not sure about the markup here; ended up adding a wrapping div so alignment worked more precisely.

@mtias mtias added [Type] Task Issues or PRs that have been broken down into an individual action to take and removed [Status] In Progress Tracking issues with work in progress labels May 3, 2017
/>
{ focus &&
<form
className="editable-format-toolbar__link-modal"
Copy link
Member Author

Choose a reason for hiding this comment

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

This should be a component like Editable so we don't rely on reusing classes.

Copy link
Member Author

Choose a reason for hiding this comment

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

It would also simplify the interface for developers.

url: attr( 'a', 'href' ),
title: attr( 'a', 'title' ),
text: children( 'a' ),
align: ( node ) => ( node.className.match( /\balign(\S+)/ ) || [] )[ 1 ]
Copy link
Member Author

Choose a reason for hiding this comment

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

@aduth what's the latest on this?

Copy link
Member

Choose a reason for hiding this comment

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

@aduth what's the latest on this?

See #624

mtias added 3 commits May 4, 2017 12:30
Render link outside the button.

Allow opening button link externally.

Disable focusing.
This uses the default link-modal implemented for Editable,
but displays it all the time.

Positioninig is determined by block alignment.

Position URL input to the left when button is aligned right.
@mtias mtias merged commit 180e8f7 into master May 4, 2017
@mtias mtias deleted the add/button-block branch May 4, 2017 10:36
* @param {string} align Alignment value
* @return {Function} Attribute setter
*/
function applyOrUnset( align ) {
Copy link
Member

Choose a reason for hiding this comment

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

Per @iseulde's comment at #401 (comment), maybe there's value in allowing the control to be associated with an attribute to toggle, even just as an optional convenience.

Also, this has since been renamed in the image block as toggleAlignment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants