Skip to content

Commit

Permalink
Issues pattern block
Browse files Browse the repository at this point in the history 
- Implement pattern structure
- Implement Issues block as a second approach
  • Loading branch information
@dantovbein
dantovbein committed Mar 22, 2022
1 parent b366efb commit 313e3bb
Show file tree
Hide file tree
Showing 7 changed files with 362 additions and 0 deletions.
70 changes: 70 additions & 0 deletions assets/src/blocks/Issues/IssuesBlock.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

const { __ } = wp.i18n;

const BLOCK_NAME = 'planet4-blocks/issues';

export const registerBlock = () => {
return registerBlockType(BLOCK_NAME, {
title: 'Issues',
icon: 'feedback',
category: 'planet4-blocks',
supports: {
multiple: false,
html: false,
},
edit: () => {
const blockProps = useBlockProps( { className: 'issues-block' } );
const innerBlocksProps = useInnerBlocksProps(
blockProps,
{
allowedBlocks: [ 'core/group', 'core/columns', 'core/column', 'core/media-text', 'core/paragraph' ],

template: [
[ 'core/group', {}, [
[ 'core/columns', {}, [
[ 'core/column', {}, [
[ 'core/media-text', {} ],
] ],
[ 'core/column', {}, [
[ 'core/media-text', {} ],
] ],
[ 'core/column', {}, [
[ 'core/media-text', {} ],
] ],
[ 'core/column', {}, [
[ 'core/media-text', {} ],
] ],
] ],
[ 'core/columns', {}, [
[ 'core/column', {}, [
[ 'core/media-text', {} ],
] ],
[ 'core/column', {}, [
[ 'core/media-text', {} ],
] ],
[ 'core/column', {}, [
[ 'core/media-text', {} ],
] ],
[ 'core/column', {}, [
[ 'core/media-text', {} ],
] ],
] ],
] ]
],
},
);

return (
<section {...innerBlocksProps} />
);
},
save: () => {
const blockProps = useBlockProps.save( { className: 'issues-block' } );
const innerBlocksProps = useInnerBlocksProps.save( blockProps );

return <section {...innerBlocksProps} />
},
})
}
2 changes: 2 additions & 0 deletions assets/src/editorIndex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { SubPagesBlock } from './blocks/SubPages/SubPagesBlock';
import { blockEditorValidation } from './BlockEditorValidation';
import { registerGuestBookBlock } from './blocks/GuestBook/GuestBookBlock';
import { registerBlock as registerShareButtonsBlock } from './blocks/ShareButtons/ShareButtonsBlock';
import { registerBlock as registerIssuesBlock } from './blocks/Issues/IssuesBlock';

blockEditorValidation();
new ArticlesBlock();
Expand All @@ -39,6 +40,7 @@ registerTakeActionBoxoutBlock();
registerTimelineBlock();
registerGuestBookBlock();
registerShareButtonsBlock();
registerIssuesBlock();

addBlockFilters();
setupImageBlockExtension();
Expand Down
2 changes: 2 additions & 0 deletions assets/src/styles/blocks.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@import "blocks/SplitTwoColumns";
@import "blocks/Submenu";
@import "blocks/Cookies";
@import "blocks/Issues";

@import "blocks/TakeActionBoxout/style";

Expand All @@ -32,3 +33,4 @@
// Other
@import "blocks/WideBlocks";
@import "blocks/Editor";

108 changes: 108 additions & 0 deletions assets/src/styles/blocks/Issues.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
.issues-block-pattern {
padding-top: $sp-5;
padding-bottom: $sp-4;

@include medium-and-up {
padding-top: 80px;
padding-bottom: 80px;
}

.block-editor-block-list__layout {
.wp-block {
max-width: 100% !important;
}
}

.container {
padding: 0 $sp-2;

& > h2 {
font-size: 28px !important;
line-height: 1;
margin-bottom: $sp-3;

@include medium-and-up {
font-size: 40px;
margin-bottom: 0;
}
}

& > p {
margin: $sp-4 0 $sp-5;
padding: 0 10%;
font-family: 20px;
line-height: 28px;

@include mobile-only {
display: none;
}
}
}
}

.issues-block,
.issues-block-pattern {
.wp-block-media-text {
display: flex;
width: 100%;
min-height: 110px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
padding: 0 $sp-2x;
background: $white;

.editor-media-container__resizer,
figure img {
width: 40px !important;
}

.wp-block-media-text__media {
width: auto;
}

.wp-block-media-text__content {
margin-top: 0;
}

.wp-block-media-text__content p {
font-family: $roboto;
font-style: normal;
font-weight: 700;
font-size: 17px !important;
line-height: 20px;
color: $grey-80;
margin-top: 0;
margin-bottom: 0;
}

&.components-placeholder {
min-height: 100% !important;
}

&:not(.has-media-on-the-right) .wp-block-media-text__content {
padding-inline-start: $sp-3;
}
}

.wp-block-columns {
margin-bottom: 0;
flex-wrap: wrap;
}

.wp-block-column {
display: flex;
align-items: center;
margin-bottom: $sp-3;
}

.wp-block-buttons {
margin-top: $sp-4x;

.wp-block-button {
width: 100%;
color: $grey-80;
border-color: $grey-80;
}
}

}
1 change: 1 addition & 0 deletions classes/patterns/class-block-pattern.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ public static function register_all() {

$patterns = [
SideImageWithTextAndCta::class,
Issues::class,
];

/**
Expand Down
176 changes: 176 additions & 0 deletions classes/patterns/class-issues.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<?php
/**
* Issues class.
*
* @package P4GBKS
* @since 0.1
*/

namespace P4GBKS\Patterns;

/**
* Issues pattern includes:
* Column, Image, Heading, Paragraph, Media & Text.
*
* @package P4GBKS\Patterns
*/
class Issues extends Block_Pattern {

/**
* Returns the pattern name.
*/
public static function get_name(): string {
return 'p4/issues';
}

/**
* Returns the pattern config.
*/
public static function get_config(): array {
return [
'title' => __( 'Issues', 'planet4-blocks-backend' ),
'keywords' => [ 'column', 'heading', 'image', 'heading', 'paragraph', 'media', 'text' ],
'categories' => [ 'planet4' ],
'content' => '
<!-- wp:group {"backgroundColor":"grey-10","className":"grey-background"} -->
<div class="issues-block-pattern wp-block-group grey-background has-grey-10-background-color has-background block-wide">
<!-- wp:group -->
<div class="wp-block-group container">
<!-- wp:heading {"textAlign":"center","fontSize":"x-large"} -->
<h2 class="has-text-align-center has-x-large-font-size" id="we-re-fighting-to-save-our-planet">We are fighting to save our planet</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","className":"issues-description","fontSize":"medium"} -->
<p class="has-text-align-center issues-description has-medium-font-size">Rising sea levels, more extreme weather events, loss of biodiversity. Our climate is breaking down and destructive industries continue to threaten our forests, oceans and air. But together we can overcome these challenges.</p>
<!-- /wp:paragraph -->
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"></figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Description","style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"></figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Description","style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"></figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Description","style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"></figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Description","style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
</div>
<!-- /wp:column -->
<!-- /wp:columns --></div>
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"></figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Description","style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"></figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Description","style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"></figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Description","style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"></figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Description","style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
</div>
<!-- /wp:column -->
<!-- /wp:columns --></div>
<!-- /wp:group -->
<!-- wp:planet4-blocks/issues --><!-- /wp:planet4-blocks/issues -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal","flexWrap":"wrap"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"black","align":"center","fontSize":"medium"} -->
<div class="wp-block-button aligncenter has-custom-font-size is-style-secondary has-medium-font-size"><a class="wp-block-button__link has-black-color has-text-color">Learn more about our campaigns</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
',
];
}
}
Loading

0 comments on commit 313e3bb

Please sign in to comment.