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

Simplify the Hero Product 3 Split pattern design #11495

Merged
merged 3 commits into from
Oct 31, 2023
Merged

Simplify the Hero Product 3 Split pattern design #11495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5b7e6e9
Simplify the pattern design
albarin Oct 30, 2023
10821d0
Add char limits to the AI generated content
albarin Oct 30, 2023
197e3c2
Fix url
albarin Oct 31, 2023
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
155 changes: 79 additions & 76 deletions patterns/hero-product-3-split.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,104 +6,107 @@
*/

use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;

$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/hero-product-3-split' );
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/hero-product-3-split' );

$first_title = $content['titles'][0]['default'] ?? '';
$second_title = $content['titles'][1]['default'] ?? '';
$third_title = $content['titles'][2]['default'] ?? '';
$fourth_title = $content['titles'][3]['default'] ?? '';
$fifth_title = $content['titles'][4]['default'] ?? '';
$main_title = $content['titles'][0]['default'] ?? '';
$first_title = $content['titles'][1]['default'] ?? '';
$second_title = $content['titles'][2]['default'] ?? '';
$third_title = $content['titles'][3]['default'] ?? '';

$first_description = $content['descriptions'][0]['default'] ?? '';
$second_description = $content['descriptions'][1]['default'] ?? '';
$third_description = $content['descriptions'][2]['default'] ?? '';
$fourth_description = $content['descriptions'][3]['default'] ?? '';
$fifth_description = $content['descriptions'][4]['default'] ?? '';
?>

<!-- wp:columns {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0px","bottom":"80px"}}}} -->
<div class="wp-block-columns alignfull" style="margin-top:0px;margin-bottom:80px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%">
<!-- wp:media-text {"mediaPosition":"right","mediaId":1,"mediaLink":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/hand-guitar-finger-tshirt-clothing-rack.png', dirname( __FILE__ ) ) ); ?>","mediaType":"image"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile">
<div class="wp-block-media-text__content">
<!-- wp:group {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="margin-top:20px;margin-bottom:20px;">
<!-- wp:heading -->
<h2 class="wp-block-heading"><?php echo esc_html( $first_title ); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $first_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"textAlign":"left"} -->
<div class="wp-block-button has-custom-font-size">
<a class="wp-block-button__link has-text-align-left wp-element-button" href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>"><?php esc_attr_e( 'Shop now', 'woo-gutenberg-products-block' ); ?></a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"0"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column">
<!-- wp:cover {"url":"<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/man-person-winter-photography-statue-coat.png' ) ); ?>","dimRatio":0,"minHeight":800,"minHeightUnit":"px","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:800px">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
<img
class="wp-block-cover__image-background"
alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased.', 'woo-gutenberg-products-block' ); ?>"
src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/man-person-winter-photography-statue-coat.png' ) ); ?>"
data-object-fit="cover" />
<div class="wp-block-cover__inner-container">
<!-- wp:paragraph {"align":"center","placeholder":" ","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph -->
</div>
<figure class="wp-block-media-text__media">
<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/hand-guitar-finger-tshirt-clothing-rack.png' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1 size-full" />
</figure>
</div>
<!-- /wp:media-text -->
<!-- /wp:cover -->
</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"30%","style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);flex-basis:30%">
<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $second_title ); ?></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $second_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center">
<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"50px","right":"50px"},"blockGap":"48px","margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:20px;padding-right:50px;padding-bottom:20px;padding-left:50px">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><strong><?php echo esc_html( $main_title ); ?></strong></h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":"35px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"level":5,"style":{"typography":{"textTransform":"capitalize"}}} -->
<h5 class="wp-block-heading" style="text-transform:capitalize"><?php echo esc_html( $first_title ); ?></h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $third_title ); ?></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><?php echo esc_html( $second_description ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $third_description ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"level":5,"style":{"typography":{"textTransform":"capitalize"}}} -->
<h5 class="wp-block-heading" style="text-transform:capitalize"><?php echo esc_html( $second_title ); ?></h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $fourth_title ); ?></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><?php echo esc_html( $third_description ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $fourth_description ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"level":5,"style":{"typography":{"textTransform":"capitalize"}}} -->
<h5 class="wp-block-heading" style="text-transform:capitalize"><?php echo esc_html( $third_title ); ?></h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $fifth_title ); ?></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><?php echo esc_html( $third_description ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $fifth_description ); ?></p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button" href="https://store.local/shop/classic-shop/">Shop now</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->
</div>
Expand Down
32 changes: 10 additions & 22 deletions src/Patterns/dictionary.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,46 +131,34 @@
"content": {
"titles": [
{
"default": "Endless Tee's",
"ai_prompt": "An impact phrase that advertises the displayed product: {image.0}"
"default": "New in: 3-in-1 parka",
"ai_prompt": "An impact phrase that advertises the displayed product: {image.0}. The title must have less than 30 characters"
},
{
"default": "Waterproof Membrane",
"ai_prompt": "A title describing the first displayed product feature"
"ai_prompt": "A title describing the first displayed product feature. The title must have only 2 or 3 words."
},
{
"default": "Expert Craftsmanship",
"ai_prompt": "A title describing the second displayed product feature"
"ai_prompt": "A title describing the second displayed product feature. The title must have only 2 or 3 words."
},
{
"default": "Durable Fabric",
"ai_prompt": "A title describing the third displayed product feature"
},
{
"default": "Sustainable Dyes",
"ai_prompt": "A title describing the fourth displayed product feature"
"ai_prompt": "A title describing the third displayed product feature. The title must have only 2 or 3 words."
}
],
"descriptions": [
{
"default": "With high-quality materials and expert craftsmanship, our products are built to last and exceed your expectations.",
"ai_prompt": "A description of the product"
},
{
"default": "Never worry about the weather again. Keep yourself dry, warm, and looking stylish.",
"ai_prompt": "A description of the first displayed product feature"
},
{
"default": "Our products are made with expert craftsmanship and attention to detail, ensuring that every stitch and seam is perfect.",
"ai_prompt": "A description of the second displayed product feature"
"ai_prompt": "A description of the first displayed product feature. The description must have less than 120 characters."
},
{
"default": "We use only the highest-quality materials in our products, ensuring that they look great and last for years to come.",
"ai_prompt": "A description of the third displayed product feature"
"default": "Our products are made with expert craftsmanship and attention to detail.",
"ai_prompt": "A description of the second displayed product feature. The description must have less than 120 characters."
},
{
"default": "From bold prints and colors to intricate details and textures, our products are a perfect combination of style and function.",
"ai_prompt": "A description of the fourth displayed product feature"
"default": "We use only the highest-quality materials in our products, ensuring that they look great.",
"ai_prompt": "A description of the third displayed product feature. The description must have less than 120 characters."
}
]
}
Expand Down
Loading