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

Gallery: Update button rendering (Move backward, Move forward, Remove) #23471

Merged
merged 2 commits into from Jun 26, 2020

Conversation

ItsJonQ
Copy link

@ItsJonQ ItsJonQ commented Jun 25, 2020

Screen Shot 2020-06-25 at 10 12 42 AM

This update fixes the Move backward, Move forwarded, and Remove button rendering for the Gallery block.

The issue seemed to come from some newer styles overridding the padding resets of the Gallery buttons.

Screen Shot 2020-06-25 at 10 08 24 AM

The solution involved increasing the specificity of the Gallery button selectors.

How has this been tested?

  • Run npm run dev
  • Add a Gallery block
  • Add several images
  • Click on an image
  • Ensure the buttons look okay

(Test in Chrome, Safari, and Firefox)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • [n/a] My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • [n/a] I've updated all React Native files affected by any refactorings/renamings in this PR.

Resolves: #23469

@ItsJonQ ItsJonQ added [Type] Bug An existing feature does not function as intended [Block] Gallery Affects the Gallery Block - used to display groups of images labels Jun 25, 2020
@ItsJonQ ItsJonQ requested a review from ellatrix June 25, 2020 14:15
@ItsJonQ ItsJonQ self-assigned this Jun 25, 2020
@github-actions
Copy link

github-actions bot commented Jun 25, 2020

Size Change: +678 B (0%)

Total Size: 1.13 MB

Filename Size Change
build/annotations/index.js 3.62 kB +1 B
build/block-directory/index.js 7.37 kB +5 B (0%)
build/block-editor/index.js 109 kB -108 B (0%)
build/block-editor/style-rtl.css 10.7 kB -40 B (0%)
build/block-editor/style.css 10.7 kB -37 B (0%)
build/block-library/editor-rtl.css 7.6 kB +1 B
build/block-library/index.js 130 kB +4 B (0%)
build/blocks/index.js 48.2 kB -2 B (0%)
build/components/index.js 198 kB +661 B (0%)
build/components/style-rtl.css 15.9 kB +131 B (0%)
build/components/style.css 15.9 kB +138 B (0%)
build/compose/index.js 9.65 kB +26 B (0%)
build/core-data/index.js 11.4 kB -1 B
build/data/index.js 8.44 kB -1 B
build/edit-navigation/index.js 9.87 kB -1 B
build/edit-post/index.js 303 kB -10 B (0%)
build/edit-site/index.js 16.6 kB -31 B (0%)
build/edit-site/style-rtl.css 3.03 kB +9 B (0%)
build/edit-site/style.css 3.03 kB +11 B (0%)
build/edit-widgets/index.js 9.32 kB -2 B (0%)
build/editor/index.js 44.8 kB -154 B (0%)
build/editor/style-rtl.css 3.85 kB +38 B (0%)
build/editor/style.css 3.85 kB +40 B (1%)
build/format-library/index.js 7.73 kB -1 B
build/nux/index.js 3.4 kB +1 B
build/plugins/index.js 2.56 kB +1 B
build/token-list/index.js 1.28 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 941 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/editor.css 7.6 kB 0 B
build/block-library/style-rtl.css 8.04 kB 0 B
build/block-library/style.css 8.04 kB 0 B
build/block-library/theme-rtl.css 730 B 0 B
build/block-library/theme.css 732 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.19 kB 0 B
build/edit-navigation/style-rtl.css 1.02 kB 0 B
build/edit-navigation/style.css 1.02 kB 0 B
build/edit-post/style-rtl.css 5.51 kB 0 B
build/edit-post/style.css 5.5 kB 0 B
build/edit-widgets/style-rtl.css 2.42 kB 0 B
build/edit-widgets/style.css 2.42 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.13 kB 0 B
build/list-reusable-blocks/style-rtl.css 450 B 0 B
build/list-reusable-blocks/style.css 451 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/style-rtl.css 663 B 0 B
build/nux/style.css 660 B 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Member

@ellatrix ellatrix left a comment

Choose a reason for hiding this comment

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

Looks good. The buttons do look a bit small compared to tho block toolbar.

@ellatrix ellatrix added this to Approved in WordPress 5.5 Must Have Jun 26, 2020
@ItsJonQ
Copy link
Author

ItsJonQ commented Jun 26, 2020

@ellatrix I can't recall, but it think that maybe by design - at least, based on the previously defined styles.

cc'ing @jasmussen

@jasmussen
Copy link
Contributor

It's not directly intentional, it's more of ensuring a decent overall balance until such a time as we can replace the gallery block with one that simply nests image blocks inside (every you'd get the mover for free). In that vein, the buttons just need to be at least 24x24 and it's fine.

You could replace the big close icon with the recently merged "closeSmall", for a better balance.

@ItsJonQ
Copy link
Author

ItsJonQ commented Jun 26, 2020

@jasmussen Thank you for your thoughts!

I just checked and the buttons are 24x24. I replaced the close icon with the closeSmall icon like you suggested:

Screen Shot 2020-06-26 at 10 15 37 AM

@jasmussen
Copy link
Contributor

Ship it!

@ItsJonQ ItsJonQ merged commit c80c11b into master Jun 26, 2020
WordPress 5.5 Must Have automation moved this from Approved to Done Jun 26, 2020
@ItsJonQ ItsJonQ deleted the fix/gallery-move-close-button-rendering branch June 26, 2020 16:32
@github-actions github-actions bot added this to the Gutenberg 8.5 milestone Jun 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images [Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Gallery (re)move buttons are looking strange
3 participants