Add featured images to Latest Posts block #17151

ryelle · 2019-08-22T21:14:18Z

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

Sidebar

Front end

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

paaljoachim · 2019-08-25T12:28:40Z

Thanks for working on this Kelly!

Similar to: #16448

paaljoachim · 2019-10-16T11:41:44Z

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

stevenbuccini · 2019-10-19T11:19:41Z

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 · 2019-10-19T17:14:16Z

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.

youknowriad · 2019-11-12T12:27:48Z

packages/components/src/image-size-control/index.js

+import SelectControl from '../select-control';
+import TextControl from '../text-control';
+
+class ImageSizeControl extends Component {


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.

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 · 2019-12-27T23:00:56Z

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

ryelle · 2019-12-29T18:14:38Z

@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 · 2020-01-07T13:13:23Z

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.

sailormary13 · 2020-01-21T21:43:16Z

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

mapk · 2020-01-30T01:02:03Z

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

ryelle · 2020-01-30T15:23:34Z

@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

epiqueras · 2020-01-30T17:52:18Z

packages/block-library/src/latest-posts/edit.js

+// @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 ];
+	}
+}
+


We should do that before landing this PR.

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

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

jorgefilipecosta · 2020-02-09T11:00:15Z

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

paaljoachim · 2020-02-09T11:44:18Z

Yahhh! It has been merged..:)

ZebulanStanphill · 2020-02-09T13:09:21Z

packages/block-library/src/latest-posts/style.scss

+		height: auto;
+		width: auto;
+	}
+	&.alignleft {


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 · 2020-02-10T16:28:19Z

So happy to see this in! 🎉 Thanks everyone!

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

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

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

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

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 · 2020-02-26T20:43:43Z

@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 · 2020-02-26T20:51:15Z

Reported in #20484.

ryelle mentioned this pull request Aug 22, 2019

Iterations on "Latest Posts" Block #1594

Closed

9 tasks

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

melchoyce mentioned this pull request Nov 11, 2019

Latest post block iteration: featured image add. #16448

Closed

5 tasks

youknowriad reviewed Nov 12, 2019

View reviewed changes

mapk mentioned this pull request Dec 27, 2019

Show Featured Images on the “Latest Posts” block #17472

Closed

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

ryelle force-pushed the update/block-latest-posts-images branch from a2acabe to c785f73 Compare January 29, 2020 22:05

ryelle self-assigned this Jan 29, 2020

ryelle marked this pull request as ready for review January 29, 2020 22:10

ryelle requested review from ajitbohra, jorgefilipecosta, Soean and talldan as code owners January 29, 2020 22:10

ryelle changed the title ~~WIP: Add featured images to Latest Posts block~~ Add featured images to Latest Posts block Jan 29, 2020

mapk added this to In progress in WordPress 5.4 Must Have Jan 30, 2020

ryelle moved this from In progress to Needs Review in WordPress 5.4 Must Have Jan 30, 2020

epiqueras requested changes Jan 30, 2020

View reviewed changes

draganescu mentioned this pull request Feb 5, 2020

[ Latest Posts ] Iterations to version 2 #20046

Closed

ryelle added 6 commits February 7, 2020 10:57

Fix imageAlign attribute schema

e685a28

Add featured image to block output

6a23e8e

Fix extra space for phpcs

26ef547

Address PR feedback

9a956f0

Add featured image URL into post objects

b084df0

Add imageDimensions to settings

f308357

ryelle force-pushed the update/block-latest-posts-images branch from 100b40e to ca3805b Compare February 7, 2020 16:26

jorgefilipecosta mentioned this pull request Feb 7, 2020

Backport PR's to WordPress core (5.4 Release) #20035

Closed

7 tasks

Use imageDimensions from settings

7a69fe9

jorgefilipecosta force-pushed the update/block-latest-posts-images branch from ca3805b to 7a69fe9 Compare February 9, 2020 11:16

jorgefilipecosta merged commit 3249ae1 into WordPress:master Feb 9, 2020

WordPress 5.4 Must Have automation moved this from Approved to Done Feb 9, 2020

github-actions bot added this to the Gutenberg 7.5 milestone Feb 9, 2020

ZebulanStanphill reviewed Feb 9, 2020

View reviewed changes

jorgefilipecosta removed the Backport to WP Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Feb 12, 2020

mcsf mentioned this pull request Feb 26, 2020

Gutenberg is unintentionally incompatible with WordPress 5.2.x. #20484

Closed

This was referenced Mar 16, 2020

Getting invalid argument error with 7.7 and 7.7.1 #20907

Closed

Compat: Conditionally filter editor settings for image dimensions #20939

Merged

ramonjd mentioned this pull request Mar 19, 2020

Gutenberg 7.7 on wpcom; inserting "Latest Posts" block fatals Automattic/wp-calypso#40127

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add featured images to Latest Posts block #17151

Add featured images to Latest Posts block #17151

ryelle commented Aug 22, 2019 •

edited

paaljoachim commented Aug 25, 2019

paaljoachim commented Oct 16, 2019

stevenbuccini commented Oct 19, 2019

paaljoachim commented Oct 19, 2019

youknowriad Nov 12, 2019

ryelle Nov 12, 2019

mapk commented Dec 27, 2019

ryelle commented Dec 29, 2019

karmatosed commented Jan 7, 2020

sailormary13 commented Jan 21, 2020

mapk commented Jan 30, 2020

ryelle commented Jan 30, 2020

epiqueras Jan 30, 2020

ryelle Jan 30, 2020

ryelle Feb 5, 2020

jorgefilipecosta commented Feb 9, 2020

paaljoachim commented Feb 9, 2020

ZebulanStanphill Feb 9, 2020

mapk commented Feb 10, 2020

mcsf commented Feb 26, 2020

mcsf commented Feb 26, 2020

Add featured images to Latest Posts block #17151

Add featured images to Latest Posts block #17151

Conversation

ryelle commented Aug 22, 2019 • edited

Description

Screenshots

Still To Do

To Test

paaljoachim commented Aug 25, 2019

paaljoachim commented Oct 16, 2019

stevenbuccini commented Oct 19, 2019

paaljoachim commented Oct 19, 2019

youknowriad Nov 12, 2019

Choose a reason for hiding this comment

ryelle Nov 12, 2019

Choose a reason for hiding this comment

mapk commented Dec 27, 2019

ryelle commented Dec 29, 2019

karmatosed commented Jan 7, 2020

sailormary13 commented Jan 21, 2020

mapk commented Jan 30, 2020

ryelle commented Jan 30, 2020

epiqueras Jan 30, 2020

Choose a reason for hiding this comment

ryelle Jan 30, 2020

Choose a reason for hiding this comment

ryelle Feb 5, 2020

Choose a reason for hiding this comment

jorgefilipecosta commented Feb 9, 2020

paaljoachim commented Feb 9, 2020

ZebulanStanphill Feb 9, 2020

Choose a reason for hiding this comment

mapk commented Feb 10, 2020

mcsf commented Feb 26, 2020

mcsf commented Feb 26, 2020

ryelle commented Aug 22, 2019 •

edited