Issue-1074: Add Support for an Aside Component (release/v2.5.0)

admin/settings/class-admin-apple-settings-section-advanced.php

@@ -32,22 +32,22 @@ public function __construct( $page ) {
 
 		// Add the settings.
 		$this->settings = [
-			'component_alerts'    => [
+			'component_alerts'      => [
 				'label'       => __( 'Component Alerts', 'apple-news' ),
 				'type'        => [ 'none', 'warn', 'fail' ],
 				'description' => __( 'If a post has a component that is unsupported by Apple News, choose "none" to generate no alert, "warn" to provide an admin warning notice, or "fail" to generate a notice and stop publishing.', 'apple-news' ),
 			],
-			'use_remote_images'   => [
+			'use_remote_images'     => [
 				'label'       => __( 'Use Remote Images?', 'apple-news' ),
 				'type'        => [ 'yes', 'no' ],
 				'description' => __( 'Allow the Apple News API to retrieve images remotely rather than bundle them. This setting is recommended if you are having any issues with publishing images. If your images are not publicly accessible, such as on a development site, you cannot use this feature.', 'apple-news' ),
 			],
-			'full_bleed_images'   => [
+			'full_bleed_images'     => [
 				'label'       => __( 'Use Full-Bleed Images?', 'apple-news' ),
 				'type'        => [ 'yes', 'no' ],
 				'description' => __( 'If set to yes, images that are centered or have no alignment will span edge-to-edge rather than being constrained within the body margins.', 'apple-news' ),
 			],
-			'html_support'        => [
+			'html_support'          => [
 				'label'       => __( 'Enable HTML support?', 'apple-news' ),
 				'type'        => [ 'yes', 'no' ],
 				'description' => sprintf(
@@ -57,14 +57,19 @@ public function __construct( $page ) {
 					'</a>'
 				),
 			],
-			'in_article_position' => [
+			'in_article_position'   => [
 				'label'       => __( 'Position of In Article Module', 'apple-news' ),
 				'type'        => 'number',
 				'min'         => 3,
 				'max'         => 99,
 				'step'        => 1,
 				'description' => __( 'If you have configured an In Article module via Customize JSON, the position that the module should be inserted into. Defaults to 3, which is after the third content block in the article body (e.g., the third paragraph).', 'apple-news' ),
 			],
+			'aside_component_class' => [
+				'label'       => __( 'Aside Content CSS Class', 'apple-news' ),
+				'type'        => 'text',
+				'description' => __( 'Enter a CSS class name that will be used to generate the Aside component. Do not prefix with a period.', 'apple-news' ),
+			],
 		];
 
 		// Add the groups.
@@ -81,6 +86,10 @@ public function __construct( $page ) {
 				'label'    => __( 'Format Settings', 'apple-news' ),
 				'settings' => [ 'html_support', 'in_article_position' ],
 			],
+			'aside'  => [
+				'label'    => __( 'Aside Component', 'apple-news' ),
+				'settings' => [ 'aside_component_class' ],
+			],
 		];
 
 		parent::__construct( $page );

assets/themes/classic.json

@@ -1,6 +1,12 @@
 {
     "ad_frequency": 5,
     "ad_margin": 15,
+    "aside_alignment": "right",
+    "aside_background_color": "#d3d3d3",
+    "aside_border_color": "#000000",
+    "aside_border_style": "none",
+    "aside_border_width": 3,
+    "aside_padding": 20,
     "blockquote_background_color": "#d3d3d3",
     "blockquote_border_color": "#000000",
     "blockquote_border_style": "none",

assets/themes/colorful.json

@@ -1,6 +1,12 @@
 {
     "ad_frequency": 5,
     "ad_margin": 15,
+    "aside_alignment": "right",
+    "aside_background_color": "#ffff00",
+    "aside_border_color": "#3045ca",
+    "aside_border_style": "none",
+    "aside_border_width": 3,
+    "aside_padding": 20,
     "blockquote_background_color": "#ffff00",
     "blockquote_border_color": "#3045ca",
     "blockquote_border_style": "none",

assets/themes/dark.json

@@ -1,6 +1,12 @@
 {
     "ad_frequency": 5,
     "ad_margin": 15,
+    "aside_alignment": "right",
+    "aside_background_color": "",
+    "aside_border_color": "#ffe890",
+    "aside_border_style": "solid",
+    "aside_border_width": 1,
+    "aside_padding": 20,
     "blockquote_background_color": "",
     "blockquote_border_color": "#ffe890",
     "blockquote_border_style": "solid",

assets/themes/default.json

@@ -1,6 +1,12 @@
 {
     "ad_frequency": 5,
     "ad_margin": 15,
+    "aside_alignment": "right",
+    "aside_background_color": "#e1e1e1",
+    "aside_border_color": "#4f4f4f",
+    "aside_border_style": "solid",
+    "aside_border_width": 3,
+    "aside_padding": 20,
     "blockquote_background_color": "#e1e1e1",
     "blockquote_border_color": "#4f4f4f",
     "blockquote_border_style": "solid",

assets/themes/modern.json

@@ -1,6 +1,12 @@
 {
     "ad_frequency": 5,
     "ad_margin": 15,
+    "aside_alignment": "right",
+    "aside_background_color": "#e6f7ff",
+    "aside_border_color": "#30bcff",
+    "aside_border_style": "solid",
+    "aside_border_width": 3,
+    "aside_padding": 20,
     "blockquote_background_color": "#e6f7ff",
     "blockquote_border_color": "#30bcff",
     "blockquote_border_style": "solid",

assets/themes/pastel.json

@@ -1,6 +1,12 @@
 {
     "ad_frequency": 5,
     "ad_margin": 15,
+    "aside_alignment": "right",
+    "aside_background_color": "#ffebe0",
+    "aside_border_color": "#ffffff",
+    "aside_border_style": "none",
+    "aside_border_width": 3,
+    "aside_padding": 20,
     "blockquote_background_color": "#ffebe0",
     "blockquote_border_color": "#ffffff",
     "blockquote_border_style": "none",

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

@@ -88,6 +88,7 @@ public static function initialize(
 		self::$component_styles = $component_styles;
 
 		// Order is important. Components are checked in the order they are added.
+		self::register_component( 'aside', '\\Apple_Exporter\\Components\\Aside' );
 		self::register_component( 'gallery', '\\Apple_Exporter\\Components\\Gallery' );
 		self::register_component( 'tweet', '\\Apple_Exporter\\Components\\Tweet' );
 		self::register_component( 'facebook', '\\Apple_Exporter\\Components\\Facebook' );

includes/apple-exporter/class-theme.php

@@ -569,6 +569,48 @@ private static function initialize_options() {
 				'label'       => __( 'Ad Margin', 'apple-news' ),
 				'type'        => 'integer',
 			],
+			'aside_alignment'                    => [
+				'default' => 'right',
+				'label'   => __( 'Aside component alignment', 'apple-news' ),
+				'options' => [ 'left', 'right' ],
+				'type'    => 'select',
+			],
+			'aside_background_color'             => [
+				'default' => '#e1e1e1',
+				'label'   => __( 'Aside background color', 'apple-news' ),
+				'type'    => 'color',
+			],
+			'aside_background_color_dark'        => [
+				'default' => '',
+				'label'   => __( 'Aside background color', 'apple-news' ),
+				'type'    => 'color',
+			],
+			'aside_border_color'                 => [
+				'default' => '#4f4f4f',
+				'label'   => __( 'Aside border color', 'apple-news' ),
+				'type'    => 'color',
+			],
+			'aside_border_color_dark'            => [
+				'default' => '',
+				'label'   => __( 'Aside border color', 'apple-news' ),
+				'type'    => 'color',
+			],
+			'aside_border_style'                 => [
+				'default' => 'solid',
+				'label'   => __( 'Aside border style', 'apple-news' ),
+				'options' => [ 'solid', 'dashed', 'dotted', 'none' ],
+				'type'    => 'select',
+			],
+			'aside_border_width'                 => [
+				'default' => 3,
+				'label'   => __( 'Aside border width', 'apple-news' ),
+				'type'    => 'integer',
+			],
+			'aside_padding'                      => [
+				'default' => 20,
+				'label'   => __( 'Aside padding', 'apple-news' ),
+				'type'    => 'integer',
+			],
 			'author_color'                       => [
 				'default' => '#7c7c7c',
 				'label'   => __( 'Author font color', 'apple-news' ),
@@ -2503,6 +2545,21 @@ private function initialize_groups() {
 					'ad_margin',
 				],
 			],
+			'aside'           => [
+				'label'       => __( 'Aside', 'apple-news' ),
+				'description' => __( 'Content that is not directly related to the article.', 'apple-news' ),
+				'settings'    => [
+					'aside_alignment',
+					'aside_background_color',
+					'aside_border_color',
+					'aside_border_style',
+					'aside_border_width',
+					'aside_padding',
+					'dark_mode_colors_heading',
+					'aside_background_color_dark',
+					'aside_border_color_dark',
+				],
+			],
 			'component_order' => [
 				'label'    => __( 'Component Order', 'apple-news' ),
 				'settings' => [ 'meta_component_order' ],