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

#39457 image block: keep image size on changing image #44522

Conversation

gaambo
Copy link
Contributor

@gaambo gaambo commented Sep 28, 2022

What?

This PR fixes #39457 to keep the selected size in an image block when replacing/changing the image.

Why?

Useful for patterns where a certain image size is required for it to look good. A pattern can declare the sizeSlug attribute and it will try to insert the new image in the size again.

How?

Previously on selecting a new image there was a check if the new image is available in the default image size, if yes it used that and if not it falled back to "full". Now it checks for a previously selected sizeSlug attribute and checks if the image is available in that size, if not it does the same checks as before (default size, full). So the order is:

  1. previously selected image size (from block attribute)
  2. default image size
  3. "full" image size

Testing Instructions

  1. Insert an image block in the editor

  2. pick an image

  3. image should be inserted in the default image size ("large")

  4. select any other size than the default size

  5. click "replace" and choose another image

  6. the image should be inserted in the previously selected size and the sizeSlug dropdown in the sidebar should also contain this size

  7. Create a pattern which includes an image block with a predefined size

  8. insert the pattern

  9. set/replace the image with any other image

  10. the image should be inserted in the previously selected size and the sizeSlug dropdown in the sidebar should also contain this size

Screenshots or screencast

@gaambo gaambo requested a review from ajitbohra as a code owner September 28, 2022 07:32
@skorasaurus skorasaurus added the [Block] Image Affects the Image Block label Feb 1, 2023
tomdevisser and others added 28 commits March 28, 2023 17:07
* Changes image size description, as it causes confusion

Right now this setting causes confusion as it doesn't change the visual size, but the image dimensions, see WordPress#48395.

* Added the copy to the Image block as well

* Fix typo and make copy shorter

* Update help labels for consistency

---------

Co-authored-by: Rich Tabor <hi@richtabor.com>
* Add spacing to time to read block

* Add box sizing to the time to read block to ensure padding works correctly
* Remove the Image Dimensions label

* Update CHANGELOG.md
* Duotone: Pass filters to the Post Editor

* remove whitespace change

* remove whitespace change

* Move SVGs into styles prop for EditorStyles

* Handle duotone presets settings in add_editor_settings

* Fix php lint

* Add a check for $settings['styles'] to be safe

* Use SVG component instead of svg

* Use === instead of ==

* output the rules for all global styles not just the used ones

