Skip to content

Commit

Permalink
Convert Issues pattern to a block template (#988)
Browse files Browse the repository at this point in the history 
* Convert Issues pattern into a block template

- Improve styles
- New class for square images

Co-authored-by: Dan Tovbein <dtovbein@gmail.com>
  • Loading branch information
@GP-Dan-Tovbein @dantovbein
GP-Dan-Tovbein and dantovbein committed Jan 16, 2023
1 parent f7fe915 commit c40f244
Show file tree
Hide file tree
Showing 8 changed files with 163 additions and 63 deletions.
12 changes: 12 additions & 0 deletions assets/src/block-templates/issues/block.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "planet4-block-templates/issues",
"title": "Issues",
"category": "planet4-block-templates",
"icon": "editor-table",
"textdomain": "planet4-blocks-backend",
"attributes": {
"backgroundColor": { "type": "string" }
}
}
4 changes: 4 additions & 0 deletions assets/src/block-templates/issues/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import metadata from './block.json';
import template from './template';

export { metadata, template };
112 changes: 112 additions & 0 deletions assets/src/block-templates/issues/template.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import mainThemeUrl from '../main-theme-url';

const item = ['core/group', {
backgroundColor: 'white',
style: {
border: { radius: '4px' },
spacing: {
padding: {
top: '32px',
right: '16px',
bottom: '32px',
left: '16px',
}
},
},
layout: {
type: 'flex',
flexWrap: 'nowrap',
justifyContent: 'left',
orientation: 'horizontal',
},
}, [
['core/image', {
className: 'force-no-lightbox force-no-caption my-0 square-40',
url: `${mainThemeUrl}/images/placeholders/placeholder-40x40.jpg`,
alt: __('Enter text', 'planet4-blocks-backend'),
}],
['core/heading', {
level: 5,
className: 'w-auto',
style: {
typography: { fontSize: '1rem' },
spacing: {
margin: { top: '0px', bottom: '0px', left: '16px' },
},
},
textAlign: 'left',
placeholder: __('Enter text', 'planet4-blocks-backend')
}]
]];

const template = ({
backgroundColor = 'grey-05',
}) => ([
[ 'core/group', {
align: 'full',
backgroundColor,
className: 'block',
style: {
spacing: {
padding: {
top: '80px',
bottom: '80px',
},
},
},
},
[
[ 'core/group', {
className: 'container',
}, [
[ 'core/heading', {
level: 2,
placeholder: __( 'Enter title', 'planet4-blocks-backend' ),
style: {
spacing: {
margin: {
bottom: '24px',
},
},
},
textAlign: 'center',
}
],
[ 'core/paragraph', {
className: 'my-0',
placeholder: __( 'Enter description', 'planet4-blocks-backend' ),
align: 'center',
},
],
[ 'core/group', {
className: 'is-style-space-evenly',
layout: {
type: 'flex',
allowOrientation: false,
},
style: {
spacing: {
padding: {
top: '40px',
bottom: '56px',
},
},
},
},
[...Array(4).keys()].map(() => item)
],
[ 'core/buttons', {
layout: {
type: 'flex',
justifyContent: 'center',
},
}, [
[ 'core/button', { placeholder: __( 'Enter text', 'planet4-blocks-backend' ) } ]]],
],
],
],
],
]
);

export default template;
2 changes: 2 additions & 0 deletions assets/src/block-templates/template-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import * as sideImgTextCta from './side-image-with-text-and-cta';
import * as quickLinks from './quick-links';
import * as deepDive from './deep-dive';
import * as realityCheck from './reality-check';
import * as issues from './issues';

export default [
sideImgTextCta,
quickLinks,
deepDive,
realityCheck,
issues,
];
17 changes: 12 additions & 5 deletions assets/src/components/Image/ImageBlockEdit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const ImageBlockEdit = (BlockEdit) => {
}

const { attributes, clientId } = props;
const { id, caption, className } = attributes;
const { id, caption, className = '' } = attributes;

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

// Update width and height when sized rounded styles are selected
if (className && className.includes('is-style-rounded-')) {
if (className.includes('is-style-rounded-')) {
const classes = className.split(' ');
const size = classes.find(c => c.includes('is-style-rounded-')).replace('is-style-rounded-', '');
attributes.width = parseInt(size) || 180;
attributes.height = parseInt(size) || 180;
const size = classes.find(c => c.includes('is-style-rounded-')).replace('is-style-rounded-', '') || 180;
attributes.width = parseInt(size);
attributes.height = parseInt(size);
}

// Force to use square images when the class `square-*` is added
if (className.includes('square-')) {
const size = className.slice(className.search('square-') + 'square-'.length).split(' ')[0] || 180;
attributes.width = parseInt(size);
attributes.height = parseInt(size);
}

return (
Expand Down
18 changes: 18 additions & 0 deletions assets/src/styles/blocks/core-overrides/Image.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,18 @@
}
}

