Skip to content

Commit

Permalink
Merge pull request #2322 from Codeinwp/fix/issue-218
Browse files Browse the repository at this point in the history 
feat: add tiled style to Posts Block
  • Loading branch information
@HardeepAsrani
HardeepAsrani authored Aug 6, 2024
2 parents 317069a + 837b6e9 commit 216b7a4
Show file tree
Hide file tree
Showing 13 changed files with 360 additions and 133 deletions.
40 changes: 40 additions & 0 deletions inc/css/blocks/class-posts-css.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ public function render_css( $block ) {
'property' => '--background-color',
'value' => 'backgroundColor',
),
array(
'property' => '--background-overlay',
'value' => 'backgroundOverlay',
),
array(
'property' => '--border-color',
'value' => 'borderColor',
Expand Down Expand Up @@ -204,6 +208,10 @@ public function render_css( $block ) {
return isset( $attrs['imageBoxShadow'] ) && true === $attrs['imageBoxShadow']['active'];
},
),
array(
'property' => '--image-ratio',
'value' => 'imageRatio',
),
array(
'property' => '--border-width',
'value' => 'borderWidth',
Expand Down Expand Up @@ -395,6 +403,38 @@ public function render_css( $block ) {
)
);

if ( isset( $block['attrs']['cardBorderRadius'] ) && is_array( $block['attrs']['cardBorderRadius'] ) ) {
$border_radius_properties = array(
'top' => '--border-radius-start-start',
'right' => '--border-radius-start-end',
'bottom' => '--border-radius-end-start',
'left' => '--border-radius-end-end',
);

$properties = array_map(
function( $position, $css_variable ) {
return array(
'property' => $css_variable,
'value' => 'cardBorderRadius',
'format' => function( $value, $attrs ) use ( $position ) {
return $value[ $position ];
},
'condition' => function( $attrs ) {
// @phpstan-ignore-next-line
return isset( $attrs['className'] ) && strpos( $attrs['className'], 'is-style-tiled' ) !== false;
},
);
},
array_keys( $border_radius_properties ),
$border_radius_properties
);

$css->add_item(
array(
'properties' => $properties,
)
);
}

$style = $css->generate();

Expand Down
31 changes: 23 additions & 8 deletions inc/render/class-posts-grid-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ public function render( $attributes ) {

$has_pagination = isset( $attributes['hasPagination'] ) && $attributes['hasPagination'];
$page_number = 1;
$is_tiled = isset( $attributes['className'] ) && false !== strpos( $attributes['className'], 'is-style-tiled' );

if ( $has_pagination ) {
if ( ! empty( get_query_var( 'page' ) ) || ! empty( get_query_var( 'paged' ) ) ) {
Expand Down Expand Up @@ -71,10 +72,18 @@ function ( $x ) use ( $sticky_posts_id ) {
$size = isset( $attributes['imageSize'] ) ? $attributes['imageSize'] : 'medium';
$thumb_id = get_post_thumbnail_id( $id );
$thumbnail = wp_get_attachment_image_src( $thumb_id, $size );
$style = '';

$list_items_markup .= '<div class="o-posts-grid-post-blog o-posts-grid-post-plain"><div class="o-posts-grid-post">';
if ( $is_tiled && $thumbnail ) {
$style = sprintf(
' style="background-image: url(%1$s); background-size: cover; background-position: center center;"',
esc_url( $thumbnail[0] )
);
}

if ( isset( $attributes['displayFeaturedImage'] ) && $attributes['displayFeaturedImage'] ) {
$list_items_markup .= '<div class="o-posts-grid-post-blog o-posts-grid-post-plain"' . $style . '><div class="o-posts-grid-post">';

if ( isset( $attributes['displayFeaturedImage'] ) && $attributes['displayFeaturedImage'] && ! $is_tiled ) {
if ( $thumbnail ) {
$image_alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

Expand Down Expand Up @@ -115,10 +124,6 @@ function ( $x ) use ( $sticky_posts_id ) {
$class .= ' o-posts-grid-columns-' . $attributes['columns'];
}

if ( isset( $attributes['cropImage'] ) && true === $attributes['cropImage'] ) {
$class .= ' o-crop-img';
}

$wrapper_attributes = get_block_wrapper_attributes();

$block_content = sprintf(
Expand Down Expand Up @@ -293,26 +298,36 @@ protected function render_featured_post( $post, $attributes ) {
$size = isset( $attributes['imageSize'] ) ? $attributes['imageSize'] : 'medium';
$thumb_id = get_post_thumbnail_id( $id );
$image_alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );
$style = '';
$image_url = wp_get_attachment_image_src( $thumb_id, $size );
$is_tiled = isset( $attributes['className'] ) && false !== strpos( $attributes['className'], 'is-style-tiled' );

if ( ! $image_alt ) {
$image_alt = get_the_title( $id );
}

$thumbnail = wp_get_attachment_image( $thumb_id, $size, false, array( 'alt' => $image_alt ) );

if ( $thumbnail ) {
if ( $image_url && ! $is_tiled ) {
$html .= sprintf(
'<div class="o-posts-grid-post-image"><a href="%1$s">%2$s</a></div>',
esc_url( get_the_permalink( $id ) ),
$thumbnail
);
}

if ( $is_tiled && $image_url ) {
$style = sprintf(
' style="background-image: url(%1$s); background-size: cover; background-position: center center;"',
esc_url( $image_url[0] )
);
}

$html .= '<div class="o-posts-grid-post-body' . ( $thumbnail && $attributes['displayFeaturedImage'] ? '' : ' is-full' ) . '">';

$html .= $this->get_post_fields( $id, $attributes );
$html .= '</div>';
return sprintf( '<div class="o-featured-container"><div class="o-featured-post">%1$s</div></div>', $html );
return sprintf( '<div class="o-featured-container"><div class="o-featured-post"' . $style . '>%1$s</div></div>', $html );
}

/**
Expand Down
8 changes: 5 additions & 3 deletions src/blocks/blocks/posts/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,8 @@
"type": "boolean",
"default": false
},
"cropImage": {
"type": "boolean",
"default": false
"imageRatio": {
"type": "string"
},
"customTitleFontSize": {
"type": [ "string", "number" ]
Expand Down Expand Up @@ -147,6 +146,9 @@
"backgroundColor": {
"type": "string"
},
"backgroundOverlay": {
"type": "string"
},
"borderColor": {
"type": "string"
},
Expand Down
32 changes: 29 additions & 3 deletions src/blocks/blocks/posts/components/layout/featured.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,15 @@ import { applyFilters } from '@wordpress/hooks';
* Internal dependencies
*/

import Thumbnail from './thumbnail.js';

import {
Thumbnail,
useThumbnail
} from './thumbnail.js';

import { getActiveStyle } from '../../../../helpers/helper-functions.js';

import { styles } from '../../constants.js';

import {
PostsCategory,
Expand All @@ -29,16 +37,34 @@ const FeaturedPost = ({
author,
categoriesList
}) => {
const activeStyle = getActiveStyle( styles, attributes?.className );
const isTiled = 'tiled' === activeStyle;
const { featuredImage } = useThumbnail( post?.featured_media, post.title?.rendered, attributes?.imageSize );

if ( ! post ) {
return '';
}

const category = categoriesList && 0 < post?.categories?.length ? categoriesList.find( item => item.id === post.categories[0]) : undefined;

const hasFeaturedImage = 0 !== post.featured_media && attributes.displayFeaturedImage;

const css = {
backgroundPosition: 'center center',
backgroundSize: 'cover'
};

if ( hasFeaturedImage && isTiled ) {
css.backgroundImage = `url(${ featuredImage })`;
}

return (
<div className="o-featured-container">
<div className="o-featured-post">
{ attributes.displayFeaturedImage && (
<div
className="o-featured-post"
style={ css }
>
{ ( attributes.displayFeaturedImage && ! isTiled ) && (
<Thumbnail
id={ post.featured_media }
link={ post.link }
Expand Down
142 changes: 86 additions & 56 deletions src/blocks/blocks/posts/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,34 @@ import {
sprintf
} from '@wordpress/i18n';

import { Placeholder } from '@wordpress/components';

import { applyFilters } from '@wordpress/hooks';

/**
* Internal dependencies
*/
import Thumbnail from './thumbnail.js';
import { unescapeHTML, formatDate } from '../../../../helpers/helper-functions.js';
import { Placeholder } from '@wordpress/components';
import {
Thumbnail,
useThumbnail
} from './thumbnail.js';

import {
getActiveStyle,
unescapeHTML,
formatDate
} from '../../../../helpers/helper-functions.js';

import { styles } from '../../constants.js';

const Layout = ({
attributes,
posts,
categoriesList,
authors
}) => {
const activeStyle = getActiveStyle( styles, attributes?.className );
const isTiled = 'tiled' === activeStyle;

const postsToDisplay = posts
.filter( post => post );
Expand All @@ -36,72 +49,89 @@ const Layout = ({
'grid' === attributes.style ?
classnames(
'is-grid',
`o-posts-grid-columns-${ attributes.columns }`,
{
'o-crop-img': attributes.cropImage
}
`o-posts-grid-columns-${ attributes.columns }`
) :
classnames(
'is-list',
{
'o-crop-img': attributes.cropImage
}
)
'is-list'
}
>
{ postsToDisplay
.slice( attributes.enableFeaturedPost ? 1 : 0 )
.map( post => {
const category = categoriesList && 0 < post?.categories?.length ? categoriesList.find( item => item.id === post.categories[0]) : undefined;
const categories = categoriesList && 0 < post?.categories?.length ? categoriesList.filter( item => post.categories.includes( item.id ) ) : [];
const author = authors && post.author ? authors.find( item => item.id === post.author ) : undefined;
return (
<div
key={ post.link }
className="o-posts-grid-post-blog o-posts-grid-post-plain"
>
<div className={ classnames( 'o-posts-grid-post' ) }>
{ ( 0 !== post.featured_media && attributes.displayFeaturedImage ) && (
<Thumbnail
id={ post.featured_media }
link={ post.link }
alt={ post.title?.rendered }
size={ attributes.imageSize }
imgStyle={{
borderRadius: attributes.borderRadius !== undefined ? attributes.borderRadius + 'px' : undefined
}}
/>
) }

<div
className={ classnames(
'o-posts-grid-post-body',
{ 'is-full': ! attributes.displayFeaturedImage }
) }
>
{ attributes.template.map( element => {
switch ( element ) {
case 'category':
return <PostsCategory key={ element } attributes={ attributes } element={ element } category={ category } categoriesList={ categoriesList }/>;
case 'title':
return <PostsTitle key={ element } attributes={ attributes } element={ element } post={ post } />;
case 'meta':
return <PostsMeta key={ element } attributes={ attributes } element={ element } post={ post } author={ author } categories={ categories } />;
case 'description':
return <PostsDescription key={ element } attributes={ attributes } element={ element } post={ post } />;
default:
return applyFilters( 'otter.postsBlock.templateLoop', '', element, attributes );
}
}) }
</div>
</div>
</div>
<PostBody
key={ post.id }
post={ post }
attributes={ attributes }
categoriesList={ categoriesList }
authors={ authors }
isTiled={ isTiled }
/>
);
}) }
</div>
);
};

const PostBody = ({ post, attributes, categoriesList, authors, isTiled }) => {
const { featuredImage } = useThumbnail( post?.featured_media, post.title?.rendered, attributes?.imageSize );
const category = categoriesList && 0 < post?.categories?.length ? categoriesList.find( item => item.id === post.categories[0]) : undefined;
const categories = categoriesList && 0 < post?.categories?.length ? categoriesList.filter( item => post.categories.includes( item.id ) ) : [];
const author = authors && post.author ? authors.find( item => item.id === post.author ) : undefined;
const hasFeaturedImage = 0 !== post.featured_media && attributes.displayFeaturedImage;
const css = {
backgroundPosition: 'center center',
backgroundSize: 'cover'
};

if ( hasFeaturedImage && isTiled ) {
css.backgroundImage = `url(${ featuredImage })`;
}

return (
<div
key={ post.link }
className="o-posts-grid-post-blog o-posts-grid-post-plain"
style={ css }
>
<div className={ classnames( 'o-posts-grid-post' ) }>
{ ( hasFeaturedImage && ! isTiled ) && (
<Thumbnail
id={ post.featured_media }
link={ post.link }
alt={ post.title?.rendered }
size={ attributes.imageSize }
imgStyle={{
borderRadius: attributes.borderRadius !== undefined ? attributes.borderRadius + 'px' : undefined
}}
/>
) }

<div
className={ classnames(
'o-posts-grid-post-body',
{ 'is-full': ! attributes.displayFeaturedImage }
) }
>
{ attributes.template.map( element => {
switch ( element ) {
case 'category':
return <PostsCategory key={ element } attributes={ attributes } element={ element } category={ category } categoriesList={ categoriesList }/>;
case 'title':
return <PostsTitle key={ element } attributes={ attributes } element={ element } post={ post } />;
case 'meta':
return <PostsMeta key={ element } attributes={ attributes } element={ element } post={ post } author={ author } categories={ categories } />;
case 'description':
return <PostsDescription key={ element } attributes={ attributes } element={ element } post={ post } />;
default:
return applyFilters( 'otter.postsBlock.templateLoop', '', element, attributes );
}
}) }
</div>
</div>
</div>
);
};

export const PostsCategory = ({ attributes, element, category, categoriesList }) => {
if ( undefined !== category && ( attributes.displayCategory && categoriesList ) ) {
return <span key={ element } className="o-posts-grid-post-category">{ unescapeHTML( category.name ) }</span>;
Expand Down
Loading

0 comments on commit 216b7a4

Please sign in to comment.