The Weekly Block

weekly-block.css

/**
 * License: GPL-3.0+
 */
.weekly-link {
	/*border-left: 3px solid rgba(0,0,0,.8);*/
	border-left: 3px solid rgba(255, 160, 0, 1);
	padding-left: 2em;
	padding-right: 2em;
	margin-bottom: 2em;
}
.weekly-link h4 {
	margin: 0;
}
.weekly-link .meta {
	margin-left: 0;
}
.weekly-link .date,
.weekly-link .author {
	color: rgba(56,56,56,0.5);
	font-size: 0.9em;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
	margin-right: 2em;
}
.weekly-link .comment {
	margin-bottom:0;
	display: inline;
}
.weekly-link .full-link a,
.weekly-link .full-link a:visited {
	display: inline-block;
	color: rgba(255, 160, 0, 1);
}

weekly-block.js

/**
 * License: GPL-3.0+
 */
var el = wp.element.createElement,
	registerBlockType = wp.blocks.registerBlockType,
	Editable = wp.blocks.Editable;
	InspectorControls = wp.blocks.InspectorControls,
	TextControl = wp.blocks.InspectorControls.TextControl;

registerBlockType( 'weekly-block/weekly-block', {
	title: 'The Weekly',

	icon: 'universal-access-alt',

	category: 'layout',

	attributes: {
		title: {
			source: 'children',
			selector: 'h4 > a',
		},
		date: {
			source: 'text',
			selector: '.meta > span',
		},
		url: {
			source: 'attribute',
			selector: 'h4 > a',
			attribute: 'src',
		},
		comment: {
			source: 'children',
			selector: 'p.comment',
		}
	},

	edit: function( { setAttributes, attributes, focus, setFocus } ) {
		const { title, date, url, comment } = attributes;

		return [
			el( Editable, {
					tagName: 'h4',
					placeholder: 'Title',
					value: title,
					onChange: function ( value ) { setAttributes( { title: value } ) },
					onFocus: setFocus
				}
			),
			el( Editable, {
					tagName: 'p',
					placeholder: 'Comment',
					value: comment,
					onChange: function ( value ) { setAttributes( { comment: value } ) },
					onFocus: setFocus
				}
			),
			focus &&
				el( InspectorControls, {
						key: 'inspector',
					}, [
						el( 'h2', {}, 'The Weekly Settings' ),
						el( TextControl, {
								label: 'URL',
								value: url,
								onChange: function ( value ) { setAttributes( { url: value } ) },
							}
						),
						el( TextControl, {
								label: 'Date',
								value: date,
								onChange: function ( value ) { setAttributes( { date: value } ) },
							}
						),
					]
				)
		];
	},

	save: function( { attributes } ) {
		const { title, date, url, comment } = attributes;

		return el( 'div', {
				className: 'weekly-link',
			},
			[
				el( 'h4', {},
					el( 'a', {
							href: url,
							target: '_blank',
						},
						title
					)
				),
				el( 'div', {
						className: 'meta',
					},
					el( 'span', {
							className: 'date',
						},
						date
					)
				),
				el( 'p', {
						className: 'comment',
					},
					comment
				),
				' ',
				el( 'span', {
						className: 'full-link'
					},
					el( 'a', {
							href: url,
							target: '_blank'
						},
						'Read the post.'
					)
				),
			]
		);
	},
} );

weekly-block.php

<?php
/**
 * Plugin Name: Weekly Block
 * Description: Jack needs a block for The Weekly.
 * Version: 0.2
 * Author: Gary Pendergast
 * Author URI: https://pento.net
 * License: GPL-3.0+
 */

function weekly_block_setup() {
	wp_register_script(
		'weekly-block',
		plugins_url( 'weekly-block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element' )
	);

	wp_register_style(
        'weekly-block',
        plugins_url( 'weekly-block.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'weekly-block.css' )
    );

	register_block_type( 'weekly-block/weekly-block', array(
		'editor_script' => 'weekly-block',
		'style'         => 'weekly-block',
	) );
}
add_action( 'init', 'weekly_block_setup' );