* Block Previews: Fix Duotone in Block Previews (WordPress#49290)

* Rename duotone css and svg variables

* Move styles to the document.head with a portal

This causes a flash of unstyled content, unfortunately.

* Revert "Move styles to the document.head with a portal"

This reverts commit 7d88a441db0142c97ca25cda0a17b424e263dd0d.

* Move EditorStyles to body for EditorCanvas iframe

* Move EditorStyles to body for the global styles StylesPreview iframe

* Move EditorStyles to body for the StyleBook iframe

* Refactor editorStyles for EditorCanvas

* Directly test for css in the transformStyles call since that is what the function cares about

* ?.length is unnecessary

* Explain settings better

* Partially revert "Refactor editorStyles for EditorCanvas"

* Update useGlobalStylesOutput to use SVGs strings in styles instead of SVG elements in filterSvgs

* Add missing __unstableType for svgs

* Add comment about required JS changes for __unstableType in PHP

---------

Co-authored-by: Alex Lende <alex@lende.xyz>
…WordPress#47243)

* useSelect tests: unify counter store definitions

* useSelect: incrementally subscribe to stores when first selected from

* useSelect: keep lastMapResult and lastMapSelect always in sync

* useSelect: improve unit test that tests store updates between render and subscription

* useSelect: add test for store updates after selector change
Argnum dollar sign seemed to be missing. The `2` in `%2s` is width argument.
* docs: Document visual regression testing emulator/simulator requirements

Specific emulators/simulators are required to avoid false failures
resulting from subtle OS differences.

* docs: Fix typo

* docs: Document physical device usage for e2e tests
* Update alt text help text, add periods.

* Alt text (alternative text) -> Alternative text

* Add missing periods
…ate block (WordPress#49411)

* Update core-blocks.md

* Update block.json
 - @wordpress/a11y@3.30.0
 - @wordpress/annotations@2.30.0
 - @wordpress/api-fetch@6.27.0
 - @wordpress/autop@3.30.0
 - @wordpress/babel-plugin-import-jsx-pragma@4.13.0
 - @wordpress/babel-plugin-makepot@5.14.0
 - @wordpress/babel-preset-default@7.14.0
 - @wordpress/base-styles@4.21.0
 - @wordpress/blob@3.30.0
 - @wordpress/block-directory@4.7.0
 - @wordpress/block-editor@11.7.0
 - @wordpress/block-library@8.7.0
 - @wordpress/block-serialization-default-parser@4.30.0
 - @wordpress/block-serialization-spec-parser@4.30.0
 - @wordpress/blocks@12.7.0
 - @wordpress/browserslist-config@5.13.0
 - @wordpress/components@23.7.0
 - @wordpress/compose@6.7.0
 - @wordpress/core-data@6.7.0
 - @wordpress/create-block-tutorial-template@2.18.0
 - @wordpress/create-block@4.14.0
 - @wordpress/customize-widgets@4.7.0
 - @wordpress/data-controls@2.30.0
 - @wordpress/data@9.0.0
 - @wordpress/date@4.30.0
 - @wordpress/dependency-extraction-webpack-plugin@4.13.0
 - @wordpress/deprecated@3.30.0
 - @wordpress/docgen@1.39.0
 - @wordpress/dom-ready@3.30.0
 - @wordpress/dom@3.30.0
 - @wordpress/e2e-test-utils@10.1.0
 - @wordpress/e2e-tests@7.1.0
 - @wordpress/edit-post@7.7.0
 - @wordpress/edit-site@5.7.0
 - @wordpress/edit-widgets@5.7.0
 - @wordpress/editor@13.7.0
 - @wordpress/element@5.7.0
 - @wordpress/env@5.15.0
 - @wordpress/escape-html@2.30.0
 - @wordpress/eslint-plugin@14.3.0
 - @wordpress/format-library@4.7.0
 - @wordpress/hooks@3.30.0
 - @wordpress/html-entities@3.30.0
 - @wordpress/i18n@4.30.0
 - @wordpress/icons@9.21.0
 - @wordpress/interface@5.7.0
 - @wordpress/is-shallow-equal@4.30.0
 - @wordpress/jest-console@7.1.0
 - @wordpress/jest-preset-default@11.1.0
 - @wordpress/jest-puppeteer-axe@6.1.0
 - @wordpress/keyboard-shortcuts@4.7.0
 - @wordpress/keycodes@3.30.0
 - @wordpress/lazy-import@1.17.0
 - @wordpress/list-reusable-blocks@4.7.0
 - @wordpress/media-utils@4.21.0
 - @wordpress/notices@3.30.0
 - @wordpress/npm-package-json-lint-config@4.15.0
 - @wordpress/plugins@5.7.0
 - @wordpress/postcss-plugins-preset@4.14.0
 - @wordpress/postcss-themes@5.13.0
 - @wordpress/preferences-persistence@1.22.0
 - @wordpress/preferences@3.7.0
 - @wordpress/prettier-config@2.13.0
 - @wordpress/primitives@3.28.0
 - @wordpress/priority-queue@2.30.0
 - @wordpress/private-apis@0.12.0
 - @wordpress/project-management-automation@1.29.0
 - @wordpress/react-i18n@3.28.0
 - @wordpress/readable-js-assets-webpack-plugin@2.13.0
 - @wordpress/redux-routine@4.30.0
 - @wordpress/reusable-blocks@4.7.0
 - @wordpress/rich-text@6.7.0
 - @wordpress/scripts@26.1.0
 - @wordpress/server-side-render@4.7.0
 - @wordpress/shortcode@3.30.0
 - @wordpress/style-engine@1.13.0
 - @wordpress/stylelint-config@21.13.0
 - @wordpress/token-list@2.30.0
 - @wordpress/url@3.31.0
 - @wordpress/viewport@5.7.0
 - @wordpress/warning@2.30.0
 - @wordpress/widgets@3.7.0
 - @wordpress/wordcount@3.30.0
Bumps [actions/stale](https://github.com/actions/stale) from 7.0.0 to 8.0.0.
- [Release notes](https://github.com/actions/stale/releases)
- [Changelog](https://github.com/actions/stale/blob/main/CHANGELOG.md)
- [Commits](actions/stale@6f05e42...1160a22)

---
updated-dependencies:
- dependency-name: actions/stale
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
…ocks (WordPress#49390)

* List View: Allow dragging underneath collapsed non-empty container blocks

* Update comment to reflect new behaviour
* Fix padding visualizer accuracy

- Use the computed CSS value instead of the non-computed value
- Add a small transition to smooth out the delay in resizing

* First attempt to use computed values

* Simplify padding visualizer to instead listen to padding attribute changes
@gaambo
Copy link
Contributor Author

gaambo commented Apr 21, 2023

Sorry, I messed up here. Just wanted to update/rebase this PR on current trunk and somehow all trunk commits in between got added to this PR.

@dmsnell
Copy link
Member

dmsnell commented Apr 21, 2023

Don't feel bad, @gaambo - a million of us have done it on accident a million times 😄

Need any help? git reflog may be of help, though you may need to read about how to use it if you aren't already familiar with it.

Usually if you know what git hash you formerly had pushed up here you can git reset --hard COMMIT_SHA and then force-push again to clear it up. That would let you restart your rebase/merges.

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image Block: Keep selected size on changing image