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

Add featured images to Latest Posts block #17151

Merged

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Aug 22, 2019

Description

See #1594. This PR builds on #17148 to add featured image to the Latest Posts block. It uses that new ImageSizeControl control and adds an alignment control for image alignment.

Screenshots

Editor

Screen Shot 2020-01-29 at 5 07 34 PM

Sidebar

Screen Shot 2020-01-29 at 5 07 39 PM

Front end

Screen Shot 2020-01-29 at 5 08 10 PM

Still To Do

  • Need to figure out a solution for the image sizes issue– the ImageSizeControl component expects imageHeight & imageWidth, which function as a basis for the resizing. For a single image, this is literally the width & height of that particular image. For this block, we can use the site defaults for each image size? — This seems to work just fine ✅
  • Selecting a different "image size" right now does nothing to change the image, so we also need to update that. — Done 27eb6675e0e54ec64232ea60a010c8dd2595d476 ✅
  • And finally, we need to add the images into the frontend render. — Done c785f737fda5d099f6f741fcbfe522173fc2705b ✅

To Test

  • Make sure you have some posts with various sized featured images
  • Add the Latest Posts block
  • Toggle the "Display featured image" setting
  • Try out the various sizes & alignment, make sure it works as you'd expect

@ryelle ryelle mentioned this pull request Aug 22, 2019
9 tasks
@paaljoachim
Copy link
Contributor

Thanks for working on this Kelly!

Similar to: #16448

@gziolo gziolo added [Feature] Media Anything that impacts the experience of managing media [Block] Latest Posts Affects the Latest Posts Block [Type] Enhancement A suggestion for improvement. labels Aug 27, 2019
@paaljoachim
Copy link
Contributor

Hi @ryelle
Could we get a status update?
Thanks!

@stevenbuccini
Copy link

Hello! I could really use this feature for an upcoming project and would love to help take it over the line. I'm not familiar with the WP codebase but it looks like there is a panel in the Wordpress admin panel that allows you to modify the image dimensions for the base dimensions (thumbnail, small, medium, etc) so we should be able to pull those values from a config somewhere.

@paaljoachim
Copy link
Contributor

Hey Steven @stevenbuccini

If you need another option then you can take a look at https://wordpress.org/plugins/post-type-archive-mapping/ I use it on a lot of sites. The Gutenberg core Latest Posts Block is still missing a lot of useful features before I can consider using it. If your able to figure out a way to add the featured image to the block that would be very helpful. Either by taking over this PR or adding a new PR.

import SelectControl from '../select-control';
import TextControl from '../text-control';

class ImageSizeControl extends Component {
Copy link
Contributor

Choose a reason for hiding this comment

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

We didn't figure out yet a good place for all these block specific components, I don't think "components" is the best place for it as it's more the design system, maybe in block-editor module. We could consider making it priivate as a start in the block-library package.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, there was discussion here #17148 about where this component should live, but it didn't really come to a conclusion. block-editor works for me, so I can move that PR ahead which can then move this one out of draft status :)

@mapk
Copy link
Contributor

mapk commented Dec 27, 2019

Hey @ryelle and @youknowriad, any further progress on this PR?

@ryelle
Copy link
Contributor Author

ryelle commented Dec 29, 2019

@mapk This was in draft while #17148 moved forward, but that stalled out a little. I think there's a path forward now, and if/when that merges I can pick this back up 🙂

@karmatosed
Copy link
Member

Just noting that for WordCamp Europe we are using this block and would love to have the featured images working. Be great to test it out there too.

@ryelle ryelle force-pushed the update/block-latest-posts-images branch from d929be2 to a2acabe Compare January 9, 2020 21:36
@sailormary13
Copy link

Looking forward to this! Thanks for working on it everyone. Hope to see it live soon.

@ryelle ryelle force-pushed the update/block-latest-posts-images branch from a2acabe to c785f73 Compare January 29, 2020 22:05
@ryelle ryelle self-assigned this Jan 29, 2020
@ryelle ryelle marked this pull request as ready for review January 29, 2020 22:10
@ryelle ryelle changed the title WIP: Add featured images to Latest Posts block Add featured images to Latest Posts block Jan 29, 2020
@mapk
Copy link
Contributor

mapk commented Jan 30, 2020

Yep, I just added this to the WP 5.4 project board. Do you think this is possible, @ryelle?

@ryelle
Copy link
Contributor Author

ryelle commented Jan 30, 2020

@mapk Great! I worked on this yesterday & got it to a reviewable state, so I moved it over to the "Needs Review" column on the board.

packages/block-library/src/latest-posts/index.php Outdated Show resolved Hide resolved
Comment on lines 42 to 54
// @todo This should be retrieved dynamically, or from site settings, since it can be changed by the site owner.
function getImageDimensionsFromSlug( slug = 'thumbnail' ) {
switch ( slug ) {
case 'large':
return [ 1024, 1024 ];
case 'medium':
return [ 300, 300 ];
case 'thumbnail':
default:
return [ 150, 150 ];
}
}

