Merge pull request #50 from alleyinteractive/feature/issue-48/change-…

…single-post-inner-blocks

Issue-48: Change Newsletter Single Post to use inner blocks

blocks/post-featured-image/block.json

@@ -0,0 +1,28 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wp-newsletter-builder/post-featured-image",
+	"version": "0.1.0",
+	"title": "Newsletter Post Featured Image",
+	"category": "design",
+	"icon": "admin-post",
+	"description": "Displays a post featured image",
+	"textdomain": "wp-newsletter-builder",
+	"editorScript": "file:index.ts",
+	"editorStyle": "file:index.css",
+	"style": [
+		"file:style-index.css"
+	],
+	"render": "file:render.php",
+	"attributes": {
+		"overrideImage": {
+			"type": "number",
+			"default": 0
+		},
+		"smallerFont": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"usesContext": ["postId"]
+}

blocks/post-featured-image/edit.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable camelcase */
+import { usePostById, useMedia, ImagePicker } from '@alleyinteractive/block-editor-tools';
+import { PanelBody, PanelRow } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { WP_REST_API_Post, WP_REST_API_Attachment } from 'wp-types';
+
+import './index.scss';
+
+interface EditProps {
+  attributes: {
+    overrideImage?: number;
+  };
+  context: {
+    postId: number;
+  };
+  setAttributes: (attributes: {}) => void;
+}
+
+/**
+ * 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.
+ */
+export default function Edit({
+  attributes: {
+    overrideImage,
+  },
+  context: {
+    postId,
+  },
+  setAttributes,
+}: EditProps) {
+  // @ts-ignore
+  const record: WP_REST_API_Post = usePostById(postId) ?? null;
+  let featuredMediaId = record ? record.featured_media : null;
+  const postTitle = record ? record.title.rendered : '';
+
+  featuredMediaId = overrideImage || featuredMediaId;
+
+  const media = useMedia(featuredMediaId) as any as WP_REST_API_Attachment;
+
+  const postImage = media ? media.source_url : '';
+
+  return (
+    <>
+      <div {...useBlockProps({ className: 'image-container' })}>
+        <img src={postImage} alt={postTitle} />
+      </div>
+      <InspectorControls>
+        {postId ? (
+          <PanelBody
+            title={__('Override Image', 'wp-newsletter-builder')}
+            initialOpen
+          >
+            {/* @ts-ignore */}
+            <PanelRow>
+              <ImagePicker
+                value={overrideImage ?? 0}
+                onUpdate={({ id }) => setAttributes({ overrideImage: id })}
+                onReset={() => setAttributes({ overrideImage: 0 })}
+              />
+            </PanelRow>
+          </PanelBody>
+        ) : null}
+      </InspectorControls>
+    </>
+  );
+}

blocks/post-featured-image/index.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Block Name: Post.
+ *
+ * @package wp-newsletter-builder
+ */
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function wp_newsletter_builder_post_featured_image_block_init() {
+	// Register the block by passing the location of block.json.
+	register_block_type(
+		__DIR__
+	);
+}
+add_action( 'init', 'wp_newsletter_builder_post_featured_image_block_init' );

blocks/post-featured-image/index.scss

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * All imported CSS files are bundled into one chunk named after the entry point,
+ * which defaults to index.js, and thus the file created becomes index.css.
+ * This is for styles used only in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */

blocks/post-featured-image/render.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * All of the parameters passed to the function where this file is being required are accessible in this scope:
+ *
+ * @param array    $attributes The array of attributes for this block.
+ * @param string   $content    Rendered block output. ie. <InnerBlocks.Content />.
+ * @param WP_Block $block      The instance of the WP_Block class that represents the block being rendered.
+ *
+ * @package wp-newsletter-builder
+ */
+
+$wp_newsletter_builder_block_post = $block->context['postId'] ?? null;
+
+$wp_newsletter_builder_block_post = get_post( $wp_newsletter_builder_block_post );
+if ( empty( $wp_newsletter_builder_block_post ) || ! $wp_newsletter_builder_block_post ) {
+	return;
+}
+$wp_newsletter_builder_post_image = ! empty( $attributes['overrideImage'] ) ? $attributes['overrideImage'] : get_post_thumbnail_id( $wp_newsletter_builder_block_post->ID );
+
+?>
+<a <?php echo wp_kses_data( get_block_wrapper_attributes( [ 'class' => 'post__image-link' ] ) ); ?> href="<?php echo esc_url( get_the_permalink() ); ?>">
+	<?php echo wp_get_attachment_image( $wp_newsletter_builder_post_image, 'full', false, [ 'sizes' => $wp_newsletter_builder_img_sizes ] ); ?>
+</a>

blocks/post-featured-image/style.scss

