Add subcomponent selector to Customize JSON screen

admin/class-admin-apple-json.php

@@ -5,6 +5,8 @@
  * @package Apple_News
  */
 
+use Apple_Exporter\Components\Component;
+
 /**
  * This class is in charge of handling the management of custom JSON.
  */
@@ -35,6 +37,14 @@ class Admin_Apple_JSON extends Apple_News {
 	 */
 	private $selected_component = '';
 
+	/**
+	 * Holds the selected subcomponent from the request.
+	 *
+	 * @since 2.5.0
+	 * @var string
+	 */
+	private $selected_subcomponent = '';
+
 	/**
 	 * Holds the selected theme from the request.
 	 *
@@ -100,6 +110,14 @@ public function action_router() {
 			$this->selected_component = '';
 		}
 
+		// Store the selected subcomponent value for use later.
+		$this->selected_subcomponent = isset( $_POST['apple_news_subcomponent'] )
+			? sanitize_text_field( wp_unslash( $_POST['apple_news_subcomponent'] ) )
+			: '';
+		if ( ! array_key_exists( $this->selected_subcomponent, $this->list_components() ) ) {
+			$this->selected_subcomponent = '';
+		}
+
 		// Store the selected theme for use later.
 		if ( ! empty( $_POST['apple_news_theme'] ) ) {
 			$this->selected_theme = sanitize_text_field( wp_unslash( $_POST['apple_news_theme'] ) );
@@ -185,10 +203,14 @@ public function page_json_render() {
 			? $this->get_selected_component()
 			: '';
 
-		// If we have a class, get its specs.
-		$specs = ( ! empty( $selected_component ) )
-			? $this->get_specs( $selected_component )
-			: [];
+		// Handle subcomponents.
+		$component_can_be_parent = $this->get_component_class( $selected_component )?->can_be_parent();
+		$selected_subcomponent   = ( ! empty( $selected_component ) )
+			? $this->get_selected_subcomponent()
+			: '';
+
+		// If we have a component or subcomponent, get its specs.
+		$specs = $this->get_specs( $selected_subcomponent ?: $selected_component );
 
 		/* phpcs:enable */
 
@@ -365,21 +387,28 @@ private function save_json() {
 		}
 	}
 
+	/**
+	 * Given a component slug, returns the associated component class.
+	 *
+	 * @param string $component The component to get the class for.
+	 *
+	 * @return ?Component
+	 */
+	private function get_component_class( $component ) {
+		$classname = $this->namespace . $component;
+		return class_exists( $classname ) ? new $classname() : null;
+	}
+
 	/**
 	 * Loads the JSON specs that can be customized for the component
 	 *
 	 * @param string $component The component to get specs for.
+	 *
 	 * @return array
-	 * @access private
 	 */
 	private function get_specs( $component ) {
-		if ( empty( $component ) ) {
-			return [];
-		}
-
-		$classname       = $this->namespace . $component;
-		$component_class = new $classname();
-		return $component_class->get_specs();
+		$component_class = $this->get_component_class( $component );
+		return $component_class ? $component_class->get_specs() : [];
 	}
 
 	/**
@@ -414,6 +443,15 @@ public function get_selected_component() {
 		return $this->selected_component;
 	}
 
+	/**
+	 * Gets the currently selected subcomponent.
+	 *
+	 * @return string
+	 */
+	public function get_selected_subcomponent() {
+		return $this->selected_subcomponent;
+	}
+
 	/**
 	 * Checks for a valid selected theme.
 	 *

admin/partials/page-json.php

@@ -5,8 +5,10 @@
  * phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  *
  * @global array  $all_themes
+ * @global bool   $component_can_be_parent
  * @global array  $components
  * @global string $selected_component
+ * @global string $selected_subcomponent
  * @global string $selected_theme
  * @global array  $specs
  * @global string $theme_admin_url
@@ -102,6 +104,23 @@
 				</div>
 			<?php endif; ?>
 
+			<?php if ( $component_can_be_parent ) : ?>
+			<div>
+				<label for="apple_news_subcomponent">
+					<?php esc_html_e( 'Subcomponent', 'apple-news' ); ?>:
+					<select id="apple_news_subcomponent" name="apple_news_subcomponent">
+						<option value=""><?php esc_html_e( 'None', 'apple-news' ); ?></option>
+						<?php foreach ( $components as $apple_component_key => $apple_component_name ) : ?>
+							<option value="<?php echo esc_attr( $apple_component_key ); ?>"
+								<?php selected( $apple_component_key, $selected_subcomponent ); ?>>
+								<?php echo esc_html( $apple_component_name ); ?>
+							</option>
+						<?php endforeach; ?>
+					</select>
+				</label>
+			</div>
+		<?php endif; ?>
+
 			<?php if ( ! empty( $specs ) ) : ?>
 				<?php
 				foreach ( $specs as $apple_spec ) :

assets/js/json.js

@@ -9,6 +9,10 @@
 			e.preventDefault();
 			appleNewsJSONSubmit( $( this ), 'apple_news_get_json' );
 		});
+    $( '#apple_news_subcomponent' ).on( 'change', function( e ) {
+      e.preventDefault();
+      appleNewsJSONSubmit( $( this ), 'apple_news_get_json' );
+    });
 		$( '#apple_news_reset_json' ).on( 'click', function( e ) {
 			e.preventDefault();
 			appleNewsJSONSubmit( $( this ), 'apple_news_reset_json' );

includes/apple-exporter/components/class-aside.php

@@ -20,6 +20,13 @@
  */
 class Aside extends Component {
 
+	/**
+	 * Declare support for subcomponents.
+	 *
+	 * @var bool
+	 */
+	protected $can_be_parent = true;
+
 	/**
 	 * We are providing our own layout below, so don't set one automatically when anchoring.
 	 *

includes/apple-exporter/components/class-component.php

@@ -77,6 +77,14 @@ abstract class Component {
 	 */
 	protected $can_be_anchor_target = false;
 
+	/**
+	 * Whether this component can be a parent.
+	 *
+	 * @since 2.5.0
+	 * @var boolean
+	 */
+	protected $can_be_parent = false;
+
 	/**
 	 * Workspace for this component.
 	 *
@@ -427,6 +435,16 @@ public function can_be_anchor_target() {
 		return $this->can_be_anchor_target && empty( $this->uid );
 	}
 
+	/**
+	 * Returns whether this component can be a parent (have subcomponents).
+	 *
+	 * @since 2.5.0
+	 * @return boolean
+	 */
+	public function can_be_parent() {
+		return $this->can_be_parent;
+	}
+
 	/**
 	 * Get the current UID.
 	 *