Skip to content

Commit c40f244

Browse files
GP-Dan-Tovbeindantovbein
GP-Dan-Tovbein
and
dantovbein
authored
Convert Issues pattern to a block template (#988)
* Convert Issues pattern into a block template - Improve styles - New class for square images Co-authored-by: Dan Tovbein <dtovbein@gmail.com>
1 parent f7fe915 commit c40f244

File tree

8 files changed

+163
-63
lines changed

8 files changed

+163
-63
lines changed

‎assets/src/block-templates/issues/block.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 2,
4+
"name": "planet4-block-templates/issues",
5+
"title": "Issues",
6+
"category": "planet4-block-templates",
7+
"icon": "editor-table",
8+
"textdomain": "planet4-blocks-backend",
9+
"attributes": {
10+
"backgroundColor": { "type": "string" }
11+
}
12+
}

‎assets/src/block-templates/issues/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import metadata from './block.json';
2+
import template from './template';
3+
4+
export { metadata, template };

‎assets/src/block-templates/issues/template.js

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import mainThemeUrl from '../main-theme-url';
2+
3+
const item = ['core/group', {
4+
backgroundColor: 'white',
5+
style: {
6+
border: { radius: '4px' },
7+
spacing: {
8+
padding: {
9+
top: '32px',
10+
right: '16px',
11+
bottom: '32px',
12+
left: '16px',
13+
}
14+
},
15+
},
16+
layout: {
17+
type: 'flex',
18+
flexWrap: 'nowrap',
19+
justifyContent: 'left',
20+
orientation: 'horizontal',
21+
},
22+
}, [
23+
['core/image', {
24+
className: 'force-no-lightbox force-no-caption my-0 square-40',
25+
url: `${mainThemeUrl}/images/placeholders/placeholder-40x40.jpg`,
26+
alt: __('Enter text', 'planet4-blocks-backend'),
27+
}],
28+
['core/heading', {
29+
level: 5,
30+
className: 'w-auto',
31+
style: {
32+
typography: { fontSize: '1rem' },
33+
spacing: {
34+
margin: { top: '0px', bottom: '0px', left: '16px' },
35+
},
36+
},
37+
textAlign: 'left',
38+
placeholder: __('Enter text', 'planet4-blocks-backend')
39+
}]
40+
]];
41+
42+
const template = ({
43+
backgroundColor = 'grey-05',
44+
}) => ([
45+
[ 'core/group', {
46+
align: 'full',
47+
backgroundColor,
48+
className: 'block',
49+
style: {
50+
spacing: {
51+
padding: {
52+
top: '80px',
53+
bottom: '80px',
54+
},
55+
},
56+
},
57+
},
58+
[
59+
[ 'core/group', {
60+
className: 'container',
61+
}, [
62+
[ 'core/heading', {
63+
level: 2,
64+
placeholder: __( 'Enter title', 'planet4-blocks-backend' ),
65+
style: {
66+
spacing: {
67+
margin: {
68+
bottom: '24px',
69+
},
70+
},
71+
},
72+
textAlign: 'center',
73+
}
74+
],
75+
[ 'core/paragraph', {
76+
className: 'my-0',
77+
placeholder: __( 'Enter description', 'planet4-blocks-backend' ),
78+
align: 'center',
79+
},
80+
],
81+
[ 'core/group', {
82+
className: 'is-style-space-evenly',
83+
layout: {
84+
type: 'flex',
85+
allowOrientation: false,
86+
},
87+
style: {
88+
spacing: {
89+
padding: {
90+
top: '40px',
91+
bottom: '56px',
92+
},
93+
},
94+
},
95+
},
96+
[...Array(4).keys()].map(() => item)
97+
],
98+
[ 'core/buttons', {
99+
layout: {
100+
type: 'flex',
101+
justifyContent: 'center',
102+
},
103+
}, [
104+
[ 'core/button', { placeholder: __( 'Enter text', 'planet4-blocks-backend' ) } ]]],
105+
],
106+
],
107+
],
108+
],
109+
]
110+
);
111+
112+
export default template;

‎assets/src/block-templates/template-list.js

+2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import * as sideImgTextCta from './side-image-with-text-and-cta';
22
import * as quickLinks from './quick-links';
33
import * as deepDive from './deep-dive';
44
import * as realityCheck from './reality-check';
5+
import * as issues from './issues';
56

67
export default [
78
sideImgTextCta,
89
quickLinks,
910
deepDive,
1011
realityCheck,
12+
issues,
1113
];

‎assets/src/components/Image/ImageBlockEdit.js

+12-5
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const ImageBlockEdit = (BlockEdit) => {
1212
}
1313

1414
const { attributes, clientId } = props;
15-
const { id, caption, className } = attributes;
15+
const { id, caption, className = '' } = attributes;
1616

1717
// Get image data
1818
const image = useSelect(select => id ? select('core').getMedia(id) : null);
@@ -24,11 +24,18 @@ export const ImageBlockEdit = (BlockEdit) => {
2424
const block_id = clientId ? `block-${clientId}` : null;
2525

2626
// Update width and height when sized rounded styles are selected
27-
if (className && className.includes('is-style-rounded-')) {
27+
if (className.includes('is-style-rounded-')) {
2828
const classes = className.split(' ');
29-
const size = classes.find(c => c.includes('is-style-rounded-')).replace('is-style-rounded-', '');
30-
attributes.width = parseInt(size) || 180;
31-
attributes.height = parseInt(size) || 180;
29+
const size = classes.find(c => c.includes('is-style-rounded-')).replace('is-style-rounded-', '') || 180;
30+
attributes.width = parseInt(size);
31+
attributes.height = parseInt(size);
32+
}
33+
34+
// Force to use square images when the class `square-*` is added
35+
if (className.includes('square-')) {
36+
const size = className.slice(className.search('square-') + 'square-'.length).split(' ')[0] || 180;
37+
attributes.width = parseInt(size);
38+
attributes.height = parseInt(size);
3239
}
3340

3441
return (

‎assets/src/styles/blocks/core-overrides/Image.scss

+18
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,18 @@
1111
}
1212
}
1313

14+
@mixin square-image-size($size) {
15+
figure,
16+
img {
17+
height: #{$size};
18+
width: #{$size};
19+
}
20+
21+
img {
22+
object-fit: cover;
23+
}
24+
}
25+
1426
.wp-block-image {
1527
position: relative;
1628
width: auto;
@@ -34,6 +46,12 @@
3446
display: none !important;
3547
}
3648

49+
&.square {
50+
&-40 {
51+
@include square-image-size(40px);
52+
}
53+
}
54+
3755
@include large-and-up {
3856
margin-top: $sp-2;
3957
margin-bottom: $sp-4;

‎classes/patterns/class-issues.php

+2-58
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
namespace P4GBKS\Patterns;
1010

1111
/**
12-
* Issues pattern includes:
13-
* Column, Image, Heading, Paragraph, Media & Text.
12+
* Class Issues.
1413
*
1514
* @package P4GBKS\Patterns
1615
*/
@@ -23,72 +22,17 @@ public static function get_name(): string {
2322
return 'p4/issues';
2423
}
2524

26-
/**
27-
* Returns the template for one media-text.
28-
*/
29-
public static function get_media_text_template(): string {
30-
$media_link = esc_url( get_template_directory_uri() ) . '/images/placeholders/placeholder-40x40.jpg';
31-
32-
return '<!-- wp:group {"className":"d-flex has-white-background-color has-background","style":{"border":{"radius":"4px"},"spacing":{"padding":{"top":"32px","right":"16px","bottom":"32px","left":"16px"}}},"backgroundColor":"white"} -->
33-
<div class="d-flex wp-block-group has-white-background-color has-background" style="border-radius:4px;padding-top:32px;padding-right:16px;padding-bottom:32px;padding-left:16px">
34-
<!-- wp:media-text {"mediaLink":"' . $media_link . '","mediaType":"image","mediaWidth":14,"mediaSizeSlug":"thumbnail","isStackedOnMobile":false,"imageFill":false,"className":"w-100 force-no-lightbox"} -->
35-
<div class="wp-block-media-text w-100 force-no-lightbox" style="grid-template-columns:14% auto">
36-
<figure class="wp-block-media-text__media">
37-
<img src="' . $media_link . '" alt="' . __( 'Default image', 'planet4-blocks-backend' ) . '"/>
38-
</figure>
39-
<div class="wp-block-media-text__content">
40-
<!-- wp:heading {"level":4,"className":"mb-0","placeholder":"' . __( 'Enter text', 'planet4-blocks-backend' ) . '","style":{"typography":{"fontSize":"1rem"}}} -->
41-
<h4 class="mb-0" style="font-size:1rem"></h4>
42-
<!-- /wp:heading --></div></div>
43-
<!-- /wp:media-text --></div>
44-
<!-- /wp:group -->';
45-
}
46-
4725
/**
4826
* Returns the pattern config.
4927
*
5028
* @param array $params Optional array of parameters for the config.
5129
*/
5230
public static function get_config( $params = [] ): array {
53-
$classname = self::get_classname();
54-
$title_placeholder = $params['title_placeholder'] ?? '';
55-
5631
return [
5732
'title' => 'Issues',
5833
'categories' => [ 'planet4' ],
5934
'content' => '
60-
<!-- wp:group {"className":"' . $classname . '","align":"full","backgroundColor":"grey-05","style":{"spacing":{"padding":{"top":"80px","bottom":"80px"}}}} -->
61-
<div class="wp-block-group ' . $classname . ' alignfull has-grey-05-background-color has-background" style="padding-top:80px;padding-bottom:80px;">
62-
63-
<!-- wp:group {"className":"container"} -->
64-
<div class="wp-block-group container">
65-
66-
<!-- wp:heading {"textAlign":"center","level":2, "placeholder":"' . __( 'Enter title', 'planet4-blocks-backend' ) . '","style":{"spacing":{"margin":{"bottom":"24px"}}}} -->
67-
<h2 class="has-text-align-center" style="margin-bottom:24px">' . $title_placeholder . '</h2>
68-
<!-- /wp:heading -->
69-
70-
<!-- wp:paragraph {"className":"mb-0","align":"center", "placeholder":"' . __( 'Enter description', 'planet4-blocks-backend' ) . '"} -->
71-
<p class="mb-0 has-text-align-center"></p>
72-
<!-- /wp:paragraph -->
73-
74-
<!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","bottom":"56px"}}},"className":"is-style-space-evenly","layout":{"type":"flex","allowOrientation":false}} -->
75-
<div class="wp-block-group is-style-space-evenly" style="padding-top:40px;padding-bottom:56px;">
76-
' . self::get_media_text_template() . '
77-
' . self::get_media_text_template() . '
78-
' . self::get_media_text_template() . '
79-
' . self::get_media_text_template() . '
80-
</div>
81-
<!-- /wp:group -->
82-
83-
<!-- wp:buttons {"placeholder":"' . __( 'Enter text', 'planet4-blocks-backend' ) . '","layout":{"type":"flex","justifyContent":"center"}} -->
84-
<div class="wp-block-buttons">
85-
<!-- wp:button -->
86-
<div class="wp-block-button is-style-secondary"><a class="wp-block-button__link"></a></div>
87-
<!-- /wp:button --></div>
88-
<!-- /wp:buttons -->
89-
90-
</div><!-- /wp:group -->
91-
</div><!-- /wp:group -->
35+
<!-- wp:planet4-block-templates/issues ' . wp_json_encode( $params, \JSON_FORCE_OBJECT ) . ' /-->
9236
',
9337
];
9438
}

‎planet4-gutenberg-blocks.php

+1
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@
208208
'planet4-block-templates/quick-links',
209209
'planet4-block-templates/deep-dive',
210210
'planet4-block-templates/reality-check',
211+
'planet4-block-templates/issues',
211212
];
212213

213214
/**

0 commit comments

Comments
 (0)