Add Block, shortcode, and functions that render just the button.

assets/widget.css

@@ -24,8 +24,7 @@
     display: block;
 }
 
-.side-widget.republication_tracker_tool button.republication-tracker-tool-button,
-.widget.republication_tracker_tool button.republication-tracker-tool-button {
+button.republication-tracker-tool-button {
     width:100%;
     background-color: #5499db;
     border: 1px solid #2863a7;
@@ -39,8 +38,7 @@
     text-shadow: 1px 1px 1px #2863a7;
 }
 
-.side-widget.republication_tracker_tool button.republication-tracker-tool-button:hover,
-.widget.republication_tracker_tool button.republication-tracker-tool-button:hover {
+button.republication-tracker-tool-button:hover {
     background-color: #2863a7;
     text-decoration: none;
     cursor: pointer;
@@ -116,4 +114,4 @@
 
 .modal-open-disallow-scrolling {
     overflow: hidden;
-}
+}

blocks/button.php

@@ -0,0 +1,56 @@
+<?php
+/**
+ * Functions to register client-side assets (scripts and stylesheets) for the
+ * Gutenberg block.
+ *
+ * @package republication-tracker-tool
+ */
+
+/**
+ * Registers all block assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ *
+ * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/applying-styles-with-stylesheets/
+ */
+function republication_tracker_tool_button_block_init() {
+	// Skip block registration if Gutenberg is not enabled/merged.
+	if ( ! function_exists( 'register_block_type' ) ) {
+		return;
+	}
+	$dir = dirname( __FILE__ );
+
+	$index_js = 'button/index.js';
+	wp_register_script(
+		'button-block-editor',
+		plugins_url( $index_js, __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-i18n',
+			'wp-element',
+			'wp-components',
+		),
+		filemtime( "$dir/$index_js" )
+	);
+
+	$editor_css = 'button/editor.css';
+	wp_register_style(
+		'button-block-editor',
+		plugins_url( $editor_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$editor_css" )
+	);
+
+	register_block_type( 'republication-tracker-tool/button', array(
+		'attributes'      => array(
+			'label' => array(
+				'type' => 'string',
+			),
+		),
+		'editor_script'   => 'button-block-editor',
+		'editor_style'    => 'button-block-editor',
+		'style'           => 'republication-tracker-tool-css',
+		'script'          => 'republication-tracker-tool-js',
+		'render_callback' => array( 'Republication_Tracker_Tool_Shortcodes', 'button_shortcode' ),
+	) );
+}
+add_action( 'init', 'republication_tracker_tool_button_block_init' );

blocks/button/editor.css

@@ -0,0 +1,20 @@
+.wp-block-republication-tracker-tool-button.components-placeholder {
+  min-height: unset;
+}
+.wp-block-republication-tracker-tool-button .components-base-control__field {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+.wp-block-republication-tracker-tool-button .components-base-control__field label {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  margin-bottom: 0;
+}
+.wp-block-republication-tracker-tool-button .components-base-control__field input {
+  flex-grow: 1;
+}

blocks/button/index.js

@@ -0,0 +1,101 @@
+( function( wp ) {
+	/**
+	 * Registers a new block provided a unique name and an object defining its behavior.
+	 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/#registering-a-block
+	 */
+	var registerBlockType = wp.blocks.registerBlockType;
+	/**
+	 * Returns a new element of given type. Element is an abstraction layer atop React.
+	 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/packages-element/
+	 */
+	var el = wp.element.createElement;
+	/**
+	 * Retrieves the translation of text.
+	 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/packages-i18n/
+	 */
+	var __ = wp.i18n.__;
+
+	var TextControl = wp.components.TextControl;
+	var Placeholder = wp.components.Placeholder;
+
+	/**
+	 * Every block starts by registering a new block type definition.
+	 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/#registering-a-block
+	 */
+	registerBlockType( 'republication-tracker-tool/button', {
+		/**
+		 * This is the display title for your block, which can be translated with `i18n` functions.
+		 * The block inserter will show this name.
+		 */
+		title: __( 'Republication Modal Button', 'republication-tracker-tool' ),
+
+		/**
+		 * Describe the block for the block inspector
+		 */
+		description: __( 'Add a button which opens the Republication Tracker Tool sharing modal.', 'republication-tracker-tool' ),
+
+		/**
+		 * An icon property should be specified to make it easier to identify a block.
+		 * These can be any of WordPress’ Dashicons, or a custom svg element.
+		 */
+		icon: 'button',
+
+		/**
+		 * Blocks are grouped into categories to help users browse and discover them.
+		 * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
+		 */
+		category: 'widgets',
+
+		/**
+		 * Optional block extended support features.
+		 */
+		supports: {
+			align: false,
+			alignWide: false,
+			anchor: false,
+			customClassName: false,
+			className: true,
+			html: false,
+			multiple: true,
+			reusable: false,
+		},
+
+		/**
+		 * The edit function describes the structure of your block in the context of the editor.
+		 * This represents what the editor will render when the block is used.
+		 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+		 *
+		 * @param {Object} [props] Properties passed from the editor.
+		 * @return {Element}       Element to render.
+		 */
+		edit: function( props ) {
+			return el(
+				Placeholder,
+				{
+					className: props.className + ' republication-tracker-tool-button',
+					label: __( 'Republication Modal Button', 'republication-tracker-tool' ),
+				},
+				el ( TextControl, {
+					label: __( 'Button Label', 'republication-tracker-tool' ),
+					value: props.attributes.label,
+					placeholder: __( 'Republish This Story', 'republication-tracker-tool' ),
+					onChange: ( value ) => { props.setAttributes( { label: value } ); },
+				} )
+			);
+		},
+
+		/**
+		 * The save function defines the way in which the different attributes should be combined
+		 * into the final markup, which is then serialized by Gutenberg into `post_content`.
+		 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+		 *
+		 * @return {null}  There is no element to render
+		 */
+		save: function( props ) {
+			// no element created here, but this function is needed in order to let the props get passed along.
+			return null;
+		}
+	} );
+} )(
+	window.wp
+);

docs/adding-republish-button-to-posts.md

@@ -1,5 +1,7 @@
 # Adding Republish button to posts
 
+## The Republication Tracker Tool Widget
+
 In order to add your `Republish` button to your posts, you will need to add the `Republication Tracker Tool` widget to the sidebar or widget area of your choice. Once this plugin is installed and activated, navigate to `Appearance` -> `Widgets`.
 
 ![navigating to widgets](img/widgets.png)
@@ -18,4 +20,14 @@ Once you have added the `Republication Tracker Tool` widget to a widget area, yo
 
 ![default republish button](img/default-republish-button.png)
 
-If you'd like to place the republication button within a post, but not in a sidebar, INN Labs' [Super Cool Ad Inserter Plugin](https://largo.inn.org/guides/administrators/plugins/super-cool-ad-inserter-plugin/) may be of use to you.
+If you'd like to place the republication widget within a post, but not in a sidebar, INN Labs' [Super Cool Ad Inserter Plugin](https://largo.inn.org/guides/administrators/plugins/super-cool-ad-inserter-plugin/) may be of use to you.
+
+## The `[republication_modal_button]` shortcode
+
+Adding a `[republication_modal_button]` shortcode gets you just the button from the widget. This button will still open the modal.
+
+Change the button's label like so: `[republication_modal_button label="A custom label!"]`
+
+## The Republication Modal Button Block
+
+As an alternative to the shortcode, users of the Block Editor can add a Republication Modal Button Block to posts, and configure the button's label.

includes/class-shortcodes.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * The [republication_modal_button] shortcode and related functions
+ *
+ * @package Republication_Tracker_Tool
+ * @link https://github.com/INN/republication-tracker-tool/issues/66#issuecomment-671607012
+ */
+
+/**
+ * A container class for shortcodes
+ */
+class Republication_Tracker_Tool_Shortcodes {
+	/**
+	 * A shortcode to output the button that opens the Republication Tracking Tool modal
+	 *
+	 * This function also powers the Republication Modal Button Block output in Gutenberg,
+	 * as the render callback for a dynamic block
+	 *
+	 * @uses Republication_Tracker_Tool_Widget::button_output()
+	 * @uses Republication_Tracker_Tool_Widget::maybe_print_modal_content()
+	 * @param Array  $atts    the attributes passed in the shortcode.
+	 * @param String $content the enclosed content; should be empty for this shortcode.
+	 * @param String $tag     the shortcode tag.
+	 * @return String the button HTML
+	 */
+	public static function button_shortcode( $atts = array(), $content = '', $tag = '' ) {
+		global $post;
+
+		wp_enqueue_script( 'republication-tracker-tool-js', plugins_url( 'assets/widget.js', dirname( __FILE__ ) ), array( 'jquery' ), Republication_Tracker_Tool::VERSION, false );
+		wp_enqueue_style( 'republication-tracker-tool-css', plugins_url( 'assets/widget.css', dirname( __FILE__ ) ), array(), Republication_Tracker_Tool::VERSION );
+		add_action( 'wp_ajax_my_action', 'my_action' );
+		add_action( 'wp_ajax_nopriv_my_action', 'my_action' );
+
+		if ( isset( $atts['label'] ) ) {
+			$label = $atts['label'];
+		} else {
+			$label = null;
+		}
+
+		ob_start();
+		echo Republication_Tracker_Tool_Widget::button_output( $label );
+		echo Republication_Tracker_Tool_Widget::maybe_print_modal_content();
+		return ob_get_clean();
+	}
+}
+add_shortcode( 'republication_modal_button', array( 'Republication_Tracker_Tool_Shortcodes', 'button_shortcode' ) );