Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor: `Featured product` and `Featured category` classes (https://github.com/woocommerce/woocommerce-blocks/pull/6443) 

* Add `Fixed/Repeated background` to the `Featured Category` block

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

* Add new `FeaturedItem` class with the shared code for `Featured Product/Category`

* Remove space

* Small tweaks after review feedback
This commit is contained in:
Alba Rincón 2022-05-30 09:08:53 +02:00 committed by GitHub
parent 3ff8440643
commit 7ab9cb214b
3 changed files with 421 additions and 581 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

311
plugins/woocommerce-blocks/src/BlockTypes/FeaturedCategory.php
View File

@ -1,12 +1,10 @@
<?php
namespace Automattic\WooCommerce\Blocks\BlockTypes;
use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
/**
* FeaturedCategory class.
*/
class FeaturedCategory extends AbstractDynamicBlock {
class FeaturedCategory extends FeaturedItem {
/**
* Block name.
*
@ -14,45 +12,6 @@ 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.
*
* @var array
*/
protected $global_style_wrapper = array(
'text_color',
'font_size',
'border_color',
'border_radius',
'border_width',
'background_color',
'text_color',
'padding',
);
/**
* Get the supports array for this block type.
*
* @see $this->register_block_type()
* @return string;
*/
protected function get_block_type_supports() {
return array(
'color' => array(
'__experimentalDuotone' => '.wc-block-featured-category__background-image',
),
);
}
/**
* Get block attributes.
*
@ -71,250 +30,40 @@ class FeaturedCategory extends AbstractDynamicBlock {
}
/**
* Render the Featured Category block.
* Returns the featured category.
*
* @param array $attributes Block attributes.
* @param string $content Block content.
* @return string Rendered block type output.
* @param array $attributes Block attributes. Default empty array.
* @return \WP_Term|null
*/
protected function render( $attributes, $content ) {
protected function get_item( $attributes ) {
$id = absint( $attributes['categoryId'] ?? 0 );
$category = get_term( $id, 'product_cat' );
if ( ! $category || is_wp_error( $category ) ) {
return '';
return null;
}
$attributes = wp_parse_args( $attributes, $this->defaults );
$attributes['height'] = $attributes['height'] ?? wc_get_theme_support( 'featured_block::default_height', 500 );
$title = sprintf(
'<h2 class="wc-block-featured-category__title">%s</h2>',
wp_kses_post( $category->name )
);
$desc_str = sprintf(
'<div class="wc-block-featured-category__description">%s</div>',
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 );
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;
}
$output .= '<div class="wc-block-featured-category__link">' . $content . '</div>';
$output .= '</div>';
$output .= '</div>';
return $output;
return $category;
}
/**
* Returns the url of a category image
*
* @param array $attributes Block attributes. Default empty array.
* @param \WP_Term $category Category object.
* Returns the name of the featured category.
*
* @param \WP_Term $category Featured category.
* @return string
*/
private function get_image_url( $attributes, $category ) {
$image_size = 'large';
if ( 'none' !== $attributes['align'] || $attributes['height'] > 800 ) {
$image_size = 'full';
}
if ( $attributes['mediaId'] ) {
return wp_get_attachment_image_url( $attributes['mediaId'], $image_size );
}
return $this->get_image( $category, $image_size );
protected function get_item_title( $category ) {
return $category->name;
}
/**
* 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_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 ),
$image_url,
$style
);
}
return '';
}
/**
* Renders the featured image as a div background.
*
* @param array $attributes Block attributes. Default empty array.
* @param string $image_url Product image url.
*
* @return string
*/
private function render_bg_image( $attributes, $image_url ) {
$styles = $this->get_bg_styles( $attributes, $image_url );
$classes = [ 'wc-block-featured-category__background-image' ];
if ( $attributes['hasParallax'] ) {
$classes[] = ' has-parallax';
}
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;
}
/**
* Get the styles for the wrapper element (background image, color).
*
* @param array $attributes Block attributes. Default empty array.
* @return string
*/
public function get_styles( $attributes ) {
$style = '';
$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 ) );
}
$global_style_style = StyleAttributesUtils::get_styles_by_attributes( $attributes, $this->global_style_wrapper );
$style .= $global_style_style;
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.
*
* @param array $attributes Block attributes. Default empty array.
* @return string
*/
public function get_classes( $attributes ) {
$classes = array( 'wc-block-' . $this->block_name );
if ( isset( $attributes['align'] ) ) {
$classes[] = "align{$attributes['align']}";
}
if ( isset( $attributes['dimRatio'] ) && ( 0 !== $attributes['dimRatio'] ) ) {
$classes[] = 'has-background-dim';
if ( 50 !== $attributes['dimRatio'] ) {
$classes[] = 'has-background-dim-' . 10 * round( $attributes['dimRatio'] / 10 );
}
}
if ( isset( $attributes['contentAlign'] ) && 'center' !== $attributes['contentAlign'] ) {
$classes[] = "has-{$attributes['contentAlign']}-content";
}
if ( isset( $attributes['className'] ) ) {
$classes[] = $attributes['className'];
}
$global_style_classes = StyleAttributesUtils::get_classes_by_attributes( $attributes, $this->global_style_wrapper );
$classes[] = $global_style_classes;
return implode( ' ', $classes );
}
/**
* Returns the main product image URL.
* Returns the featured category image URL.
*
* @param \WP_Term $category Term object.
* @param string $size Image size, defaults to 'full'.
* @return string
*/
public function get_image( $category, $size = 'full' ) {
protected function get_item_image( $category, $size = 'full' ) {
$image = '';
$image_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
@ -326,26 +75,28 @@ class FeaturedCategory extends AbstractDynamicBlock {
}
/**
* Returns whether the focal point is defined for the block.
* Renders the featured category attributes.
*
* @param \WP_Term $category Term object.
* @param array $attributes Block attributes. Default empty array.
*
* @return bool
* @return string
*/
private function hasFocalPoint( $attributes ): bool {
return is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] );
protected function render_attributes( $category, $attributes ) {
$title = sprintf(
'<h2 class="wc-block-featured-category__title">%s</h2>',
wp_kses_post( $category->name )
);
$desc_str = sprintf(
'<div class="wc-block-featured-category__description">%s</div>',
wc_format_content( wp_kses_post( $category->description ) )
);
$output = $title;
if ( $attributes['showDesc'] ) {
$output .= $desc_str;
}
/**
* Extra data passed through from server to client for block.
*
* @param array $attributes Any attributes that currently are available from the block.
* Note, this will be empty in the editor context when the block is
* not in the post content on editor load.
*/
protected function enqueue_data( array $attributes = [] ) {
parent::enqueue_data( $attributes );
$this->asset_data_registry->add( 'min_height', wc_get_theme_support( 'featured_block::min_height', 500 ), true );
$this->asset_data_registry->add( 'default_height', wc_get_theme_support( 'featured_block::default_height', 500 ), true );
return $output;
}
}

340
plugins/woocommerce-blocks/src/BlockTypes/FeaturedItem.php Normal file
View File

@ -0,0 +1,340 @@
<?php
namespace Automattic\WooCommerce\Blocks\BlockTypes;
use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
/**
* FeaturedItem class.
*/
abstract class FeaturedItem extends AbstractDynamicBlock {
/**
* Block name.
*
* @var string
*/
protected $block_name;
/**
* Default attribute values.
*
* @var array
*/
protected $defaults = array(
'align' => 'none',
);
/**
* Global style enabled for this block.
*
* @var array
*/
protected $global_style_wrapper = array(
'background_color',
'border_color',
'border_radius',
'border_width',
'font_size',
'padding',
'text_color',
);
/**
* Returns the featured item.
*
* @param array $attributes Block attributes. Default empty array.
* @return \WP_Term|\WC_Product|null
*/
abstract protected function get_item( $attributes );
/**
* Returns the name of the featured item.
*
* @param \WP_Term|\WC_Product $item Item object.
* @return string
*/
abstract protected function get_item_title( $item );
/**
* Returns the featured item image URL.
*
* @param \WP_Term|\WC_Product $item Item object.
* @param string $size Image size, defaults to 'full'.
* @return string
*/
abstract protected function get_item_image( $item, $size = 'full' );
/**
* Renders the featured item attributes.
*
* @param \WP_Term|\WC_Product $item Item object.
* @param array $attributes Block attributes. Default empty array.
* @return string
*/
abstract protected function render_attributes( $item, $attributes );
/**
* Get the supports array for this block type.
*
* @return string[][];
* @see $this->register_block_type()
*/
protected function get_block_type_supports() {
return array(
'color' => array(
'__experimentalDuotone' => '.wc-block-' . $this->block_name . '__background-image',
),
);
}
/**
* Render the featured item block.
*
* @param array $attributes Block attributes.
* @param string $content Block content.
* @return string Rendered block type output.
*/
protected function render( $attributes, $content ) {
$item = $this->get_item( $attributes );
if ( ! $item ) {
return '';
}
$attributes = wp_parse_args( $attributes, $this->defaults );
$attributes['height'] = $attributes['height'] ?? wc_get_theme_support( 'featured_block::default_height', 500 );
$image_url = esc_url( $this->get_image_url( $attributes, $item ) );
$styles = $this->get_styles( $attributes );
$classes = $this->get_classes( $attributes );
$output = sprintf( '<div class="%1$s wp-block-woocommerce-%2$s" style="%3$s">', esc_attr( trim( $classes ) ), $this->block_name, esc_attr( $styles ) );
$output .= sprintf( '<div class="wc-block-%s__wrapper">', $this->block_name );
$output .= $this->render_overlay( $attributes );
if ( ! $attributes['isRepeated'] && ! $attributes['hasParallax'] ) {
$output .= $this->render_image( $attributes, $item, $image_url );
} else {
$output .= $this->render_bg_image( $attributes, $image_url );
}
$output .= $this->render_attributes( $item, $attributes );
$output .= sprintf( '<div class="wc-block-%s__link">%s</div>', $this->block_name, $content );
$output .= '</div>';
$output .= '</div>';
return $output;
}
/**
* Returns the url the item's image
*
* @param array $attributes Block attributes. Default empty array.
* @param \WP_Term|\WC_Product $item Item object.
*
* @return string
*/
private function get_image_url( $attributes, $item ) {
$image_size = 'large';
if ( 'none' !== $attributes['align'] || $attributes['height'] > 800 ) {
$image_size = 'full';
}
if ( $attributes['mediaId'] ) {
return wp_get_attachment_image_url( $attributes['mediaId'], $image_size );
}
return $this->get_item_image( $item, $image_size );
}
/**
* Renders the featured image as a div background.
*
* @param array $attributes Block attributes. Default empty array.
* @param string $image_url Item image url.
*
* @return string
*/
private function render_bg_image( $attributes, $image_url ) {
$styles = $this->get_bg_styles( $attributes, $image_url );
$classes = [ "wc-block-{$this->block_name}__background-image" ];
if ( $attributes['hasParallax'] ) {
$classes[] = ' has-parallax';
}
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 Item 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;';
$bg_size = 'cover' === $attributes['imageFit'] ? $attributes['imageFit'] : 'auto';
$style .= 'background-size: ' . $bg_size . ';';
}
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;
}
/**
* Renders the featured image
*
* @param array $attributes Block attributes. Default empty array.
* @param \WC_Product|\WP_Term $item Item object.
* @param string $image_url Item image url.
*
* @return string
*/
private function render_image( $attributes, $item, 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_url ) ) {
return sprintf(
'<img alt="%1$s" class="wc-block-%2$s__background-image" src="%3$s" style="%4$s" />',
wp_kses_post( $attributes['alt'] ?: $this->get_item_title( $item ) ),
$this->block_name,
$image_url,
$style
);
}
return '';
}
/**
* Get the styles for the wrapper element (background image, color).
*
* @param array $attributes Block attributes. Default empty array.
* @return string
*/
public function get_styles( $attributes ) {
$style = '';
$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 ) );
}
$global_style_style = StyleAttributesUtils::get_styles_by_attributes( $attributes, $this->global_style_wrapper );
$style .= $global_style_style;
return $style;
}
/**
* Get class names for the block container.
*
* @param array $attributes Block attributes. Default empty array.
* @return string
*/
public function get_classes( $attributes ) {
$classes = array( 'wc-block-' . $this->block_name );
if ( isset( $attributes['align'] ) ) {
$classes[] = "align{$attributes['align']}";
}
if ( isset( $attributes['dimRatio'] ) && ( 0 !== $attributes['dimRatio'] ) ) {
$classes[] = 'has-background-dim';
if ( 50 !== $attributes['dimRatio'] ) {
$classes[] = 'has-background-dim-' . 10 * round( $attributes['dimRatio'] / 10 );
}
}
if ( isset( $attributes['contentAlign'] ) && 'center' !== $attributes['contentAlign'] ) {
$classes[] = "has-{$attributes['contentAlign']}-content";
}
if ( isset( $attributes['className'] ) ) {
$classes[] = $attributes['className'];
}
$global_style_classes = StyleAttributesUtils::get_classes_by_attributes( $attributes, $this->global_style_wrapper );
$classes[] = $global_style_classes;
return implode( ' ', $classes );
}
/**
* 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 ) );
}
/**
* 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.
*
* @param array $attributes Any attributes that currently are available from the block.
* Note, this will be empty in the editor context when the block is
* not in the post content on editor load.
*/
protected function enqueue_data( array $attributes = [] ) {
parent::enqueue_data( $attributes );
$this->asset_data_registry->add( 'min_height', wc_get_theme_support( 'featured_block::min_height', 500 ), true );
$this->asset_data_registry->add( 'default_height', wc_get_theme_support( 'featured_block::default_height', 500 ), true );
}
}

