Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add Fixed/Repeated background to the Featured Category block #6440

Merged
merged 4 commits into from
May 24, 2022
Merged

Add Fixed/Repeated background to the Featured Category block #6440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
435a84c
Add `Fixed/Repeated background` to the `Featured Category` block
albarin May 23, 2022
9d2953d
Reorganize `Featured Product` and `Feature Category` before unification
albarin May 23, 2022
be5d7a8
Fix gradient overlay
albarin May 23, 2022
acb7399
Merge branch 'trunk' into add/fc-repeated-fixed-image
albarin May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/css/abstracts/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ $fontSizes: (
left: 0;
bottom: 0;
right: 0;
background-color: inherit;
background: inherit;
border-radius: inherit;
opacity: $opacity;
z-index: 1;
Expand Down
8 changes: 8 additions & 0 deletions assets/js/blocks/featured-items/featured-category/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,14 @@
"type": "string",
"default": "none"
},
"hasParallax": {
"type": "boolean",
"default": false
},
"isRepeated": {
"type": "boolean",
"default": false
},
"mediaId": {
"type": "number",
"default": 0
Expand Down
155 changes: 117 additions & 38 deletions src/BlockTypes/FeaturedCategory.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,14 @@ class FeaturedCategory extends AbstractDynamicBlock {
*/
protected $block_name = 'featured-category';

/**
* Default attribute values, should match what's set in JS `registerBlockType`.
*
* @var array
*/
protected $defaults = array(
'align' => 'none',
);

/**
* Global style enabled for this block.
Expand Down Expand Up @@ -45,15 +53,6 @@ protected function get_block_type_supports() {
);
}

/**
* Default attribute values, should match what's set in JS `registerBlockType`.
*
* @var array
*/
protected $defaults = array(
'align' => 'none',
);

/**
* Get block attributes.
*
Expand All @@ -79,17 +78,16 @@ protected function get_block_type_attributes() {
* @return string Rendered block type output.
*/
protected function render( $attributes, $content ) {
$id = absint( $attributes['categoryId'] ?? 0 );

$id = absint( isset( $attributes['categoryId'] ) ? $attributes['categoryId'] : 0 );
$category = get_term( $id, 'product_cat' );

if ( ! $category || is_wp_error( $category ) ) {
return '';
}

$attributes = wp_parse_args( $attributes, $this->defaults );

$attributes['height'] = isset( $attributes['height'] ) ? $attributes['height'] : wc_get_theme_support( 'featured_block::default_height', 500 );
$attributes['height'] = $attributes['height'] ?? wc_get_theme_support( 'featured_block::default_height', 500 );

$title = sprintf(
'<h2 class="wc-block-featured-category__title">%s</h2>',
Expand All @@ -101,13 +99,21 @@ protected function render( $attributes, $content ) {
wc_format_content( wp_kses_post( $category->description ) )
);

$image_url = esc_url( $this->get_image_url( $attributes, $category ) );

$styles = $this->get_styles( $attributes );
$classes = $this->get_classes( $attributes );

$output = sprintf( '<div class="%1$s wp-block-woocommerce-featured-category" style="%2$s">', esc_attr( trim( $classes ) ), esc_attr( $styles ) );
$output .= '<div class="wc-block-featured-category__wrapper">';
$output .= $this->render_overlay( $attributes );
$output .= $this->render_image( $attributes, $category );

if ( ! $attributes['isRepeated'] && ! $attributes['hasParallax'] ) {
$output .= $this->render_image( $attributes, $category, $image_url );
} else {
$output .= $this->render_bg_image( $attributes, $image_url );
}

$output .= $title;
if ( $attributes['showDesc'] ) {
$output .= $desc_str;
Expand All @@ -119,41 +125,51 @@ protected function render( $attributes, $content ) {
}

/**
* Renders the featured image
* Returns the url of a category image
*
* @param array $attributes Block attributes. Default empty array.
* @param \WC_Product $category Product object.
* @param array $attributes Block attributes. Default empty array.
* @param \WP_Term $category Category object.
*
* @return string
*/
private function render_image( $attributes, $category ) {
$style = '';
private function get_image_url( $attributes, $category ) {
$image_size = 'large';
if ( 'none' !== $attributes['align'] || $attributes['height'] > 800 ) {
$image_size = 'full';
}

$style .= sprintf( 'object-fit: %s;', $attributes['imageFit'] );

if ( $attributes['mediaId'] ) {
$image = wp_get_attachment_image_url( $attributes['mediaId'], $image_size );
} else {
$image = $this->get_image( $category, $image_size );
return wp_get_attachment_image_url( $attributes['mediaId'], $image_size );
}

if ( is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] ) ) {
return $this->get_image( $category, $image_size );
}

/**
* Renders the featured image
*
* @param array $attributes Block attributes. Default empty array.
* @param \WC_Product $category Product object.
* @param string $image_url Product image url.
*
* @return string
*/
private function render_image( $attributes, $category, string $image_url ) {
$style = sprintf( 'object-fit: %s;', $attributes['imageFit'] );

if ( $this->hasFocalPoint( $attributes ) ) {
$style .= sprintf(
'object-position: %s%% %s%%;',
$attributes['focalPoint']['x'] * 100,
$attributes['focalPoint']['y'] * 100
);
}

if ( ! empty( $image ) ) {
if ( ! empty( $image_url ) ) {
return sprintf(
'<img alt="%1$s" class="wc-block-featured-category__background-image" src="%2$s" style="%3$s" />',
wp_kses_post( $attributes['alt'] ?: $category->name ),
esc_url( $image ),
$image_url,
$style
);
}
Expand All @@ -162,24 +178,57 @@ private function render_image( $attributes, $category ) {
}

/**
* Renders the block overlay
* Renders the featured image as a div background.
*
* @param array $attributes Block attributes. Default empty array.
* @param array $attributes Block attributes. Default empty array.
* @param string $image_url Product image url.
*
* @return string
*/
private function render_overlay( $attributes ) {
$overlay_styles = '';
private function render_bg_image( $attributes, $image_url ) {
$styles = $this->get_bg_styles( $attributes, $image_url );

if ( isset( $attributes['overlayColor'] ) ) {
$overlay_styles = sprintf( 'background-color: %s', $attributes['overlayColor'] );
} elseif ( isset( $attributes['overlayGradient'] ) ) {
$overlay_styles = sprintf( 'background-image: %s', $attributes['overlayGradient'] );
} else {
$overlay_styles = 'background-color: #000000';
$classes = [ 'wc-block-featured-category__background-image' ];

if ( $attributes['hasParallax'] ) {
$classes[] = ' has-parallax';
}

return sprintf( '<div class="background-dim__overlay" style="%s"></div>', esc_attr( $overlay_styles ) );
return sprintf( '<div class="%1$s" style="%2$s" /></div>', implode( ' ', $classes ), $styles );
}

/**
* Get the styles for the wrapper element (background image, color).
*
* @param array $attributes Block attributes. Default empty array.
* @param string $image_url Product image url.
*
* @return string
*/
public function get_bg_styles( $attributes, $image_url ) {
$style = '';

if ( $attributes['isRepeated'] || $attributes['hasParallax'] ) {
$style .= "background-image: url($image_url);";
}

if ( ! $attributes['isRepeated'] ) {
$style .= 'background-repeat: no-repeat;';
$style .= 'background-size: ' . ( 'cover' === $attributes['imageFit'] ? $attributes['imageFit'] : 'auto' ) . ';';
}

if ( $this->hasFocalPoint( $attributes ) ) {
$style .= sprintf(
'background-position: %s%% %s%%;',
$attributes['focalPoint']['x'] * 100,
$attributes['focalPoint']['y'] * 100
);
}

$global_style_style = StyleAttributesUtils::get_styles_by_attributes( $attributes, $this->global_style_wrapper );
$style .= $global_style_style;

return $style;
}

/**
Expand All @@ -191,7 +240,7 @@ private function render_overlay( $attributes ) {
public function get_styles( $attributes ) {
$style = '';

$min_height = isset( $attributes['minHeight'] ) ? $attributes['minHeight'] : wc_get_theme_support( 'featured_block::default_height', 500 );
$min_height = $attributes['minHeight'] ?? wc_get_theme_support( 'featured_block::default_height', 500 );

if ( isset( $attributes['minHeight'] ) ) {
$style .= sprintf( 'min-height:%dpx;', intval( $min_height ) );
Expand All @@ -203,6 +252,25 @@ public function get_styles( $attributes ) {
return $style;
}

/**
* Renders the block overlay
*
* @param array $attributes Block attributes. Default empty array.
*
* @return string
*/
private function render_overlay( $attributes ) {
if ( isset( $attributes['overlayGradient'] ) ) {
$overlay_styles = sprintf( 'background-image: %s', $attributes['overlayGradient'] );
} elseif ( isset( $attributes['overlayColor'] ) ) {
$overlay_styles = sprintf( 'background-color: %s', $attributes['overlayColor'] );
} else {
$overlay_styles = 'background-color: #000000';
}

return sprintf( '<div class="background-dim__overlay" style="%s"></div>', esc_attr( $overlay_styles ) );
}

/**
* Get class names for the block container.
*
Expand Down Expand Up @@ -257,6 +325,17 @@ public function get_image( $category, $size = 'full' ) {
return $image;
}

/**
* Returns whether the focal point is defined for the block.
*
* @param array $attributes Block attributes. Default empty array.
*
* @return bool
*/
private function hasFocalPoint( $attributes ): bool {
return is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] );
}

/**
* Extra data passed through from server to client for block.
*
Expand Down
Loading