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

Commit

Permalink
Add Fixed/Repeated background to the Featured Category block (#6440)
Browse files Browse the repository at this point in the history 
* Add `Fixed/Repeated background` to the `Featured Category` block

* Reorganize `Featured Product` and `Feature Category` before unification

* Fix gradient overlay
  • Loading branch information
@albarin
albarin authored May 24, 2022
1 parent 5845176 commit bf53dd3
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 87 deletions.
2 changes: 1 addition & 1 deletion assets/css/abstracts/_mixins.scss
View file
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
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
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

0 comments on commit bf53dd3

Please sign in to comment.