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

Always show "new gallery item" below the gallery #7391

Merged

Conversation

caxco93
Copy link
Contributor

@caxco93 caxco93 commented Jun 20, 2018

Added has-add-item-button class to the corresponding li element.
Added has-add-item-button class css for the desired effect.

Description

Selecting a gallery won't shift the layout presentation to accommodate the extra placeholder item anymore.

Fixes #7300.

How has this been tested?

Ran npm test using the docker-compose setup.

Screenshots

Before:
not_below
After:
always_below

Types of changes

Visual change

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.

@jasmussen jasmussen requested a review from a team June 20, 2018 08:21
@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. labels Jun 20, 2018
Copy link
Member

@tofumatt tofumatt left a comment

Choose a reason for hiding this comment

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

I dig it, nice!

Just a small comment tweak and class name change requested from me, but I tested it locally and it works well!

@@ -81,6 +81,13 @@
}
}

// Apply max-width to gallery item that contains the add new gallery item button
Copy link
Member

Choose a reason for hiding this comment

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

This comment could be a bit clearer; it's intent is to make the "add new gallery item" button full-width, so let's just say that 😄:

// Make the "Add new Gallery item" button full-width (so it always appears below other items).

@@ -264,7 +264,7 @@ class GalleryEdit extends Component {
</li>
) ) }
{ isSelected &&
<li className="blocks-gallery-item">
<li className="blocks-gallery-item has-add-item-button">
Copy link
Member

Choose a reason for hiding this comment

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

I don't understand this class name exactly... wouldn't is-selected or something like that be better? Or I guess this is saying it's surrounding the add-item-button, but this has- prefix makes this read to me like it could have or could not have that button.

What about blocks-gallery-add-item-button?

Copy link
Member

Choose a reason for hiding this comment

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

Just noticed that this file doesn't follow coding guidelines for CSS class names: https://github.com/WordPress/gutenberg/blob/master/docs/reference/coding-guidelines.md#naming.

In this case it should be:
.editor-[ directory name ]__[ descendant description ].is-[ modifier description ]
or
.editor-[ directory name ]__[ descendant description ]

I.e.:
classname="core-blocks-gallery__item is-add-button"
or
classname="core-blocks-gallery__add-item-button"

Copy link
Member

Choose a reason for hiding this comment

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

I wish we could lint these somehow, I always forget them as my brain is still adjusting from my old class name habits!

Thanks for catching that. 👍

Copy link
Member

@gziolo gziolo Jun 20, 2018

Choose a reason for hiding this comment

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

It's doable. I think @aduth has implemented something similar for Calypso a long time ago. This rule is following BEM (Blocks, Elements, Modifiers), which is pretty well established standard.

Copy link
Contributor Author

@caxco93 caxco93 Jun 20, 2018

Choose a reason for hiding this comment

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

Hi @tofumatt thanks for the review. I used has-add-item-button instead of is-selected because the latter is a different existing behaviour. Also, yes. A gallery ítem like could or not have that button (this same element type is used to contain the images). The button per se was already 100% width, but its container wasn't. Does this make sense to you guys? @gziolo

@karmatosed karmatosed self-requested a review June 20, 2018 19:28
@karmatosed
Copy link
Member

karmatosed commented Jun 20, 2018

Thanks for looking into this and suggesting @nagayama. [edit] I was going to close but see there's discussion in issue so will add my thoughts there.

@karmatosed karmatosed closed this Jun 20, 2018
@karmatosed karmatosed reopened this Jun 20, 2018
Added `has-add-item-button` class to the corresponding `li` element.
Added `has-add-item-button` class css for the desired effect.
@caxco93 caxco93 force-pushed the update/gallery-new-item-always-below branch from df8e120 to 010a6d4 Compare June 24, 2018 21:41
Copy link
Member

@karmatosed karmatosed left a comment

Choose a reason for hiding this comment

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

Approving based on consensus to get feedback.

@tofumatt
Copy link
Member

tofumatt commented Jul 3, 2018

Sweet! 🚢

@tofumatt tofumatt merged commit 9f5c9d2 into WordPress:master Jul 3, 2018
@tofumatt tofumatt added this to the 3.2 milestone Jul 3, 2018
@tofumatt tofumatt removed the Needs Design Feedback Needs general design feedback. label Jul 3, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Always show "new gallery item" below the gallery
5 participants