diff --git a/assets/src/block-templates/deep-dive/block.json b/assets/src/block-templates/deep-dive/block.json new file mode 100644 index 0000000000..07d09548e9 --- /dev/null +++ b/assets/src/block-templates/deep-dive/block.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "planet4-block-templates/deep-dive", + "title": "Deep Dive", + "category": "planet4-block-templates", + "icon": "editor-table", + "textdomain": "planet4-blocks-backend", + "attributes": { + "title": { "type": "string" }, + "backgroundColor": { "type": "string" } + } +} diff --git a/assets/src/block-templates/deep-dive/index.js b/assets/src/block-templates/deep-dive/index.js new file mode 100644 index 0000000000..8b8d0ab4e6 --- /dev/null +++ b/assets/src/block-templates/deep-dive/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/deep-dive/template.js b/assets/src/block-templates/deep-dive/template.js new file mode 100644 index 0000000000..43930a4d69 --- /dev/null +++ b/assets/src/block-templates/deep-dive/template.js @@ -0,0 +1,54 @@ +import mainThemeUrl from '../main-theme-url'; + +const {__} = wp.i18n; + +const topic = ['core/column', {}, [ + ['core/group', {className: 'group-stretched-link'}, [ + ['core/image', { + align: 'center', + className: 'force-no-lightbox force-no-caption is-style-rounded-180', + url: `${mainThemeUrl}/images/placeholders/placeholder-180x180.jpg`, + height: '180px', + width: '180px', + }], + ['core/heading', { + level: 5, + textAlign: 'center', + style: {typography: {fontSize: '1rem'}}, + className: 'is-style-chevron', + placeholder: __('Enter topic', 'planet4-blocks-backend'), + }], + ['core/spacer', {height: '16px'}], + ]], +]]; + +const innerBlocks = ({ + title = '', +}) => ([ + ['core/group', {className: 'container'}, [ + ['core/spacer', {height: '24px'}], + ['core/heading', { + textAlign: 'center', + placeholder: __('Enter title', 'planet4-blocks-backend'), + content: title, + }], + ['core/columns', {}, [...Array(4).keys()].map(() => topic)], + ]], +]); + +const template = ({ + title = '', + backgroundColor = 'beige-100', +}) => ([ + [ + 'core/group', + { + className: 'block', + align: 'full', + backgroundColor, + }, + innerBlocks({title}), + ], +]); + +export default template; diff --git a/assets/src/block-templates/template-list.js b/assets/src/block-templates/template-list.js index 102563cf25..037dc5908c 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 issues from './issues'; import * as realityCheck from './reality-check'; import * as quickLinks from './quick-links'; +import * as deepDive from './deep-dive'; export default [ sideImgTextCta, issues, realityCheck, quickLinks, + deepDive, ]; diff --git a/assets/src/scss/editorOverrides.scss b/assets/src/scss/editorOverrides.scss index cb94998234..7928f442c2 100644 --- a/assets/src/scss/editorOverrides.scss +++ b/assets/src/scss/editorOverrides.scss @@ -31,20 +31,6 @@ @include table; } -.wp-block-image { - display: table; - - // Mimics the behavior of WP's native '.is-resized' CSS class - .editor-rich-text.block-editor-rich-text { - display: table-caption; - caption-side: bottom; - - figcaption { - display: block; - } - } -} - .components-panel__body label { font-size: 13px; } diff --git a/src/Patterns/BlockPattern.php b/src/Patterns/BlockPattern.php index eaaeba8220..f5a1128c09 100644 --- a/src/Patterns/BlockPattern.php +++ b/src/Patterns/BlockPattern.php @@ -45,6 +45,7 @@ public static function get_list(): array Issues::class, RealityCheck::class, QuickLinks::class, + DeepDive::class, ]; } diff --git a/src/Patterns/DeepDive.php b/src/Patterns/DeepDive.php new file mode 100644 index 0000000000..803eb9a18e --- /dev/null +++ b/src/Patterns/DeepDive.php @@ -0,0 +1,42 @@ + 'Deep Dive', + 'categories' => [ 'planet4' ], + 'content' => ' + + ', + ]; + } +}