diff --git a/assets/src/block-templates/issues/block.json b/assets/src/block-templates/issues/block.json new file mode 100644 index 000000000..59e717453 --- /dev/null +++ b/assets/src/block-templates/issues/block.json @@ -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" } + } +} diff --git a/assets/src/block-templates/issues/index.js b/assets/src/block-templates/issues/index.js new file mode 100644 index 000000000..fb81d977d --- /dev/null +++ b/assets/src/block-templates/issues/index.js @@ -0,0 +1,4 @@ +import metadata from './block.json'; +import template from './template'; + +export { metadata, template }; diff --git a/assets/src/block-templates/issues/template.js b/assets/src/block-templates/issues/template.js new file mode 100644 index 000000000..a84d440c1 --- /dev/null +++ b/assets/src/block-templates/issues/template.js @@ -0,0 +1,115 @@ +import mainThemeUrl from '../main-theme-url'; + +const item = ['core/group', { + className: 'd-flex', + 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 w-40', + url: `${mainThemeUrl}/images/placeholders/placeholder-40x40.jpg`, + alt: __('Enter text', 'planet4-blocks-backend'), + width: 40, + height: 40, + }], + ['core/heading', { + level: 5, + className: 'w-auto', + style: { + typography: { fontSize: '16px' }, + 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; diff --git a/assets/src/block-templates/template-list.js b/assets/src/block-templates/template-list.js index fa2826311..b97bbbd2c 100644 --- a/assets/src/block-templates/template-list.js +++ b/assets/src/block-templates/template-list.js @@ -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, ]; diff --git a/assets/src/styles/blocks/core-overrides/Image.scss b/assets/src/styles/blocks/core-overrides/Image.scss index 8d222a454..015c1d554 100644 --- a/assets/src/styles/blocks/core-overrides/Image.scss +++ b/assets/src/styles/blocks/core-overrides/Image.scss @@ -34,6 +34,10 @@ display: none !important; } + &.w-40 { + width: 40px !important; + } + @include large-and-up { margin-top: $sp-2; margin-bottom: $sp-4; diff --git a/classes/patterns/class-issues.php b/classes/patterns/class-issues.php index 1777132da..78507deaf 100644 --- a/classes/patterns/class-issues.php +++ b/classes/patterns/class-issues.php @@ -9,8 +9,7 @@ namespace P4GBKS\Patterns; /** - * Issues pattern includes: - * Column, Image, Heading, Paragraph, Media & Text. + * Class Issues. * * @package P4GBKS\Patterns */ @@ -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 ' -
- -
-
- ' . __( 'Default image', 'planet4-blocks-backend' ) . ' -
-
- -

-
-
- '; - } - /** * 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' => ' - -
- - -
- - -

' . $title_placeholder . '

- - - -

- - - -
- ' . self::get_media_text_template() . ' - ' . self::get_media_text_template() . ' - ' . self::get_media_text_template() . ' - ' . self::get_media_text_template() . ' -
- - - -
- -
-
- - -
-
+ ', ]; } diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php index 1a31ff9fa..91d331f1b 100644 --- a/planet4-gutenberg-blocks.php +++ b/planet4-gutenberg-blocks.php @@ -208,6 +208,7 @@ 'planet4-block-templates/quick-links', 'planet4-block-templates/deep-dive', 'planet4-block-templates/reality-check', + 'planet4-block-templates/issues', ]; /**