@mixin square-image-size($size) {
figure,
img {
height: #{$size};
width: #{$size};
}

img {
object-fit: cover;
}
}

.wp-block-image {
position: relative;
width: auto;
Expand All @@ -34,6 +46,12 @@
display: none !important;
}

&.square {
&-40 {
@include square-image-size(40px);
}
}

@include large-and-up {
margin-top: $sp-2;
margin-bottom: $sp-4;
Expand Down
60 changes: 2 additions & 58 deletions classes/patterns/class-issues.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
namespace P4GBKS\Patterns;

/**
* Issues pattern includes:
* Column, Image, Heading, Paragraph, Media & Text.
* Class Issues.
*
* @package P4GBKS\Patterns
*/
Expand All @@ -23,72 +22,17 @@ public static function get_name(): string {
return 'p4/issues';
}

/**
* Returns the template for one media-text.
*/
public static function get_media_text_template(): string {
$media_link = esc_url( get_template_directory_uri() ) . '/images/placeholders/placeholder-40x40.jpg';

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"} -->
<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">
<!-- wp:media-text {"mediaLink":"' . $media_link . '","mediaType":"image","mediaWidth":14,"mediaSizeSlug":"thumbnail","isStackedOnMobile":false,"imageFill":false,"className":"w-100 force-no-lightbox"} -->
<div class="wp-block-media-text w-100 force-no-lightbox" style="grid-template-columns:14% auto">
<figure class="wp-block-media-text__media">
<img src="' . $media_link . '" alt="' . __( 'Default image', 'planet4-blocks-backend' ) . '"/>
</figure>
<div class="wp-block-media-text__content">
<!-- wp:heading {"level":4,"className":"mb-0","placeholder":"' . __( 'Enter text', 'planet4-blocks-backend' ) . '","style":{"typography":{"fontSize":"1rem"}}} -->
<h4 class="mb-0" style="font-size:1rem"></h4>
<!-- /wp:heading --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->';
}

/**
* Returns the pattern config.
*
* @param array $params Optional array of parameters for the config.
*/
public static function get_config( $params = [] ): array {
$classname = self::get_classname();
$title_placeholder = $params['title_placeholder'] ?? '';

return [
'title' => 'Issues',
'categories' => [ 'planet4' ],
'content' => '
<!-- wp:group {"className":"' . $classname . '","align":"full","backgroundColor":"grey-05","style":{"spacing":{"padding":{"top":"80px","bottom":"80px"}}}} -->
<div class="wp-block-group ' . $classname . ' alignfull has-grey-05-background-color has-background" style="padding-top:80px;padding-bottom:80px;">
<!-- wp:group {"className":"container"} -->
<div class="wp-block-group container">
<!-- wp:heading {"textAlign":"center","level":2, "placeholder":"' . __( 'Enter title', 'planet4-blocks-backend' ) . '","style":{"spacing":{"margin":{"bottom":"24px"}}}} -->
<h2 class="has-text-align-center" style="margin-bottom:24px">' . $title_placeholder . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"mb-0","align":"center", "placeholder":"' . __( 'Enter description', 'planet4-blocks-backend' ) . '"} -->
<p class="mb-0 has-text-align-center"></p>
<!-- /wp:paragraph -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","bottom":"56px"}}},"className":"is-style-space-evenly","layout":{"type":"flex","allowOrientation":false}} -->
<div class="wp-block-group is-style-space-evenly" style="padding-top:40px;padding-bottom:56px;">
' . self::get_media_text_template() . '
' . self::get_media_text_template() . '
' . self::get_media_text_template() . '
' . self::get_media_text_template() . '
</div>
<!-- /wp:group -->
<!-- wp:buttons {"placeholder":"' . __( 'Enter text', 'planet4-blocks-backend' ) . '","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button is-style-secondary"><a class="wp-block-button__link"></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
</div><!-- /wp:group -->
</div><!-- /wp:group -->
<!-- wp:planet4-block-templates/issues ' . wp_json_encode( $params, \JSON_FORCE_OBJECT ) . ' /-->
',
];
}
Expand Down
1 change: 1 addition & 0 deletions planet4-gutenberg-blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@
'planet4-block-templates/quick-links',
'planet4-block-templates/deep-dive',
'planet4-block-templates/reality-check',
'planet4-block-templates/issues',
];

/**
Expand Down

0 comments on commit c40f244

Please sign in to comment.