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..d6b385aff --- /dev/null +++ b/assets/src/block-templates/issues/template.js @@ -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; 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/components/Image/ImageBlockEdit.js b/assets/src/components/Image/ImageBlockEdit.js index 3311017a4..e9f43942c 100644 --- a/assets/src/components/Image/ImageBlockEdit.js +++ b/assets/src/components/Image/ImageBlockEdit.js @@ -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); @@ -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 ( diff --git a/assets/src/styles/blocks/core-overrides/Image.scss b/assets/src/styles/blocks/core-overrides/Image.scss index 8d222a454..8a0fdfbc7 100644 --- a/assets/src/styles/blocks/core-overrides/Image.scss +++ b/assets/src/styles/blocks/core-overrides/Image.scss @@ -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; @@ -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; 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 ' -