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, | |
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.' | |
) | |
), | |
] | |
); | |
}, | |
} ); |
<?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' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment