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,
	RichText = wp.editor.RichText;
	InspectorControls = wp.blocks.InspectorControls,
	TextControl = wp.components.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: 'href',
		},
		comment: {
			source: 'children',
			selector: 'p.comment',
		}
	},

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

		return [
			el( RichText, {
					tagName: 'h4',
					placeholder: 'Title',
					value: title,
					onChange: function ( value ) { setAttributes( { title: value } ) },
					onFocus: setFocus
				}
			),
			el( RichText, {
					tagName: 'p',
					placeholder: 'Comment',
					value: comment,
					onChange: function ( value ) { setAttributes( { comment: value } ) },
					onFocus: setFocus
				}
			),
			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.8
 * Author: Gary Pendergast (Maintained by @developerjack)
 * Author URI: https://pento.net
 * License: GPL-3.0+
 * Maintained
 */

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' );