Issue/5644 Adding custom CSS support in Latest Posts Block

[lukekowalski]

PR In Response to Issue 5644. Latest post block doesn't have customClassName set to false that's why I assumed that this block should make use of custom class if it was provided.

This fix is defining customClass attribute in register_block_type function as well as it's adding a conditional check to see if the class was applied by a user.

How Has This Been Tested?

1. Write new post
2. Insert Latest Posts block
3. Add custom class in 'Additional CSS Class' input
4. Save post
5. Check if the class was rendered on the front-end

Screenshots (jpeg or gifs if applicable):

After applying the fix:

Backend:

Frontend:

Checklist:

• My code is tested.
• My code follows the WordPress code style.

[paulwilde]

Using empty() means that isset() isn't needed. This could be simplied to just:

if ( ! empty( $attributes['className'] ) ) {.

[lukekowalski]

Nice catch and it encouraged me to take a bit deeper look at this.
ATM $attributes['className'] can return NULL, an empty string or a string that was populated by a user.

Considering that "0" is a valid string that theoretically can be used by a user as a custom class empty() won't be enough as it will validate it to false.

Also as it's a user input where you can expect unexpected I should have been sanitized it. ie if I put <script>alert(1)</script> as a custom class I get an alert prompt on the front-end. Shame on me!

To sum up, I think that the conditional should have a similar shape to what you can see below, but holding off for now because of the other comments.

$custom_class = wp_strip_all_tags( $attributes['className'] );
if ( isset( $custom_class ) && $custom_class !== '' ) {
	$class .= ' ' . $custom_class;
}

[aduth]

Ideally we don't want to be doing this in a one-off fashion, since the custom CSS class is a common supports feature. Ties into some of what's discussed in #5099 (#5099 (comment)) and #2751 regarding server registration of blocks (cc @gziolo).

[gziolo]

Yes, I spent the day exploring how we could standardize all that and make sure that we have one way of handling all block properties. I still don't have an answer here, but it is the same issue as we encountered with supports: align. In case of server-side rendered blocks, we don't have a good way of syncing config between server and client. We probably need to find a way where some properties are controlled by the server and the rest can be managed only on the client. I want to start a discussion on that topic in #5652.

[aduth]

Closing as this approach is not viable (per-block implementation). Added a comment at #2751 (comment) to ensure that the need for this is not lost.