Copy link
Contributor

Choose a reason for hiding this comment

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

We should do that before landing this PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's been long enough since I worked on this that I didn't realize this was left in 🤦‍♀

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've added the real functionality here, but it required adding a new setting imageDimensions to get the mapping of size name to height & width. I also had to pull "full" out of the available options, since we can't actually get a default height & width of all full size images. Maybe a future iteration of this (or of ImageSizeControl) could handle this case.

packages/block-library/src/latest-posts/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/latest-posts/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/latest-posts/edit.js Outdated Show resolved Hide resolved
@jorgefilipecosta
Copy link
Member

The required core changes are being done in https://core.trac.wordpress.org/attachment/ticket/49389/.

@jorgefilipecosta jorgefilipecosta merged commit 3249ae1 into WordPress:master Feb 9, 2020
@github-actions github-actions bot added this to the Gutenberg 7.5 milestone Feb 9, 2020
@paaljoachim
Copy link
Contributor

Yahhh! It has been merged..:)

height: auto;
width: auto;
}
&.alignleft {
Copy link
Member

Choose a reason for hiding this comment

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

The alignleft and alignright classes are intended to be used with CSS float styles (and they probably shouldn't be called alignleft and alignright, but that's a whole other topic). This class style override is inconsistent with the usage of the class name elsewhere.

@mapk
Copy link
Contributor

mapk commented Feb 10, 2020

So happy to see this in! 🎉 Thanks everyone!

nylen pushed a commit to nylen/wordpress-develop-svn that referenced this pull request Feb 10, 2020
This commit includes in the core settings for the gradients theme API stabilized in WordPress/gutenberg#20107, and for the image sizes required for the latest posts feature image WordPress/gutenberg#17151.

Props: youknowriad, ryelle.
Fixes #49389.

git-svn-id: https://develop.svn.wordpress.org/trunk@47240 602fd350-edb4-49c9-b593-d223f7449a82
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Feb 10, 2020
This commit includes in the core settings for the gradients theme API stabilized in WordPress/gutenberg#20107, and for the image sizes required for the latest posts feature image WordPress/gutenberg#17151.

Props: youknowriad, ryelle.
Fixes #49389.

git-svn-id: https://develop.svn.wordpress.org/trunk@47240 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Feb 10, 2020
This commit includes in the core settings for the gradients theme API stabilized in WordPress/gutenberg#20107, and for the image sizes required for the latest posts feature image WordPress/gutenberg#17151.

Props: youknowriad, ryelle.
Fixes #49389.
Built from https://develop.svn.wordpress.org/trunk@47240


git-svn-id: http://core.svn.wordpress.org/trunk@47040 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott pushed a commit to gMagicScott/core.wordpress-mirror that referenced this pull request Feb 10, 2020
This commit includes in the core settings for the gradients theme API stabilized in WordPress/gutenberg#20107, and for the image sizes required for the latest posts feature image WordPress/gutenberg#17151.

Props: youknowriad, ryelle.
Fixes #49389.
Built from https://develop.svn.wordpress.org/trunk@47240


git-svn-id: https://core.svn.wordpress.org/trunk@47040 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@jorgefilipecosta jorgefilipecosta removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Feb 12, 2020
sikc8000 pushed a commit to sikc8000/u0_a165-localhost that referenced this pull request Feb 20, 2020
This commit includes in the core settings for the gradients theme API stabilized in WordPress/gutenberg#20107, and for the image sizes required for the latest posts feature image WordPress/gutenberg#17151.

Props: youknowriad, ryelle.
Fixes #49389.
Built from https://develop.svn.wordpress.org/trunk@47240
miya0001 pushed a commit to cjk4wp/wordpress that referenced this pull request Feb 20, 2020
This commit includes in the core settings for the gradients theme API stabilized in WordPress/gutenberg#20107, and for the image sizes required for the latest posts feature image WordPress/gutenberg#17151.

Props: youknowriad, ryelle.
Fixes #49389.

git-svn-id: http://develop.svn.wordpress.org/trunk@47240 602fd350-edb4-49c9-b593-d223f7449a82
@mcsf
Copy link
Contributor

mcsf commented Feb 26, 2020

@ryelle, @jorgefilipecosta: the introduction of gutenberg_extend_settings_image_dimensions breaks Gutenberg in WordPress 5.2.x, due to the call to wp_get_registered_image_subsizes, a function introduced in 5.3.0.

The Gutenberg plugin requires WordPress 5.2.0+. We should either bump that to 5.3.0, or guard against missing wp_get_registered_image_subsizes in lib/client-assets.php.

@mcsf
Copy link
Contributor

mcsf commented Feb 26, 2020

Reported in #20484.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Latest Posts Affects the Latest Posts Block [Feature] Media Anything that impacts the experience of managing media [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.