Merge pull request #33 from philbuchanan/v1.1.0

v1.1.0

accordion-blocks.php

@@ -3,7 +3,7 @@
 /**
  * Plugin Name: Accordion Blocks
  * Description: Gutenberg blocks for creating responsive accordion drop-downs.
- * Version: 1.0.6
+ * Version: 1.1.0
  * Author: Phil Buchanan
  * Author URI: https://philbuchanan.com
  * Text Domain: pb
@@ -38,12 +38,15 @@ function __construct() {
 		add_action('init', array($this, 'register_block'));
 
 		// Register frontend JavaScript
-		add_action('enqueue_block_assets', array($this, 'enqueue_frontend_assets'));
+		add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_assets'));
 
 		if (is_admin()) {
 			// Add link to documentation on plugin page
 			add_filter("plugin_action_links_$basename", array($this, 'add_documentation_link'));
 		}
+
+		// Add API endpoint to get defaults
+		add_action('rest_api_init', array($this, 'register_rest_routes'));
 	}
 
 
@@ -69,17 +72,15 @@ public function register_block() {
 		wp_register_script(
 			'pb-accordion-blocks-script',
 			plugins_url('build/index.js', __FILE__),
-			array_merge($asset_file['dependencies'], array(
-				'wp-block-editor',
-			)),
+			$asset_file['dependencies'],
 			$asset_file['version']
 		);
 
 		wp_register_style(
 			'pb-accordion-blocks-style',
 			plugins_url('css/accordion-blocks.css', __FILE__),
 			array(),
-			$this->get_plugin_version()
+			$this->plugin_version
 		);
 
 		register_block_type('pb/accordion-item', array(
@@ -119,6 +120,113 @@ public function add_documentation_link($links) {
 		return $links;
 	}
 
+
+
+	/**
+	 * Register rest endpoint to get plugin defaults
+	 */
+	public function register_rest_routes() {
+		register_rest_route('accordion-blocks/v1', '/defaults', array(
+			'methods' => WP_REST_Server::READABLE,
+			'callback' => array($this, 'api_get_defaults'),
+		));
+
+		register_rest_route('accordion-blocks/v1', '/defaults', array(
+			'methods' => WP_REST_Server::EDITABLE,
+			'callback' => array($this, 'api_set_defaults'),
+			'permission_callback' => array($this, 'check_permissions'),
+		));
+	}
+
+
+
+	/**
+	 * Get accordion block default settings
+	 *
+	 * @return object Default accordion block settings object
+	 */
+	public function api_get_defaults() {
+		$defaults = $this->get_defaults();
+
+		/*
+		 * If there are no defaults set yet, set them now
+		 * This will likely only happen when users upgrade from an older version
+		 * of the plugin.
+		 */
+		if (!$defaults) {
+			$defaults = (object) array(
+				'initiallyOpen' => false,
+				'clickToClose'  => true,
+				'autoClose'     => true,
+				'scroll'        => false,
+				'scrollOffset'  => 0,
+			);
+
+			$this->set_defaults($defaults);
+		}
+
+		$response = new WP_REST_Response($defaults);
+		$response->set_status(200);
+
+		return $response;
+	}
+
+
+
+	/**
+	 * Set accordion block default settings
+	 *
+	 * @param data object The date passed from the API
+	 * @return object Default accordion block settings object
+	 */
+	public function api_set_defaults($request) {
+		$old_defaults = $this->get_defaults();
+
+		$new_defaults = json_decode($request->get_body());
+
+		$new_defaults = (object) array(
+			'initiallyOpen' => isset($new_defaults->initiallyOpen) ? $new_defaults->initiallyOpen : $old_defaults->initiallyOpen,
+			'clickToClose'  => isset($new_defaults->clickToClose)  ? $new_defaults->clickToClose  : $old_defaults->clickToClose,
+			'autoClose'     => isset($new_defaults->autoClose)     ? $new_defaults->autoClose     : $old_defaults->autoClose,
+			'scroll'        => isset($new_defaults->scroll)        ? $new_defaults->scroll        : $old_defaults->scroll,
+			'scrollOffset'  => isset($new_defaults->scrollOffset)  ? $new_defaults->scrollOffset  : $old_defaults->scrollOffset,
+		);
+
+		$this->set_defaults($new_defaults);
+
+		$response = new WP_REST_Response($new_defaults);
+		$response->set_status(201);
+
+		return $response;
+	}
+
+
+
+	/**
+	 * Ensure user has permission to set defaults
+	 */
+	public function check_permissions() {
+		return current_user_can('edit_posts');
+	}
+
+
+
+	/**
+	 * Get default settings from `wp_options` table
+	 */
+	private function get_defaults() {
+		return get_option('accordion_blocks_defaults');
+	}
+
+
+
+	/**
+	 * Save default settings in `wp_options` table
+	 */
+	private function set_defaults($settings) {
+		return update_option('accordion_blocks_defaults', $settings);
+	}
+
 }
 
 $PB_Accordion_Blocks = new PB_Accordion_Blocks;

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => '6e451ab0356e3dd1ed1692e087d34c81');
+<?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '953c215943375004598abb97d8b984e2');

css/accordion-blocks.scss

@@ -79,6 +79,12 @@ $color-open-icon: #777;
 	}
 }
 
+[data-initially-open="false"] {
+	.c-accordion__content {
+		display: none;
+	}
+}
+
 // Make all the content visible when printing the page.
 @media print {
 	.c-accordion__content {

js/accordion-blocks.js

@@ -29,7 +29,8 @@
 		item.self       = $(this);
 		item.id         = $(this).attr('id');
 		item.controller = $(this).children('.js-accordion-controller');
-		item.content    = $('#' +  item.controller.attr('aria-controls'));
+		item.uuid       = item.controller.attr('id').replace('at-', '');
+		item.content    = $('#ac-' + item.uuid);
 
 
 
@@ -39,7 +40,19 @@
 		 * default.
 		 */
 		(function initialSetup() {
-			settings.scrollOffset = Math.floor(parseInt(settings.scrollOffset)) | 0;
+			/**
+			 * Set up some defaults for this controller
+			 * These cannot be set in the blocks `save` function becuase
+			 * WordPress strips `tabindex` and `aria-controls` attributes from
+			 * saved post content. See `_wp_add_global_attributes` function in
+			 * wp-includes/kses.php for list of allowed attributes.
+			 */
+			item.controller.attr({
+				'tabindex': 0,
+				'aria-controls': 'ac-' + item.uuid,
+			});
+
+			settings.scrollOffset = Math.floor(parseInt(settings.scrollOffset, 10)) || 0;
 
 			// If this item has `initally-open prop` set to true, open it
 			if (settings.initiallyOpen) {
@@ -102,6 +115,8 @@
 		function openItem() {
 			// Clear/stop any previous animations before revealing content
 			item.content.clearQueue().stop().slideDown(duration, function() {
+				setOpenItemAttributes();
+
 				// Scroll page to the title
 				if (settings.scroll) {
 					// Pause scrolling until other items have closed
@@ -113,8 +128,6 @@
 				}
 			});
 
-			setOpenItemAttributes();
-
 			$(document).trigger('openAccordionItem', item);
 		}
 
@@ -126,10 +139,8 @@
 		 */
 		function setOpenItemAttributes() {
 			item.self.addClass('is-open is-read');
-			item.controller.attr({
-				'aria-expanded': 'true',
-			});
-			item.content.removeAttr('aria-hidden');
+			item.controller.attr('aria-expanded', true);
+			item.content.removeAttr('hidden');
 		}
 
 
@@ -140,9 +151,9 @@
 		 */
 		function closeItem() {
 			// Close the item
-			item.content.slideUp(duration);
-
-			setCloseItemAttributes();
+			item.content.slideUp(duration, function() {
+				setCloseItemAttributes();
+			});
 		}
 
 
@@ -153,12 +164,8 @@
 		 */
 		function setCloseItemAttributes() {
 			item.self.removeClass('is-open');
-			item.controller.attr({
-				'aria-expanded': 'false',
-			});
-			item.content.attr({
-				'aria-hidden': 'true',
-			});
+			item.controller.attr('aria-expanded', false);
+			item.content.attr('hidden', true);
 		}