Instantly share code, notes, and snippets.

Embed
What would you like to do?
The Weekly Block
/**
* 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);
}
/**
* 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.'
)
),
]
);
},
} );
<?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' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment