-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Update Image Block's image classes with dimensions #15464
Conversation
I just tried testing the three sizes; |
efc0db8
to
293b1e3
Compare
Example: + <figure class="wp-block-image size-undefined"><img alt=""/></figure> |
293b1e3
to
17f45ee
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It works when I test it locally!! 🎉
I think that we can simplify the code a little in a few places, though—see comments.
packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap
Outdated
Show resolved
Hide resolved
…ates on front end
0cb5c7b
to
ce195ab
Compare
I have refactored the whole thing according to @noisysocks 's review. Should be indeed simpler to follow now. One thing this does not cover is what happens to images created before this. I have tested and until you change the size they do not get an updated classname. To have them get a class name I would need to:
I am not sure it is worth/ right / in the scope to implement this behaviour. Let me know @gziolo @noisysocks Thanks! |
This probably helps to avoid seeing the warning about invalid block's markup. Otherwise, it would generate a different HTML than this stored in the post content. I don't know how important it is to have those class names added but you can experiment with Have you tried to sync |
Do they receive the classname on the next post save? I'd say that's an acceptable trade-off. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -339,17 +353,8 @@ class ImageEdit extends Component { | |||
} | |||
|
|||
getImageSizeOptions() { | |||
const { imageSizes, image } = this.props; | |||
return compact( map( imageSizes, ( { name, slug } ) => { | |||
const sizeUrl = get( image, [ 'media_details', 'sizes', slug, 'source_url' ] ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you know why this was removed as well. I'm assuming sometimes, images can be uploaded before the image size being defined which causes the size to not be available for that particular image.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh I see that you moved the check to the "updateImage" function
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if the user could get confused if using the "select" doesn't change anything. Not critical for the moment though.
Description
Adds a class to the figure generated by the image block which corresponds to the slug of the image size selected in the inspector.
How has this been tested?
size-{yourchosensize}
.Types of changes