@@ -0,0 +1,28 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Imported style.css file(s) (applies to SASS and SCSS extensions)
+ * get bundled into one style-index.css file that is meant to be
+ * used both on the front-end and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#block-styles
+ */
+
+a.post__title-link {
+  color: #000;
+  display: block;
+  margin: 20px auto;
+  text-decoration: none;
+
+  h2 {
+    margin-bottom: 0;
+    text-align: center;
+
+    &.post__title--small {
+      font-size: 24px;
+    }
+  }
+}

blocks/post-title/block.json

@@ -0,0 +1,28 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wp-newsletter-builder/post-title",
+	"version": "0.1.0",
+	"title": "Newsletter Post Title",
+	"category": "design",
+	"icon": "admin-post",
+	"description": "Displays a post title",
+	"textdomain": "wp-newsletter-builder",
+	"editorScript": "file:index.ts",
+	"editorStyle": "file:index.css",
+	"style": [
+		"file:style-index.css"
+	],
+	"render": "file:render.php",
+	"attributes": {
+		"overrideTitle": {
+			"type": "string",
+			"default": ""
+		},
+		"smallerFont": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"usesContext": ["postId"]
+}

blocks/post-title/edit.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable camelcase */
+import { usePostById } from '@alleyinteractive/block-editor-tools';
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { WP_REST_API_Post } from 'wp-types';
+
+import './index.scss';
+
+interface EditProps {
+  attributes: {
+    overrideTitle?: string;
+    smallerFont?: boolean;
+  };
+  context: {
+    postId: number;
+  };
+  setAttributes: (attributes: {}) => void;
+}
+
+/**
+ * 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.
+ */
+export default function Edit({
+  attributes: {
+    overrideTitle,
+    smallerFont,
+  },
+  context: {
+    postId,
+  },
+  setAttributes,
+}: EditProps) {
+  // @ts-ignore
+  const record: WP_REST_API_Post = usePostById(postId) ?? null;
+
+  let postTitle = record ? record.title.rendered : __('Post Title', 'wp-newsletter-builder');
+
+  postTitle = overrideTitle || postTitle;
+
+  const titleClass = smallerFont ? 'post__title--small' : '';
+
+  return (
+    <h2 className={titleClass}>
+      <RichText
+        value={postTitle}
+        tagName="span"
+        onChange={(value) => setAttributes({ overrideTitle: value })}
+      />
+    </h2>
+  );
+}

blocks/post-title/index.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Block Name: Post.
+ *
+ * @package wp-newsletter-builder
+ */
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function wp_newsletter_builder_post_title_block_init() {
+	// Register the block by passing the location of block.json.
+	register_block_type(
+		__DIR__
+	);
+}
+add_action( 'init', 'wp_newsletter_builder_post_title_block_init' );

blocks/post-title/index.scss

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * All imported CSS files are bundled into one chunk named after the entry point,
+ * which defaults to index.js, and thus the file created becomes index.css.
+ * This is for styles used only in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */

blocks/post-title/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(
+  /* @ts-expect-error Provided types are inaccurate to the actual plugin API. */
+  metadata,
+  {
+    apiVersion: 2,
+    edit,
+    title: metadata.title,
+  },
+);

blocks/post-title/render.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * All of the parameters passed to the function where this file is being required are accessible in this scope:
+ *
+ * @param array    $attributes The array of attributes for this block.
+ * @param string   $content    Rendered block output. ie. <InnerBlocks.Content />.
+ * @param WP_Block $block      The instance of the WP_Block class that represents the block being rendered.
+ *
+ * @package wp-newsletter-builder
+ */
+
+$wp_newsletter_builder_block_post = $block->context['postId'] ?? null;
+
+$wp_newsletter_builder_block_post = get_post( $wp_newsletter_builder_block_post );
+if ( empty( $wp_newsletter_builder_block_post ) || ! $wp_newsletter_builder_block_post ) {
+	return;
+}
+$wp_newsletter_builder_post_title = ! empty( $attributes['overrideTitle'] ) ? $attributes['overrideTitle'] : $wp_newsletter_builder_block_post->post_title;
+
+$wp_newsletter_builder_smaller_font = $attributes['smallerFont'] ?? false;
+$wp_newsletter_builder_title_class  = $wp_newsletter_builder_smaller_font ? 'post__title--small' : '';
+?>
+<a <?php echo wp_kses_data( get_block_wrapper_attributes( [ 'class' => 'post__title-link' ] ) ); ?> href="<?php echo esc_url( get_the_permalink() ); ?>">
+	<h2 class="<?php echo esc_attr( $wp_newsletter_builder_title_class ); ?>">
+		<?php if ( ! empty( $wp_newsletter_builder_number ) ) : ?>
+			<span class="newsletter-post__number"><?php echo esc_html( $wp_newsletter_builder_number ); ?>.</span>
+		<?php endif; ?>
+		<?php echo esc_html( $wp_newsletter_builder_post_title ); ?>
+	</h2>
+</a>