Skip to content

Try fix image block#21167

Merged
ellatrix merged 3 commits into
masterfrom
try/fix-image-block
Mar 27, 2020
Merged

Try fix image block#21167
ellatrix merged 3 commits into
masterfrom
try/fix-image-block

Conversation

@ellatrix
Copy link
Copy Markdown
Member

@ellatrix ellatrix commented Mar 26, 2020

Description

Alternative to #21160. This is a more complete fix, I think.

Fixes clicking on the block when it's floated.
Fixes centre alignment.
Fixes toolbar position when floated.
Fixes block outline when floated.

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.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 26, 2020

Size Change: -1 B

Total Size: 857 kB

Filename Size Change
build/block-library/index.js 110 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 998 B 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/index.js 101 kB 0 B
build/block-editor/style-rtl.css 10.9 kB 0 B
build/block-editor/style.css 10.9 kB 0 B
build/block-library/editor-rtl.css 7.22 kB 0 B
build/block-library/editor.css 7.23 kB 0 B
build/block-library/style-rtl.css 7.43 kB 0 B
build/block-library/style.css 7.44 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.5 kB 0 B
build/components/index.js 191 kB 0 B
build/components/style-rtl.css 15.8 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 6.21 kB 0 B
build/core-data/index.js 10.6 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/data/index.js 8.25 kB 0 B
build/date/index.js 5.37 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.06 kB 0 B
build/edit-post/index.js 91.2 kB 0 B
build/edit-post/style-rtl.css 8.43 kB 0 B
build/edit-post/style.css 8.43 kB 0 B
build/edit-site/index.js 6.73 kB 0 B
build/edit-site/style-rtl.css 2.91 kB 0 B
build/edit-site/style.css 2.9 kB 0 B
build/edit-widgets/index.js 4.43 kB 0 B
build/edit-widgets/style-rtl.css 2.57 kB 0 B
build/edit-widgets/style.css 2.57 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 42.8 kB 0 B
build/editor/style-rtl.css 3.38 kB 0 B
build/editor/style.css 3.38 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 6.95 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 1.93 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.49 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.69 kB 0 B
build/list-reusable-blocks/index.js 2.99 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 4.84 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.01 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 781 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.5 kB 0 B
build/server-side-render/index.js 2.55 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.01 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

<div
className={
needsAlignmentWrapper
? 'wp-block block-editor-block-list__block'
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.

Ideally these classes are not needed, and ideally, we provide an alignment wrapper component that the block can wrap around the block.

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.

Why these are needed?

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.

I guess it's another argument to absorb the alignment in Block.* for now.

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.

I'm fine with this for now (with a comment) while we continue the work to improve alignments

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.

It's needed so the div has the proper width and margins. Yes, we'd need to comment and continue with figuring out how to best proceed with the alignment issue.

@ellatrix ellatrix requested review from nerrad and ntwb as code owners March 26, 2020 11:07
@ellatrix ellatrix force-pushed the try/fix-image-block branch from 025626e to c5b033c Compare March 26, 2020 11:08
@ellatrix ellatrix requested a review from jasmussen March 26, 2020 11:11
@ellatrix
Copy link
Copy Markdown
Member Author

This needs a thorough test since we'll need to do a patch release for Gutenberg 7.8 with this change.

@ellatrix ellatrix added the [Priority] High Used to indicate top priority items that need quick attention label Mar 26, 2020
@ellatrix ellatrix modified the milestones: Future, Gutenberg 7.8 Mar 26, 2020
Copy link
Copy Markdown
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

I tested this and it seems to work well in 2020

Some alignments are broken in 2019 but I believe that it's broken in master too.

@jasmussen
Copy link
Copy Markdown
Contributor

This tests well for me also. Both with no editor style and TwentyTwenty. TwentyNineteen, as Riad mentions, has some separate issues.

I also confirmed that very very long multi-line captions still work as they should. Nice.

The following is unrelated, but something we really should look at: there's no right margin on a left floated image, or left margin on a right floated image:

Screenshot 2020-03-26 at 14 28 08

@ellatrix
Copy link
Copy Markdown
Member Author

The following is unrelated, but something we really should look at: there's no right margin on a left floated image, or left margin on a right floated image:

That seems to be the case only if the image is resized 🤔

@jasmussen
Copy link
Copy Markdown
Contributor

Interesting.

@ellatrix ellatrix merged commit d796c97 into master Mar 27, 2020
@ellatrix ellatrix deleted the try/fix-image-block branch March 27, 2020 11:55
ellatrix added a commit that referenced this pull request Mar 27, 2020
* Try fix image block

* Fix flickering

* Add comment
@jasmussen
Copy link
Copy Markdown
Contributor

Possibly a result of this PR combined with the recent refactor of the main canvas that removed the permalink, but now fullwide images aren't fullwide:

Screenshot 2020-03-27 at 15 11 36

I'll take a look.

@ellatrix
Copy link
Copy Markdown
Member Author

@jasmussen Thanks for looking into it

@ellatrix
Copy link
Copy Markdown
Member Author

I guess this needs to be fixed before we can do a patch release.

@jasmussen
Copy link
Copy Markdown
Contributor

I fixed it in #21201 but I'm not sure how to proceed with the feedback.

@strarsis
Copy link
Copy Markdown
Contributor

Does Gutenberg use automated end to end tests for these kinds of bugs?
Would a test catch this issue (unable to select an image block in certain cases) the next time?

@ghost
Copy link
Copy Markdown

ghost commented Mar 28, 2020

Possibly a result of this PR combined with the recent refactor of the main canvas that removed the permalink, but now fullwide images aren't fullwide:

I'll take a look.

I'm having the same issue since 7.8.1. Also alignment are all over the shop, I reverted back to 7.8 for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Priority] High Used to indicate top priority items that need quick attention

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants