Add shortcode buttons (#108)

* Add buttons for page sections and calls to action.

* Fix coding standards.

* Fix localization.

assets/scripts/call-to-action.js

@@ -0,0 +1,36 @@
+( function () {
+	tinymce.create( 'tinymce.plugins.aldine_call_to_action', {
+		init: function ( editor, url ) {
+			editor.addButton( 'aldine_call_to_action', {
+				title:   aldine.call_to_action.title,
+				icon:    'icon dashicons-flag',
+				onclick: function () {
+					editor.windowManager.open( {
+						title: aldine.call_to_action.title,
+						body:  [
+							{
+								type:  'textbox',
+								name:  'text',
+								label: aldine.call_to_action.text,
+								value: aldine.call_to_action.title,
+							},
+							{
+								type:  'textbox',
+								name:  'url',
+								label: aldine.call_to_action.url,
+								value: '#',
+							},
+						],
+						onsubmit: function ( e ) {
+							editor.insertContent( '[aldine_call_to_action text="' + e.data.text + '" url="' + e.data.url + '"]' );
+						},
+					} );
+				},
+			} );
+		},
+		createControl: function ( n, cm ) {
+			return null;
+		},
+	} );
+	tinymce.PluginManager.add( 'aldine_call_to_action', tinymce.plugins.aldine_call_to_action );
+} )();

assets/scripts/page-section.js

@@ -0,0 +1,42 @@
+( function () {
+	tinymce.create( 'tinymce.plugins.aldine_page_section', {
+		init: function ( editor, url ) {
+			editor.addButton( 'aldine_page_section', {
+				title:   aldine.page_section.title,
+				icon:    'icon dashicons-layout',
+				onclick: function () {
+					editor.windowManager.open( {
+						title: aldine.page_section.title,
+						body:  [
+							{
+								type:  'textbox',
+								name:  'title',
+								label: aldine.page_section.title_label,
+								value: aldine.page_section.title,
+							},
+							{
+								type:   'listbox',
+								name:   'variant',
+								label:  'Variant',
+								values: [
+									{ text: aldine.page_section.standard, value: '' },
+									{ text: aldine.page_section.accent, value: 'accent' },
+									{ text: aldine.page_section.bordered, value: 'bordered' },
+									{ text: aldine.page_section.borderless, value: 'borderless' },
+								],
+								value: '', // Sets the default
+							},
+						],
+						onsubmit: function ( e ) {
+							editor.insertContent( '[aldine_page_section title="' + e.data.title + '" variant="' + e.data.variant + '"]<p>Insert your page section content here.</p>[/aldine_page_section]' );
+						},
+					} );
+				},
+			} );
+		},
+		createControl: function ( n, cm ) {
+			return null;
+		},
+	} );
+	tinymce.PluginManager.add( 'aldine_page_section', tinymce.plugins.aldine_page_section );
+} )();

dist/mix-manifest.json

@@ -2,6 +2,8 @@
     "/scripts/aldine.js": "/scripts/aldine.js?id=e222d7e1e1c71c6bdb98",
     "/styles/aldine.css": "/styles/aldine.css?id=2648daa49889948f53c9",
     "/styles/editor.css": "/styles/editor.css?id=e96b3d10ea63fa07d09b",
-    "/scripts/customizer.js": "/scripts/customizer.js?id=1b0d3cfc1d85f460af53",
+    "/scripts/customizer.js": "/scripts/customizer.js?id=0a52a1e0117b2902b145",
-    "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=d25f1240496bd3607338"
+    "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=4ee1f7f0640e28791cf2",
+    "/scripts/page-section.js": "/scripts/page-section.js?id=2f9e970e43107c0ba14a",
+    "/scripts/call-to-action.js": "/scripts/call-to-action.js?id=42d4e3bac4388623cd04"
 }

dist/scripts/call-to-action.js

@@ -0,0 +1 @@
+!function(t){var n={};function e(l){if(n[l])return n[l].exports;var o=n[l]={i:l,l:!1,exports:{}};return t[l].call(o.exports,o,o.exports,e),o.l=!0,o.exports}e.m=t,e.c=n,e.d=function(t,n,l){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:l})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=1)}({1:function(t,n,e){t.exports=e("eL/z")},"eL/z":function(t,n){tinymce.create("tinymce.plugins.aldine_call_to_action",{init:function(t,n){t.addButton("aldine_call_to_action",{title:aldine.call_to_action.title,icon:"icon dashicons-flag",onclick:function(){t.windowManager.open({title:aldine.call_to_action.title,body:[{type:"textbox",name:"text",label:aldine.call_to_action.text,value:aldine.call_to_action.title},{type:"textbox",name:"url",label:aldine.call_to_action.url,value:"#"}],onsubmit:function(n){t.insertContent('[aldine_call_to_action text="'+n.data.text+'" url="'+n.data.url+'"]')}})}})},createControl:function(t,n){return null}}),tinymce.PluginManager.add("aldine_call_to_action",tinymce.plugins.aldine_call_to_action)}});

dist/scripts/page-section.js

@@ -0,0 +1 @@
+!function(e){var t={};function n(a){if(t[a])return t[a].exports;var i=t[a]={i:a,l:!1,exports:{}};return e[a].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:a})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}({4:function(e,t,n){e.exports=n("BNyP")},BNyP:function(e,t){tinymce.create("tinymce.plugins.aldine_page_section",{init:function(e,t){e.addButton("aldine_page_section",{title:aldine.page_section.title,icon:"icon dashicons-layout",onclick:function(){e.windowManager.open({title:aldine.page_section.title,body:[{type:"textbox",name:"title",label:aldine.page_section.title_label,value:aldine.page_section.title},{type:"listbox",name:"variant",label:"Variant",values:[{text:aldine.page_section.standard,value:""},{text:aldine.page_section.accent,value:"accent"},{text:aldine.page_section.bordered,value:"bordered"},{text:aldine.page_section.borderless,value:"borderless"}],value:""}],onsubmit:function(t){e.insertContent('[aldine_page_section title="'+t.data.title+'" variant="'+t.data.variant+'"]<p>Insert your page section content here.</p>[/aldine_page_section]')}})}})},createControl:function(e,t){return null}}),tinymce.PluginManager.add("aldine_page_section",tinymce.plugins.aldine_page_section)}});

dist/scripts/shortcodes.js

@@ -0,0 +1 @@
+!function(t){var e={};function n(a){if(e[a])return e[a].exports;var i=e[a]={i:a,l:!1,exports:{}};return t[a].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,a){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:a})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=3)}({3:function(t,e,n){t.exports=n("GR5A")},GR5A:function(t,e){tinymce.create("tinymce.plugins.aldine_page_section",{init:function(t,e){t.addButton("aldine_page_section",{title:"Page Section",icon:"layout",onclick:function(){t.windowManager.open({title:"Page Section",body:[{type:"textbox",name:"title",label:"Title",value:"Page Section"},{type:"listbox",name:"variant",label:"Variant",values:[{text:"Standard",value:""},{text:"Accent",value:"accent"},{text:"Bordered",value:"bordered"},{text:"Borderless",value:"borderless"}],value:""}],onsubmit:function(e){t.insertContent('[aldine_page_section title="'+e.data.title+'" variant="'+e.data.variant+'"][/aldine_page_section]')}})}})},createControl:function(t,e){return null}}),tinymce.create("tinymce.plugins.aldine_call_to_action",{init:function(t,e){t.addButton("aldine_call_to_action",{title:"Call to Action",icon:"link",onclick:function(){t.windowManager.open({title:"Call to Action",body:[{type:"textbox",name:"text",label:"Text",value:"Call to Action"},{type:"textbox",name:"url",label:"URL",value:"#"}],onsubmit:function(e){t.insertContent('[aldine_call_to_action text="'+e.data.text+'" url="'+e.data.url+'"]')}})}})},createControl:function(t,e){return null}}),tinymce.PluginManager.add("aldine_call_to_action",tinymce.plugins.aldine_call_to_action)}});

functions.php

@@ -47,8 +47,9 @@ add_action( 'after_setup_theme', '\Aldine\Actions\content_width', 0 );
 add_action( 'wp_head', '\Aldine\Actions\output_custom_colors' );
 add_action( 'init', '\Aldine\Actions\add_editor_styles' );
 add_action( 'admin_init', '\Aldine\Actions\hide_catalog_content_editor' );
-add_filter( 'mce_buttons', '\Aldine\Filters\add_style_select' );
+foreach ( [ 'post.php', 'post-new.php' ] as $hook ) {
-add_filter( 'tiny_mce_before_init', '\Aldine\Filters\add_blocks' );
+	add_action( "admin_head-$hook", '\Aldine\Actions\tinymce_l18n' );
+}
 add_filter( 'body_class', '\Aldine\Filters\body_classes' );
 add_filter( 'excerpt_more', '\Aldine\Filters\excerpt_more' );
 add_filter( 'query_vars', '\Aldine\Filters\register_query_vars' );

inc/actions/namespace.php

@@ -86,6 +86,9 @@ function setup() {
 
 	// Add editor style.
 	add_editor_style( $assets->getPath( 'styles/editor.css' ) );
+
+	// Add shortcode buttons.
+	add_action( 'init', __NAMESPACE__ . '\register_shortcode_buttons' );
 }
 
 /**
@@ -248,3 +251,48 @@ function add_color_variants( $option, $old_value, $value ) {
 	update_option( $option . '_dark', (string) $color_dark );
 	update_option( $option . '_alpha', (string) $color_alpha );
 }
+
+/**
+ * Register shortcode buttons.
+ *
+ * @since 1.1.0
+ */
+function register_shortcode_buttons() {
+	if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
+		return;
+	}
+
+	if ( get_user_option( 'rich_editing' ) !== 'true' ) {
+		return;
+	}
+
+	add_filter( 'mce_external_plugins', '\Aldine\filters\add_buttons' );
+	add_filter( 'mce_buttons', '\Aldine\filters\register_buttons' );
+}
+
+/**
+ * Localize shortcode button strings.
+ *
+ * @since 1.1.0
+ */
+function tinymce_l18n() {
+?>
+	<script type='text/javascript'>
+		const aldine = {
+			page_section: {
+				'title': '<?php _e( 'Page Section', 'pressbooks-aldine' ); ?>',
+				'title_label': '<?php _e( 'Title', 'pressbooks-aldine' ); ?>',
+				'standard': '<?php _e( 'Standard', 'pressbooks-aldine' ); ?>',
+				'accent': '<?php _e( 'Accent', 'pressbooks-aldine' ); ?>',
+				'bordered': '<?php _e( 'Bordered', 'pressbooks-aldine' ); ?>',
+				'borderless': '<?php _e( 'Borderless', 'pressbooks-aldine' ); ?>'
+			},
+			call_to_action: {
+				'title': '<?php _e( 'Call to Action', 'pressbooks-aldine' ); ?>',
+				'text': '<?php _e( 'Text', 'pressbooks-aldine' ); ?>',
+				'url': '<?php _e( 'URL', 'pressbooks-aldine' ); ?>'
+			}
+		};
+	</script>
+<?php
+}

inc/filters/namespace.php

@@ -7,6 +7,7 @@
 
 namespace Aldine\Filters;
 
+use PressbooksMix\Assets;
 use function Aldine\Helpers\has_sections;
 
 /**
@@ -60,62 +61,6 @@ function excerpt_more() {
 	return ' &hellip; <a href="' . get_permalink() . '">' . __( 'Continued', 'pressbooks-aldine' ) . '</a>';
 }
 
-/**
- * Add style select dropdown to TinyMCE.
- *
- * @param array $buttons The default button array.
- * @return array The modified array.
- */
-function add_style_select( $buttons ) {
-	array_unshift( $buttons, 'styleselect' );
-	return $buttons;
-}
-
-/**
- * Add custom block formats to TinyMCE.
- *
- * @param array $init_array The default array.
- * @return array The modified array.
- **/
-
-function add_blocks( $init_array ) {
-	$style_formats = [
-		[
-			'title' => __( 'Page Section', 'pressbooks-aldine' ),
-			'block' => 'div',
-			'classes' => [ 'page-section' ],
-			'wrapper' => true,
-		],
-		[
-			'title' => __( 'Page Section (Accent)', 'pressbooks-aldine' ),
-			'block' => 'div',
-			'classes' => [ 'page-section', 'page-section--accent' ],
-			'wrapper' => true,
-		],
-		[
-			'title' => __( 'Page Section (Bordered)', 'pressbooks-aldine' ),
-			'block' => 'div',
-			'classes' => [ 'page-section', 'page-section--bordered' ],
-			'wrapper' => true,
-		],
-		[
-			'title' => __( 'Page Section (Borderless)', 'pressbooks-aldine' ),
-			'block' => 'div',
-			'classes' => [ 'page-section', 'page-section--borderless' ],
-			'wrapper' => true,
-		],
-		[
-			'title' => __( 'Call to Action', 'pressbooks-aldine' ),
-			'inline' => 'a',
-			'classes' => [ 'call-to-action' ],
-		],
-	];
-
-	$init_array['style_formats'] = json_encode( $style_formats );
-
-	return $init_array;
-}
-
 /**
  * Add things to the menu.
  *
@@ -131,3 +76,30 @@ function adjust_menu( $items, $args ) {
 
 	return $items;
 }
+
+/**
+ * Add TinyMCE Buttons.
+ *
+ * @since 1.1.0
+ */
+function add_buttons( $plugin_array ) {
+	$assets = new Assets( 'pressbooks-aldine', 'theme' );
+	$assets->setSrcDirectory( 'assets' )->setDistDirectory( 'dist' );
+
+	$plugin_array['aldine_call_to_action'] = $assets->getPath( 'scripts/call-to-action.js' );
+	$plugin_array['aldine_page_section'] = $assets->getPath( 'scripts/page-section.js' );
+	return $plugin_array;
+}
+
+/**
+ * Register TinyMCE Buttons.
+ *
+ * @since 1.1.0
+ */
+function register_buttons( $buttons ) {
+	$c = count( $buttons );
+	$i = $c - 2;
+	$new_items = [ 'aldine_page_section', 'aldine_call_to_action' ];
+	array_splice( $buttons, $i, 0, $new_items );
+	return $buttons;
+}

package.json

@@ -26,7 +26,9 @@
 		"extends": "./node_modules/pressbooks-build-tools/config/eslint.js",
 		"globals": {
 			"$": true,
-			"PB_A11y": true
+			"aldine": true,
+			"PB_A11y": true,
+			"tinymce": true
 		}
 	},
 	"stylelint": {

partials/contact-form.php

@@ -8,7 +8,8 @@
 
 <?php
 
-$contact_form_title = get_option( 'pb_network_contact_form_title', __( 'Contact Us', 'pressbooks-aldine' ) );
+$pb_network_contact_form_title = get_option( 'pb_network_contact_form_title' );
+$contact_form_title = ( ! empty( $pb_front_page_catalog_title ) ) ? $pb_front_page_catalog_title : __( 'Contact Us', 'pressbooks-aldine' );
 $contact_form_response = \Aldine\Helpers\handle_contact_form_submission();
 
 ?>

partials/content-front-page.php

@@ -15,7 +15,8 @@ use function Aldine\Helpers\get_catalog_data;
 use function Aldine\Helpers\has_sections;
 
 $front_page_catalog = get_option( 'pb_front_page_catalog' );
-$latest_books_title = get_option( 'pb_front_page_catalog_title', __( 'Our Latest Titles', 'pressbooks-aldine' ) );
+$pb_front_page_catalog_title = get_option( 'pb_front_page_catalog_title' );
+$latest_books_title = ( ! empty( $pb_front_page_catalog_title ) ) ? $pb_front_page_catalog_title : __( 'Our Latest Titles', 'pressbooks-aldine' );
 if ( get_option( 'pb_front_page_catalog' ) ) {
 	$page = ( get_query_var( 'page' ) ) ? get_query_var( 'page' ) : 1;
 	$catalog_data = get_catalog_data( $page, 3, 'latest' );

webpack.mix.js

@@ -1,4 +1,4 @@
-let mix = require('laravel-mix');
+let mix = require( 'laravel-mix' );
 
 /*
  |--------------------------------------------------------------------------
@@ -16,11 +16,11 @@ const partials = 'partials';
 const assets = 'assets';
 const dist = 'dist';
 
-mix.setPublicPath(dist);
+mix.setPublicPath( dist );
-mix.setResourceRoot('../');
+mix.setResourceRoot( '../' );
 
 // BrowserSync
-mix.browserSync({
+mix.browserSync( {
 	host:  'localhost',
 	proxy: 'https://pressbooks.test',
 	port:  3100,
@@ -31,44 +31,46 @@ mix.browserSync({
 		`${dist}/**/*.css`,
 		`${dist}/**/*.js`,
 	],
-});
+} );
 
 // Sass
-mix.sass(`${assets}/styles/aldine.scss`, `${dist}/styles/aldine.css`);
+mix.sass( `${assets}/styles/aldine.scss`, `${dist}/styles/aldine.css` );
-mix.sass(`${assets}/styles/editor.scss`, `${dist}/styles/editor.css`);
+mix.sass( `${assets}/styles/editor.scss`, `${dist}/styles/editor.css` );
 
 // Javascript
-mix.autoload({ jquery: ['$', 'window.jQuery', 'jQuery'] });
+mix.autoload( { jquery: [ '$', 'window.jQuery', 'jQuery' ] } );
 
 mix
-	.js(`${assets}/scripts/aldine.js`, `${dist}/scripts`)
+	.js( `${assets}/scripts/aldine.js`, `${dist}/scripts` )
-	.js(`${assets}/scripts/catalog-admin.js`, `${dist}/scripts`)
+	.js( `${assets}/scripts/call-to-action.js`, `${dist}/scripts` )
-	.js(`${assets}/scripts/customizer.js`, `${dist}/scripts`);
+	.js( `${assets}/scripts/catalog-admin.js`, `${dist}/scripts` )
+	.js( `${assets}/scripts/customizer.js`, `${dist}/scripts` )
+	.js( `${assets}/scripts/page-section.js`, `${dist}/scripts` );
 
 // Assets
 mix
-	.copy(`${assets}/fonts`, `${dist}/fonts`, false)
+	.copy( `${assets}/fonts`, `${dist}/fonts`, false )
-	.copy(`${assets}/images`, `${dist}/images`, false);
+	.copy( `${assets}/images`, `${dist}/images`, false );
 
 // Options
-mix.options({ processCssUrls: false });
+mix.options( { processCssUrls: false } );
 
 // Source maps when not in production.
-if (!mix.inProduction()) {
+if ( ! mix.inProduction() ) {
 	mix.sourceMaps();
 }
 
 // Hash and version files in production.
-if (mix.inProduction()) {
+if ( mix.inProduction() ) {
 	mix.version();
 }
 
 // Add Isotope support.
-mix.webpackConfig({
+mix.webpackConfig( {
 	resolve: {
 		alias: {
 			masonry: 'masonry-layout',
 			isotope: 'isotope-layout',
 		},
 	},
-});
+} );