Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert Issues pattern to a block template #988

Merged
merged 3 commits into from
Jan 16, 2023
Merged

Convert Issues pattern to a block template #988

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2dbd4f1
Convert Issues pattern into a block template
dantovbein Dec 26, 2022
5ba2ac6
Follow up Review
dantovbein Jan 13, 2023
1c49630
Follow up review
dantovbein Jan 16, 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
12 changes: 12 additions & 0 deletions assets/src/block-templates/issues/block.json
View file
Open in desktop
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
Open in desktop
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 };
113 changes: 113 additions & 0 deletions assets/src/block-templates/issues/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import mainThemeUrl from '../main-theme-url';

const item = ['core/group', {
className: 'd-flex',
mleray marked this conversation as resolved.
Show resolved Hide resolved
backgroundColor: 'white',
style: {
border: { radius:'4px' },
GP-Dan-Tovbein marked this conversation as resolved.
Show resolved Hide resolved
spacing: {
padding: {
top:'32px',
right:'16px',
bottom:'32px',
left:'16px',
}
},
},
layout: {
mleray marked this conversation as resolved.
Show resolved Hide resolved
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: '16px' },
GP-Dan-Tovbein marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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