diff --git a/blocks/post-item/block.json b/blocks/post-item/block.json new file mode 100644 index 00000000..b8e25c19 --- /dev/null +++ b/blocks/post-item/block.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "wp-newsletter-builder/post-item", + "version": "0.1.0", + "title": "Newsletter Post Item", + "category": "design", + "icon": "editor-table", + "description": "Displays a post block inside a table cell.", + "textdomain": "wp-newsletter-builder", + "editorScript": "file:index.ts", + "editorStyle": "file:index.css", + "style": [ + "file:style-index.css" + ], + "render": "file:render.php" +} diff --git a/blocks/post-item/edit.tsx b/blocks/post-item/edit.tsx new file mode 100644 index 00000000..64765758 --- /dev/null +++ b/blocks/post-item/edit.tsx @@ -0,0 +1,47 @@ +/** + * React hook that is used to mark the block wrapper element. + * It provides all the necessary props like the class name. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops + */ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +/** + * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. + * Those files can contain any CSS code that gets applied to the editor. + * + * @see https://www.npmjs.com/package/@wordpress/scripts#using-css + */ +// Uncomment the following line if styles are added. +// import './index.scss'; + +/** + * The edit function describes the structure of your block in the context of the + * editor. This represents what the editor will render when the block is used. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit + * + * @return {WPElement} Element to render. + */ +const MY_TEMPLATE = [ + ['wp-newsletter-builder/post', { + showContent: false, + showExcerpt: false, + showByline: false, + showCta: false, + order: ['image', 'title', 'excerpt', 'content', 'byline'], + }], +]; + +export default function Edit() { + return ( + + + + ); +} diff --git a/blocks/post-item/index.php b/blocks/post-item/index.php new file mode 100644 index 00000000..6f975d3d --- /dev/null +++ b/blocks/post-item/index.php @@ -0,0 +1,21 @@ + { + const blockProps = useBlockProps.save(); + return ( + + {/* @ts-ignore */} + + + ); + }, + }, +); diff --git a/blocks/post-item/render.php b/blocks/post-item/render.php new file mode 100644 index 00000000..ae0fe7c0 --- /dev/null +++ b/blocks/post-item/render.php @@ -0,0 +1,14 @@ +. + * @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered. + * + * @package wp-newsletter-builder + */ + +?> + ) : null} { postId || editPostType === 'nb_template' ? ( - + // Role='presentation' tells AT table is for layout only so table semantics are ignored. + + + + {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} + + + +
+ +
) : null} {/* @ts-ignore */} diff --git a/blocks/post/index.tsx b/blocks/post/index.tsx index 058d694b..be29d60d 100644 --- a/blocks/post/index.tsx +++ b/blocks/post/index.tsx @@ -34,10 +34,14 @@ registerBlockType( save: () => { const blockProps = useBlockProps.save(); return ( -
- {/* @ts-ignore */} - -
+ + + + {/* @ts-ignore */} + + + +
); }, }, diff --git a/blocks/post/style.scss b/blocks/post/style.scss index 61dc69df..fa2688b7 100644 --- a/blocks/post/style.scss +++ b/blocks/post/style.scss @@ -48,10 +48,6 @@ margin: 20px auto; } - .post__dek p { - margin: 20px; - } - .wp-block-button { margin: 20px auto; } diff --git a/blocks/two-up-post/edit.tsx b/blocks/two-up-post/edit.tsx index 88313605..2aafc7c1 100644 --- a/blocks/two-up-post/edit.tsx +++ b/blocks/two-up-post/edit.tsx @@ -23,31 +23,23 @@ import './index.scss'; * @return {WPElement} Element to render. */ const MY_TEMPLATE = [ - ['wp-newsletter-builder/post', { - showContent: false, - showExcerpt: false, - showByline: false, - showCta: false, - order: ['image', 'title', 'excerpt', 'content', 'byline'], - }], - ['wp-newsletter-builder/post', { - showContent: false, - showExcerpt: false, - showByline: false, - showCta: false, - order: ['image', 'title', 'excerpt', 'content', 'byline'], - }], + ['wp-newsletter-builder/post-item', {}], + ['wp-newsletter-builder/post-item', {}], ]; export default function Edit() { return ( -
- -
+ + + + + + +
); } diff --git a/blocks/two-up-post/index.scss b/blocks/two-up-post/index.scss index f5172557..f9276e93 100644 --- a/blocks/two-up-post/index.scss +++ b/blocks/two-up-post/index.scss @@ -11,23 +11,5 @@ > .block-editor-inner-blocks { max-width: initial; width: 100%; - - .block-editor-block-list__layout { - display: flex; - } - } - - div[data-title="Newsletter Single Post"] { - flex: 1 0 50%; - - .block-editor-inner-blocks{ - display: flex; - - // stylelint-disable selector-max-compound-selectors - .block-editor-block-list__layout { - display: flex; - flex-direction: column; - } - } } } diff --git a/blocks/two-up-post/index.tsx b/blocks/two-up-post/index.tsx index f6f23174..cd622326 100644 --- a/blocks/two-up-post/index.tsx +++ b/blocks/two-up-post/index.tsx @@ -36,10 +36,14 @@ registerBlockType( save: () => { const blockProps = useBlockProps.save(); return ( -
- {/* @ts-ignore */} - -
+ + + + {/* @ts-ignore */} + + + +
); }, }, diff --git a/blocks/two-up-post/style.scss b/blocks/two-up-post/style.scss index d996c07a..e5e46562 100644 --- a/blocks/two-up-post/style.scss +++ b/blocks/two-up-post/style.scss @@ -12,25 +12,28 @@ */ .wp-block-wp-newsletter-builder-two-up-post { - display: flex; - flex-direction: row; max-width: 600px; width: 100%; - margin: 20px 0; + + td { + vertical-align: top; + } div.wp-block-wp-newsletter-builder-post { max-width: 300px; padding: 0 10px; - width: 50%; img { height: auto; max-width: 300px; width: 100%; } + } - h3 { - margin-top: 20px; + @media screen and (max-width: 480px) { + td { + display: block; + width: 100%; } } } diff --git a/entries/blocks/index.js b/entries/blocks/index.js index 3479fa83..cc224deb 100644 --- a/entries/blocks/index.js +++ b/entries/blocks/index.js @@ -5,3 +5,5 @@ import '@/scss/core-blocks/image.scss'; import '@/scss/core-blocks/paragraph.scss'; import '@/scss/core-blocks/button.scss'; import '@/scss/core-blocks/separator.scss'; +import '@/scss/core-blocks/list.scss'; +import '@/scss/core-blocks/typography.scss'; diff --git a/plugin.php b/plugin.php index 6e98a210..69942edf 100644 --- a/plugin.php +++ b/plugin.php @@ -3,7 +3,7 @@ * Plugin Name: Newsletter Builder * Plugin URI: https://github.com/alleyinteractive/wp-newsletter-builder * Description: Interface to manage email newsletters - * Version: 0.3.14 + * Version: 0.3.15 * Author: Alley Interactive * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder * Requires at least: 6.2 diff --git a/scss/core-blocks/heading.scss b/scss/core-blocks/heading.scss index 9b299911..3f830a46 100644 --- a/scss/core-blocks/heading.scss +++ b/scss/core-blocks/heading.scss @@ -6,10 +6,14 @@ h6 { font-family: Georgia, serif; font-weight: bold; line-height: 1.3; + + span { + font-family: Georgia, serif; + } } h2 { - font-size: 26px; + font-size: 22px; } h3 { diff --git a/scss/core-blocks/list.scss b/scss/core-blocks/list.scss index 42380f84..c370b95c 100644 --- a/scss/core-blocks/list.scss +++ b/scss/core-blocks/list.scss @@ -1,4 +1,9 @@ -li { +ul, ol { font-family: Georgia, serif; font-size: 16px; + line-height: 1.3; + + span { + font-family: Georgia, serif; + } } diff --git a/scss/core-blocks/paragraph.scss b/scss/core-blocks/paragraph.scss index e1a3efee..b65e713b 100644 --- a/scss/core-blocks/paragraph.scss +++ b/scss/core-blocks/paragraph.scss @@ -2,4 +2,8 @@ p { font-family: Georgia, serif; font-size: 16px; line-height: 1.33; + + span { + font-family: Georgia, serif; + } } diff --git a/scss/core-blocks/typography.scss b/scss/core-blocks/typography.scss new file mode 100644 index 00000000..d749db34 --- /dev/null +++ b/scss/core-blocks/typography.scss @@ -0,0 +1,3 @@ +a, em, s, strong, sup, sub { + font-family: Georgia, serif; +} diff --git a/scss/editor/editor.scss b/scss/editor/editor.scss index b831d470..6bdcf832 100644 --- a/scss/editor/editor.scss +++ b/scss/editor/editor.scss @@ -27,5 +27,6 @@ @import '@/scss/core-blocks/button'; @import '@/scss/core-blocks/separator'; @import '@/scss/core-blocks/list'; + @import '@/scss/core-blocks/typography'; } }