345
plugins/woocommerce-blocks/src/BlockTypes/FeaturedProduct.php
View File

@ -6,7 +6,7 @@ use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
/**
* FeaturedProduct class.
*/
class FeaturedProduct extends AbstractDynamicBlock {
class FeaturedProduct extends FeaturedItem {
/**
* Block name.
*
@ -15,63 +15,61 @@ class FeaturedProduct extends AbstractDynamicBlock {
protected $block_name = 'featured-product';
/**
* Default attribute values.
* Returns the featured product.
*
* @var array
* @param array $attributes Block attributes. Default empty array.
* @return \WP_Term|null
*/
protected $defaults = array(
'align' => 'none',
);
/**
* Global style enabled for this block.
*
* @var array
*/
protected $global_style_wrapper = array(
'text_color',
'font_size',
'border_color',
'border_radius',
'border_width',
'background_color',
'text_color',
'padding',
);
/**
* Get the supports array for this block type.
*
* @see $this->register_block_type()
* @return string;
*/
protected function get_block_type_supports() {
return array(
'color' => array(
'__experimentalDuotone' => '.wc-block-featured-product__background-image',
),
);
}
/**
* Render the Featured Product block.
*
* @param array $attributes Block attributes.
* @param string $content Block content.
* @return string Rendered block type output.
*/
protected function render( $attributes, $content ) {
protected function get_item( $attributes ) {
$id = absint( $attributes['productId'] ?? 0 );
$product = wc_get_product( $id );
if ( ! $product ) {
return '';
return null;
}
$attributes = wp_parse_args( $attributes, $this->defaults );
return $product;
}
$attributes['height'] = $attributes['height'] ?? wc_get_theme_support( 'featured_block::default_height', 500 );
/**
* Returns the name of the featured product.
*
* @param \WC_Product $product Product object.
* @return string
*/
protected function get_item_title( $product ) {
return $product->get_title();
}
/**
* Returns the featured product image URL.
*
* @param \WC_Product $product Product object.
* @param string $size Image size, defaults to 'full'.
* @return string
*/
protected function get_item_image( $product, $size = 'full' ) {
$image = '';
if ( $product->get_image_id() ) {
$image = wp_get_attachment_image_url( $product->get_image_id(), $size );
} elseif ( $product->get_parent_id() ) {
$parent_product = wc_get_product( $product->get_parent_id() );
if ( $parent_product ) {
$image = wp_get_attachment_image_url( $parent_product->get_image_id(), $size );
}
}
return $image;
}
/**
* Renders the featured product attributes.
*
* @param \WC_Product $product Product object.
* @param array $attributes Block attributes. Default empty array.
* @return string
*/
protected function render_attributes( $product, $attributes ) {
$title = sprintf(
'<h2 class="wc-block-featured-product__title">%s</h2>',
wp_kses_post( $product->get_title() )
@ -94,263 +92,14 @@ class FeaturedProduct extends AbstractDynamicBlock {
wp_kses_post( $product->get_price_html() )
);
$image_url = esc_url( $this->get_image_url( $attributes, $product ) );
$styles = $this->get_styles( $attributes );
$classes = $this->get_classes( $attributes );
$output = sprintf( '<div class="%1$s wp-block-woocommerce-featured-product" style="%2$s">', esc_attr( trim( $classes ) ), esc_attr( $styles ) );
$output .= '<div class="wc-block-featured-product__wrapper">';
$output .= $this->render_overlay( $attributes );
if ( ! $attributes['isRepeated'] && ! $attributes['hasParallax'] ) {
$output .= $this->render_image( $attributes, $product, $image_url );
} else {
$output .= $this->render_bg_image( $attributes, $image_url );
}
$output .= $title;
$output = $title;
if ( $attributes['showDesc'] ) {
$output .= $desc_str;
}
if ( $attributes['showPrice'] ) {
$output .= $price_str;
}
$output .= '<div class="wc-block-featured-product__link">' . $content . '</div>';
$output .= '</div>';
$output .= '</div>';
return $output;
}
/**
* Returns the url of a product image
*
* @param array $attributes Block attributes. Default empty array.
* @param \WC_Product $product Product object.
*
* @return string
*/
private function get_image_url( $attributes, $product ) {
$image_size = 'large';
if ( 'none' !== $attributes['align'] || $attributes['height'] > 800 ) {
$image_size = 'full';
}
if ( $attributes['mediaId'] ) {
return wp_get_attachment_image_url( $attributes['mediaId'], $image_size );
}
return $this->get_image( $product, $image_size );
}
/**
* Renders the featured image
*
* @param array $attributes Block attributes. Default empty array.
* @param \WC_Product $product Product object.
* @param string $image_url Product image url.
*
* @return string
*/
private function render_image( $attributes, $product, $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_url ) ) {
return sprintf(
'<img alt="%1$s" class="wc-block-featured-product__background-image" src="%2$s" style="%3$s" />',
wp_kses_post( $attributes['alt'] ?: $product->get_name() ),
$image_url,
$style
);
}
return '';
}
/**
* Renders the featured image as a div background.
*
* @param array $attributes Block attributes. Default empty array.
* @param string $image_url Product image url.
*
* @return string
*/
private function render_bg_image( $attributes, $image_url ) {
$styles = $this->get_bg_styles( $attributes, $image_url );
$classes = [ 'wc-block-featured-product__background-image' ];
if ( $attributes['hasParallax'] ) {
$classes[] = ' has-parallax';
}
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;
}
/**
* Get the styles for the wrapper element (background image, color).
*
* @param array $attributes Block attributes. Default empty array.
* @return string
*/
public function get_styles( $attributes ) {
$style = '';
$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 ) );
}
$global_style_style = StyleAttributesUtils::get_styles_by_attributes( $attributes, $this->global_style_wrapper );
$style .= $global_style_style;
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.
*
* @param array $attributes Block attributes. Default empty array.
* @return string
*/
public function get_classes( $attributes ) {
$classes = array( 'wc-block-' . $this->block_name );
if ( isset( $attributes['align'] ) ) {
$classes[] = "align{$attributes['align']}";
}
if ( isset( $attributes['dimRatio'] ) && ( 0 !== $attributes['dimRatio'] ) ) {
$classes[] = 'has-background-dim';
if ( 50 !== $attributes['dimRatio'] ) {
$classes[] = 'has-background-dim-' . 10 * round( $attributes['dimRatio'] / 10 );
}
}
if ( isset( $attributes['contentAlign'] ) && 'center' !== $attributes['contentAlign'] ) {
$classes[] = "has-{$attributes['contentAlign']}-content";
}
if ( isset( $attributes['className'] ) ) {
$classes[] = $attributes['className'];
}
if ( $attributes['isRepeated'] ) {
$classes[] = 'is-repeated';
}
$global_style_classes = StyleAttributesUtils::get_classes_by_attributes( $attributes, $this->global_style_wrapper );
$classes[] = $global_style_classes;
return implode( ' ', $classes );
}
/**
* Returns the main product image URL.
*
* @param \WC_Product $product Product object.
* @param string $size Image size, defaults to 'full'.
* @return string
*/
public function get_image( $product, $size = 'full' ) {
$image = '';
if ( $product->get_image_id() ) {
$image = wp_get_attachment_image_url( $product->get_image_id(), $size );
} elseif ( $product->get_parent_id() ) {
$parent_product = wc_get_product( $product->get_parent_id() );
if ( $parent_product ) {
$image = wp_get_attachment_image_url( $parent_product->get_image_id(), $size );
}
}
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.
*
* @param array $attributes Any attributes that currently are available from the block.
* Note, this will be empty in the editor context when the block is
* not in the post content on editor load.
*/
protected function enqueue_data( array $attributes = [] ) {
parent::enqueue_data( $attributes );
$this->asset_data_registry->add( 'min_height', wc_get_theme_support( 'featured_block::min_height', 500 ), true );
$this->asset_data_registry->add( 'default_height', wc_get_theme_support( 'featured_block::default_height', 500 ), true );
}
}