Add new art casting block

build/feedland-art/block.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "feedland/art",
+  "version": "0.1.0",
+  "title": "FeedLand Artcasting",
+  "category": "art",
+  "icon": "rss",
+  "description": "Displays entries from FeedLand.",
+  "example": {},
+  "supports": {
+    "align": true,
+    "html": false
+  },
+  "textdomain": "feedland",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css",
+  "render": "file:./render.php",
+  "attributes": {
+    "readingListUrl": {
+      "type": "string",
+      "default": "https://lists.feedcorps.org/artshow.opml"
+    },
+    "itemsToShow": {
+      "type": "number",
+      "default": 5
+    }
+  }
+}

build/index.asset.php → build/feedland-art/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-server-side-render'), 'version' => '0316aaf3bc83e0522b00');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-server-side-render'), 'version' => 'f17fc4504b3661c93502');

build/feedland-art/render.php

@@ -0,0 +1,45 @@
+<?php
+
+$transient_key = sprintf( 'feedland_art_%1$s', md5( $attributes['readingListUrl'] ) );
+
+if ( false === ( $response = get_transient( $transient_key ) ) ) {
+	$response = wp_remote_get( sprintf( 'https://feedland.com/getriverfromreadinglist?url=%1$s', $attributes['readingListUrl'] ) );
+
+	if ( wp_remote_retrieve_response_code( $response ) === 500 ) {
+		printf(
+			'<div class="wp-block-feedland-art__error">%s</div>',
+			esc_html__( 'Error loading feed.', 'feedland' )
+		);
+		return;
+	} else {
+		set_transient( $transient_key, $response, MINUTE_IN_SECONDS );
+	}
+}
+
+$body       = json_decode( wp_remote_retrieve_body( $response ) );
+$feed_items = array_slice( array_merge( ...wp_list_pluck( $body->feeds, 'items' ) ), 0, $attributes['itemsToShow'] );
+$list_items = '';
+
+foreach ( $feed_items as $item ) {
+	$title = esc_html( trim( wp_strip_all_tags( substr( $item->description, 0, strpos( $item->description, '<a' ) ) ) ) );
+
+	if ( empty( $title ) ) {
+		$title = esc_html__( '(no title)', 'feedland' );
+	}
+
+	$enclosure = '';
+	if ( $item->enclosure ) {
+		$enclosure = sprintf(
+			'<figure class="wp-block-image size-large"><img src="%1$s" alt="%2$s" /><figcaption class="wp-element-caption">%2$s</figcaption></figure>',
+			esc_url( $item->enclosure->url ),
+			esc_attr( $title ),
+			esc_html( $title )
+		);
+	}
+
+	$list_items .= "{$enclosure}";
+}
+
+$wrapper_attributes = get_block_wrapper_attributes();
+
+printf( '<div %1$s><figure class="wp-block-gallery has-nested-images columns-default is-cropped is-layout-flex wp-block-gallery-is-layout-flex">%2$s</figure></div>', $wrapper_attributes, $list_items );

build/feedland-art/style-index.css

@@ -0,0 +1 @@
+.wp-block-feedland-art{list-style:none;padding:0}

build/feedland-category/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-server-side-render'), 'version' => '904b201b201e51a002d4');

feedland.php

@@ -4,7 +4,7 @@
  * Description:       Displays your FeedLand items.
  * Requires at least: 6.1
  * Requires PHP:      7.0
- * Version:           0.1.0
+ * Version:           0.1.1
  * Author:            WordPress.com Special Projects
  * Author URI:        https://wpspecialprojects.wordpress.com
  * License:           GPL-2.0-or-later
@@ -26,6 +26,7 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function feedland_block_init() {
-	register_block_type( __DIR__ . '/build' );
+	register_block_type( __DIR__ . '/build/feedland-category' );
+	register_block_type( __DIR__ . '/build/feedland-art' );
 }
 add_action( 'init', 'feedland_block_init' );

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "feedland",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "A custom block to display your FeedLand feed on your site.",
 	"author": {
 		"name": "WordPress.com Special Projects Team",

src/feedland-art/block.json

@@ -0,0 +1,30 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "feedland/art",
+	"version": "0.1.0",
+	"title": "FeedLand Artcasting",
+	"category": "art",
+	"icon": "rss",
+	"description": "Displays entries from FeedLand.",
+	"example": {},
+	"supports": {
+		"align": true,
+		"html": false
+	},
+	"textdomain": "feedland",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php",
+	"attributes": {
+		"readingListUrl": {
+			"type": "string",
+			"default": "https://lists.feedcorps.org/artshow.opml"
+		},
+		"itemsToShow": {
+			"type": "number",
+			"default": 5
+		}
+	}
+}

src/feedland-art/edit.js

@@ -0,0 +1,125 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import {
+	Button,
+	Disabled,
+	PanelBody,
+	Placeholder,
+	RangeControl,
+	ToolbarGroup,
+	__experimentalHStack as HStack,
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { edit, rss } from '@wordpress/icons';
+import ServerSideRender from '@wordpress/server-side-render';
+
+const DEFAULT_MIN_ITEMS = 1;
+const DEFAULT_MAX_ITEMS = 20;
+
+export default function Edit( { attributes, setAttributes } ) {
+	const [ isEditing, setIsEditing ] = useState( ! attributes.readingListUrl );
+
+	const { readingListUrl, itemsToShow } = attributes;
+
+	function toggleAttribute( propName ) {
+		return () => {
+			const value = attributes[ propName ];
+
+			setAttributes( { [ propName ]: ! value } );
+		};
+	}
+
+	function onSubmitURL( event ) {
+		event.preventDefault();
+
+		if ( readingListUrl ) {
+			setAttributes( { readingListUrl: readingListUrl } );
+			setIsEditing( false );
+		}
+	}
+
+	const blockProps = useBlockProps();
+
+	if ( isEditing ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder icon={ rss } label="FeedLand">
+					<form
+						onSubmit={ onSubmitURL }
+						className="wp-block-feedland-art__placeholder-form"
+					>
+						<HStack wrap>
+							<InputControl
+								__next40pxDefaultSize
+								placeholder={ __(
+									'Enter reading list URL here…',
+									'feedland'
+								) }
+								value={ readingListUrl }
+								onChange={ ( value ) =>
+									setAttributes( { readingListUrl: value } )
+								}
+								className="wp-block-feedland-art__placeholder-input"
+							/>
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								type="submit"
+							>
+								{ __( 'Done', 'feedland' ) }
+							</Button>
+						</HStack>
+					</form>
+				</Placeholder>
+			</div>
+		);
+	}
+
+	const toolbarControls = [
+		{
+			icon: edit,
+			title: __( 'Edit reading list URL', 'feedland' ),
+			onClick: () => setIsEditing( true ),
+		},
+	];
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup controls={ toolbarControls } />
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', 'feedland' ) }>
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Number of items', 'feedland' ) }
+						value={ itemsToShow }
+						onChange={ ( value ) =>
+							setAttributes( { itemsToShow: value } )
+						}
+						min={ DEFAULT_MIN_ITEMS }
+						max={ DEFAULT_MAX_ITEMS }
+						required
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...blockProps }>
+				<Disabled>
+					<ServerSideRender
+						block="feedland/art"
+						attributes={ attributes }
+					/>
+				</Disabled>
+			</div>
+		</>
+	);
+}