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

Render buttons based banner

This commit is contained in:
Timur Gogolev 2021-10-06 19:31:20 +03:00 committed by And Finally
parent f1cf628628
commit a80058ca69
2 changed files with 85 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
assets/css/admin.scss
View File

@ -418,12 +418,21 @@
margin: 0 !important;
}
.addons-buttons-banner-details h2 {
color: #1d2327; // Gray / Gray 90
}
p {
color: #2c3338;
margin: 14px 64px 0 0;
max-width: 389px;
}
.addons-buttons-banner-details p {
font-size: 14px;
max-width: none;
}
.product-developed-by {
color: #50575e; /* Gray 60 */
font-size: 12px;
@ -498,6 +507,44 @@
}
}
}
.addons-buttons-banner {
display: flex;
flex-direction: row;
.addons-buttons-banner-image {
background-repeat: no-repeat;
background-size: cover;
height: 190px;
margin: 24px;
width: 200px;
}
.addons-buttons-banner-details-container {
padding-left: 0;
width: calc(100% - 198px - 24px - 24px);
}
.addons-buttons-banner-details-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.button.addons-buttons-banner-button,
.button.addons-buttons-banner-button:hover {
background: #fff;
border: 1.5px solid #624594;
color: #624594;
padding: 4px 12px;
margin-right: 16px;
&.addons-buttons-banner-button-primary {
background-color: #624594;
color: #fff;
}
}
}
}
.storefront {

41
includes/admin/class-wc-admin-addons.php
View File

@ -187,11 +187,46 @@ class WC_Admin_Addons {
* @return void
*/
private static function output_banner( $block ) {
?>
if ( empty( $block->buttons ) ) {
// Render a product-like banner.
?>
<ul class="products">
<?php self::render_product_card( $block, $block->type ); ?>
<?php self::render_product_card( $block, $block->type ); ?>
</ul>
<?php
<?php
} else {
// Render a banner with buttons.
?>
<ul class="products">
<li class="product addons-product-banner addons-buttons-banner">
<div class="addons-buttons-banner-image"
style="background-image:url(<?php echo esc_url( $block->image ); ?>)"
title="<?php echo esc_attr( $block->image_alt ); ?>"></div>
<div class="product-details addons-buttons-banner-details-container">
<div class="addons-buttons-banner-details">
<h2><?php echo esc_html( $block->title ); ?></h2>
<p><?php echo wp_kses( $block->description, array() ); ?></p>
</div>
<div class="addons-buttons-banner-button-container">
<?php
foreach ( $block->buttons as $button ) {
$button_classes = array( 'button', 'addons-buttons-banner-button' );
$type = $button->type ?? null;
if ( 'primary' === $type ) {
$button_classes[] = 'addons-buttons-banner-button-primary';
}
?>
<a class="<?php echo esc_attr( implode( ' ', $button_classes ) ); ?>"
href="<?php echo esc_url( $button->href ); ?>">
<?php echo esc_html( $button->title ); ?>
</a>
<?php } ?>
</div>
</div>
</li>
</ul>
<?php
}
}
/**