Added dswp-horizontal-card-large-img-left pattern, updated placeholde…

…r images.

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Added card-with-hyperlink-list pattern
 - Added horizontal-card pattern
 - Added icon-with-excerpt pattern
+- Added dswp-horizontal-card-large-img-left pattern
 
 ## 1.3.0 October 15, 2024
 

dist/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '1c93ac8929e6033b38e3');
+<?php return array('dependencies' => array(), 'version' => '08505d0790fee320140f');

functions.php

@@ -7,10 +7,13 @@
 function design_system_public_enqueue_global_styles() {
     $version = filemtime( get_template_directory() . '/dist/index.css' );
     wp_enqueue_style( 'design-system-styles', get_template_directory_uri() . '/dist/index.css', array(), $version );
+    add_editor_style( 'design-system-styles', get_template_directory_uri() . '/dist/index.css', array(), $version );
 }
 
 add_action( 'enqueue_block_assets', 'design_system_public_enqueue_global_styles' );
 add_action( 'admin_enqueue_scripts', 'design_system_public_enqueue_global_styles' );
+
+
 /**
  * Enqueues the main scripts file.
  */

patterns/dswp-horizontal-card-large-img-left.php

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Title: DSWP Horizontal Card Large Img - Left
+ * Slug: design-system-wordpress-theme/dswp-horizontal-card-large-img-left
+ * Categories: text
+ *
+ * @package Design-System-WordPress-Theme
+ */
+?>
+
+<!-- wp:group {"templateLock":false,"lock":{"move":false,"remove":false},"metadata":{"categories":["text"],"patternName":"design-system-wordpress-theme/dswp-horizontal-card","name":"DSWP Horizontal Card"},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:columns {"templateLock":false,"lock":{"move":false,"remove":false},"align":"wide","className":"dswp-horizontal-card-large-img-left","style":{"border":{"width":"0px","style":"none"}}} -->
+<div class="wp-block-columns alignwide dswp-horizontal-card-large-img-left" style="border-style:none;border-width:0px"><!-- wp:column {"verticalAlignment":"top","width":"40%","templateLock":false,"lock":{"move":false,"remove":false},"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-column is-vertically-aligned-top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:40%"><!-- wp:image {"id":15586,"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-512.png' ); ?>" alt=""/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"stretch","width":"60%","style":{"spacing":{"padding":{"top":"0","bottom":"0","right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-column is-vertically-aligned-stretch" style="padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40);flex-basis:60%"><!-- wp:spacer {"height":"1rem"} -->
+<div style="height:1rem" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading {"level":5,"className":"is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|typography-primary-color"}}}},"textColor":"typography-primary-color"} -->
+<h5 class="wp-block-heading is-style-default has-typography-primary-color-color has-text-color has-link-color" style="margin-top:0;margin-bottom:0">Neque porro quisquam</h5>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Sed bibendum posuere metus, et tincidunt dui aliquam et. Donec eu dolor elit. Vestibulum sit amet tempor metus, id dignissim turpis. In hac habitasse platea dictumst. Curabitur hendrerit nibh sit amet consectetur tempus. Integer vitae turpis at lorem placerat tempor ac a felis.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Sed bibendum posuere metus, et tincidunt dui aliquam et. Donec eu dolor elit. Vestibulum sit amet tempor metus, id dignissim turpis. In hac habitasse platea dictumst. Curabitur hendrerit nibh sit amet consectetur tempus. Integer vitae turpis at lorem placerat tempor ac a felis.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Sed bibendum posuere metus, et tincidunt dui aliquam et. Donec eu dolor elit. Vestibulum sit amet tempor metus, id dignissim turpis. In hac habitasse platea dictumst. Curabitur hendrerit nibh sit amet consectetur tempus. Integer vitae turpis at lorem placerat tempor ac a felis.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":"20px"} -->
+<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Lorem Ipsum</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->
+
+<!-- wp:spacer {"height":"20px"} -->
+<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

patterns/dswp-icon-with-excerpt.php

@@ -15,7 +15,7 @@
 <div class="wp-block-column"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 <div class="wp-block-group" style="padding-top:0;padding-bottom:0"><!-- wp:image {"id":15470,"className":"size-full is-resized is-style-rounded"} -->
-<figure class="wp-block-image size-full is-resized is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/gray-square.png' ); ?>" alt=""/></figure>
+<figure class="wp-block-image size-full is-resized is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-256.png' ); ?>" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:heading {"level":5,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
@@ -35,7 +35,7 @@
 <div class="wp-block-column"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 <div class="wp-block-group" style="padding-top:0;padding-bottom:0"><!-- wp:image {"id":15470,"className":"size-full is-resized is-style-rounded"} -->
-<figure class="wp-block-image size-full is-resized is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/gray-square.png' ); ?>" alt=""/></figure>
+<figure class="wp-block-image size-full is-resized is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-256.png' ); ?>" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:heading {"level":5,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->

src/styles/index.scss

@@ -5,4 +5,4 @@
 @import "./block-overrides";
 @import "./patterns/dswp-large-image-text";
 @import "./patterns/dswp-icon-with-excerpt";
-@import "./patterns/dswp-horizontal-card-img-1-to-3";
+@import "./patterns/dswp-horizontal-card-large-img-left";

src/styles/patterns/dswp-horizontal-card-img-1-to-3.scss → src/styles/patterns/dswp-horizontal-card-large-img-left.scss

@@ -1,6 +1,6 @@
 @media (max-width: $break-medium) {
 
-	.dswp-horizontal-card-img-1-to-3 {
+	.dswp-horizontal-card-large-img-left {
 
 		img {
 			width: 100% !important;
@@ -9,8 +9,7 @@
 	}
 }
 
-.dswp-horizontal-card-img-1-to-3 {
-	// Base styles
+.dswp-horizontal-card-large-img-left {
 	transition: box-shadow 0.3s ease-in;
 
 	&:hover {
@@ -24,16 +23,20 @@
 	border-radius: 8px;
 	overflow: hidden;
 	border: 1px solid var(--dswp-surface-color-border-default) !important;
-	display: flex;
 
+	.wp-block-column:first-child {
+		align-self: inherit;
 
-	.wp-block-column {
-
-		figure {
-			margin: 0;
-			top: 0;
-			left: 0;
+		figure,
+		.components-resizable-box__container {
+			display: flex;
 			height: 100%;
+			margin: 0;
+		}
+
+		.components-resizable-box__container {
+			flex-shrink: inherit !important;
+			display: inherit !important;
 		}
 
 		img {