Skip to content

Image block: use hooks#22499

Merged
ellatrix merged 7 commits intomasterfrom
try/image-block-hooks
May 23, 2020
Merged

Image block: use hooks#22499
ellatrix merged 7 commits intomasterfrom
try/image-block-hooks

Conversation

@ellatrix
Copy link
Copy Markdown
Member

@ellatrix ellatrix commented May 20, 2020

Description

This PR rewrites the image block with hooks. I'm doing this so we can also rewrite the ImageSize component to a hook which would allow us to simplify the markup.

Best viewed without whitespace changes: https://github.com/WordPress/gutenberg/pull/22499/files?diff=split&w=1

How has this been tested?

Screenshots

Types of changes

Checklist:

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

@ellatrix ellatrix added the [Type] Code Quality Issues or PRs that relate to code quality label May 20, 2020
@github-actions
Copy link
Copy Markdown

github-actions bot commented May 20, 2020

Size Change: -423 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/block-editor/index.js 105 kB +118 B (0%)
build/block-editor/style-rtl.css 10.9 kB -26 B (0%)
build/block-editor/style.css 10.9 kB -26 B (0%)
build/block-library/index.js 118 kB -496 B (0%)
build/blocks/index.js 48.1 kB +1 B
build/components/index.js 190 kB -8 B (0%)
build/data/index.js 8.42 kB +4 B (0%)
build/edit-navigation/index.js 6.63 kB +1 B
build/edit-post/index.js 302 kB +13 B (0%)
build/edit-site/index.js 12.9 kB -1 B
build/edit-widgets/index.js 7.72 kB -4 B (0%)
build/editor/index.js 44.6 kB -2 B (0%)
build/keyboard-shortcuts/index.js 2.51 kB +1 B
build/list-reusable-blocks/index.js 3.13 kB -1 B
build/plugins/index.js 2.56 kB -1 B
build/rich-text/index.js 14.8 kB +5 B (0%)
build/viewport/index.js 1.84 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.93 kB 0 B
build/block-directory/style-rtl.css 790 B 0 B
build/block-directory/style.css 791 B 0 B
build/block-library/editor-rtl.css 7.17 kB 0 B
build/block-library/editor.css 7.17 kB 0 B
build/block-library/style-rtl.css 7.48 kB 0 B
build/block-library/style.css 7.48 kB 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 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/components/style-rtl.css 17.1 kB 0 B
build/components/style.css 17.1 kB 0 B
build/compose/index.js 9.24 kB 0 B
build/core-data/index.js 11.4 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 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.11 kB 0 B
build/edit-navigation/style-rtl.css 857 B 0 B
build/edit-navigation/style.css 856 B 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/style-rtl.css 5.31 kB 0 B
build/edit-site/style.css 5.31 kB 0 B
build/edit-widgets/style-rtl.css 4.59 kB 0 B
build/edit-widgets/style.css 4.59 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/style-rtl.css 5.06 kB 0 B
build/editor/style.css 5.06 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.64 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 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 711 B 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 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/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@ZebulanStanphill ZebulanStanphill added the [Block] Image Affects the Image Block label May 20, 2020
@ZebulanStanphill
Copy link
Copy Markdown
Member

Thanks for taking on this challenge. This is one of the most complicated blocks there is.

I haven't tested the branch yet, but it looks like some of the end-to-end test failures may be legit.

FAIL packages/e2e-tests/specs/editor/blocks/image.test.js (12.655s)
  Image
    ✕ can be inserted (4242ms)
    ✕ should replace, reset size, and keep selection (3561ms)
    ✓ should place caret at end of caption after merging empty paragraph (4127ms)

@ellatrix ellatrix force-pushed the try/image-block-hooks branch from af85cce to 2d03090 Compare May 21, 2020 11:40
noticeOperations,
onReplace,
} ) {
const selected = useSelect( ( select ) => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

You could use destructuring right here rather than destructuring selected immediately after.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This has been discussed numerous times and I'm not sure if we reached a conclusion on what to do in case of clashing variable names. Cc @youknowriad

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

My way of doing it is to rename the variables inside the useSelector callback because that's the "temporary" part and I see the returned values as a bit more important to get semantically right.

I also like inline useSelect callbacks because the separate selector function is not something that work consistently and you lose some context.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I prefix the temporary variables with an underscore, e.g. _thing; that's the approach I'm using in #21427.

Copy link
Copy Markdown
Member Author

@ellatrix ellatrix May 21, 2020

Choose a reason for hiding this comment

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

Problem solved: 4251d86.

@ellatrix
Copy link
Copy Markdown
Member Author

Because as far as I remember, there wasn't full browser support. If that's not the case anymore, we can maybe make a lint rule?

@ellatrix
Copy link
Copy Markdown
Member Author

I'm going to leave the includes until your PR is merged and the rest of this package is adjusted.

@ellatrix ellatrix merged commit 1063573 into master May 23, 2020
@ellatrix ellatrix deleted the try/image-block-hooks branch May 23, 2020 15:39
@github-actions github-actions bot added this to the Gutenberg 8.2 milestone May 23, 2020
@ZebulanStanphill
Copy link
Copy Markdown
Member

ZebulanStanphill commented May 23, 2020

@ellatrix We're polyfilling JS functions (including [].includes) using @babel/polyfill.

But yeah, I can just change it in one of my PRs. And also, a lint rule would definitely be useful.

@jeyip jeyip mentioned this pull request Jun 21, 2020
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Image Affects the Image Block [Type] Code Quality Issues or PRs that relate to code quality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants