AN-56 Final tweaks and version bump (#277)

* Changes the nomenclature for "body alignment" to "body orientation" and adds description text making the behavior clear.
* Adds a column of margin on the right for left orientation and a column of margin on the left for right orientation.
* Changes behavior of headings on center orientation to be aligned to the left side of body text.
* Version bump to 1.2.1 and relevant additions to changelog.

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

@@ -69,8 +69,9 @@ function __construct( $page ) {
 				'type' => 'color',
 			),
 			'body_orientation' => array(
-				'label' => __( 'Body alignment', 'apple-news' ),
+				'label' => __( 'Body orientation', 'apple-news' ),
 				'type' => array( 'left', 'center', 'right' ),
+				'description' => __( 'Controls margins on larger screens. Left orientation includes one column of margin on the right, right orientation includes one column of margin on the left, and center orientation includes one column of margin on either side.', 'apple-news' ),
 			),
 			'body_tracking' => array(
 				'label' => __( 'Body tracking', 'apple-news' ),

apple-news.php

@@ -12,7 +12,7 @@
  * Plugin Name: Publish to Apple News
  * Plugin URI:  http://github.com/alleyinteractive/apple-news
  * Description: Export and sync posts to Apple format.
- * Version:     1.2.0
+ * Version:     1.2.1
  * Author:      Alley Interactive
  * Author URI:  https://www.alleyinteractive.com
  * Text Domain: apple-news

assets/js/settings.js

@@ -123,7 +123,6 @@
 		appleNewsSetCSS( '.apple-news-settings-preview p', 'body_color', 'color', null, null );
 		appleNewsSetCSS( '.apple-news-settings-preview a', 'body_link_color', 'color', null, null );
 		appleNewsSetCSS( '.apple-news-settings-preview', 'body_background_color', 'background-color', null, null );
-		appleNewsSetCSS( '.apple-news-settings-preview p', 'body_orientation', 'text-align', null, null );
 		appleNewsSetCSS( '.apple-news-settings-preview p', 'body_line_height', 'line-height', 'px', null );
 		appleNewsSetCSS( '.apple-news-settings-preview p', 'body_line_height', 'margin-bottom', 'px', null );
 		appleNewsSetCSS( '.apple-news-image', 'body_line_height', 'margin-bottom', 'px', null );

includes/apple-exporter/builders/class-component-layouts.php

@@ -103,22 +103,27 @@ public function set_anchor_layout_for( $component ) {
 		$layout_name = "anchor-layout-$position";
 
 		if ( ! $this->layout_exists( $layout_name ) ) {
-			// Cache settings
+
+			// Cache settings.
+			$body_orientation = $this->get_setting( 'body_orientation' );
+			$body_offset = $this->get_setting( 'body_offset' );
 			$alignment_offset = $this->get_setting( 'alignment_offset' );
 			$body_column_span = $this->get_setting( 'body_column_span' );
-			$layout_columns   = $this->get_setting( 'layout_columns' );
+			$layout_columns = $this->get_setting( 'layout_columns' );
 
 			// Find out the starting column. This is easy enough if we are anchoring
 			// left, but for right side alignment, we have to make some math :)
-			$col_start = 0;
-			if ( 'right' == $position ) {
+			$col_start = $body_offset;
+			if ( 'right' === $position ) {
 				if ( $component->is_anchor_target() ) {
-					$col_start = $alignment_offset;
-				} elseif ( 'center' === $this->get_setting( 'body_orientation' ) ) {
+					$col_start += $alignment_offset;
+				} elseif ( 'center' === $body_orientation ) {
 					$col_start = $layout_columns - $alignment_offset;
 				} else {
-					$col_start = $body_column_span - $alignment_offset;
+					$col_start += $body_column_span - $alignment_offset;
 				}
+			} elseif ( 'left' === $position && 'center' === $body_orientation ) {
+				$col_start = 0;
 			}
 
 			// Find the column span. For the target element, let's use the same

includes/apple-exporter/class-settings.php

@@ -44,6 +44,7 @@ class Settings {
 
 		'layout_margin' => 100,
 		'layout_gutter' => 20,
+		'layout_width' => 1024,
 
 		'body_font' => 'AvenirNext-Regular',
 		'body_size' => 18,
@@ -200,7 +201,7 @@ public function __set( $name, $value ) {
 	 * @return int The number of columns for aligned components to span.
 	 */
 	public function alignment_offset() {
-		return ( 'center' === $this->body_orientation ) ? 5 : 4;
+		return ( 'center' === $this->body_orientation ) ? 5 : 3;
 	}
 
 	/**
@@ -220,7 +221,27 @@ public function all() {
 	 * @return int The number of columns for the body to span.
 	 */
 	public function body_column_span() {
-		return 7;
+		return ( 'center' === $this->body_orientation ) ? 7 : 6;
+	}
+
+	/**
+	 * Get the left margin column offset.
+	 *
+	 * @access public
+	 * @return int The number of columns to offset on the left.
+	 */
+	public function body_offset() {
+		switch ( $this->body_orientation ) {
+			case 'right':
+				return $this->layout_columns - $this->body_column_span;
+			case 'center':
+				return floor(
+					( $this->layout_columns - $this->body_column_span ) / 2
+				);
+				break;
+			default:
+				return 0;
+		}
 	}
 
 	/**
@@ -249,16 +270,6 @@ public function layout_columns() {
 		return ( 'center' === $this->body_orientation ) ? 9 : 7;
 	}
 
-	/**
-	 * Get the computed layout width.
-	 *
-	 * @access public
-	 * @return int The correct layout width based on the body orientation.
-	 */
-	public function layout_width() {
-		return ( 'center' === $this->body_orientation ) ? 768 : 1024;
-	}
-
 	/**
 	 * Set a setting.
 	 *

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

@@ -131,27 +131,6 @@ protected function html_enabled() {
 		return true;
 	}
 
-	/**
-	 * Get the start column for the body based on the layout.
-	 *
-	 * @access private
-	 */
-	private function get_col_start() {
-		// Find out where the body must start according to the body orientation.
-		// Orientation defaults to left, thus, col_start is 0.
-		$col_start = 0;
-		switch ( $this->get_setting( 'body_orientation' ) ) {
-		case 'right':
-			$col_start = $this->get_setting( 'layout_columns' ) - $this->get_setting( 'body_column_span' );
-			break;
-		case 'center':
-			$col_start = floor( ( $this->get_setting( 'layout_columns' ) - $this->get_setting( 'body_column_span' ) ) / 2 );
-			break;
-		}
-
-		return $col_start;
-	}
-
 	/**
 	 * Set the default layout for the component.
 	 *
@@ -160,7 +139,7 @@ private function get_col_start() {
 	private function set_default_layout() {
 		$this->json[ 'layout' ] = 'body-layout';
 		$this->register_layout( 'body-layout', array(
-			'columnStart' => $this->get_col_start(),
+			'columnStart' => $this->get_setting( 'body_offset' ),
 			'columnSpan'  => $this->get_setting( 'body_column_span' ),
 			'margin'      => array(
 				'top' => 12,
@@ -170,7 +149,7 @@ private function set_default_layout() {
 
 		// Also pre-register the layout that will be used later for the last body component
 		$this->register_layout( 'body-layout-last', array(
-			'columnStart' => $this->get_col_start(),
+			'columnStart' => $this->get_setting( 'body_offset' ),
 			'columnSpan'  => $this->get_setting( 'body_column_span' ),
 			'margin'      => array(
 				'top' => 12,

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

@@ -438,20 +438,16 @@ protected function register_full_width_layout( $name, $spec ) {
 	}
 
 	/**
-	 * Some components follow this rule:
-	 *  1. If the body is centered, text here should be centered too
-	 *  2. Otherwise, align left
-	 *
-	 * This method returns either 'center' or 'left', as needed.
+	 * Returns the text alignment.
 	 *
 	 * @since 0.8.0
-	 * @return string
+	 *
 	 * @access protected
+	 * @return string The value for textAlignment.
 	 */
 	protected function find_text_alignment() {
-		if ( 'center' == $this->get_setting( 'body_orientation' ) ) {
-			return 'center';
-		}
+
+		// TODO: In a future release, update this logic to respect "align" values.
 
 		return 'left';
 	}

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

@@ -92,8 +92,13 @@ protected function build( $text ) {
 	 */
 	private function set_layout() {
 		$this->json['layout'] = 'heading-layout';
-		$this->register_full_width_layout( 'heading-layout', array(
-			'margin' => array( 'top' => 15, 'bottom' => 15 ),
+		$this->register_layout( 'heading-layout', array(
+			'columnStart' => $this->get_setting( 'body_offset' ),
+			'columnSpan' => $this->get_setting( 'body_column_span' ),
+			'margin' => array(
+				'bottom' => 15,
+				'top' => 15,
+			),
 		) );
 	}
 

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

@@ -82,7 +82,10 @@ protected function build( $text ) {
 	private function register_anchor_layout() {
 		$this->json['layout'] = 'anchored-image';
 		$this->register_layout( 'anchored-image', array(
-			'margin' => array( 'top' => 25, 'bottom' => 25 ),
+			'margin' => array(
+				'bottom' => 25,
+				'top' => 25,
+			),
 		) );
 	}
 
@@ -104,6 +107,9 @@ private function register_non_anchor_layout() {
 		// Add full bleed image option.
 		if ( 'yes' === $this->get_setting( 'full_bleed_images' ) ) {
 			$layout['ignoreDocumentMargin'] = true;
+		} else {
+			$layout['columnSpan'] = $this->get_setting( 'layout_columns' ) - 4;
+			$layout['columnStart'] = 2;
 		}
 
 		// Register the layout.

includes/class-apple-news.php

@@ -54,7 +54,7 @@ class Apple_News {
 	 * @var string
 	 * @access public
 	 */
-	public static $version = '1.2.0';
+	public static $version = '1.2.1';
 
 	/**
 	 * Extracts the filename for bundling an asset.

readme.txt

@@ -1,12 +1,12 @@
 === Publish To Apple News ===
-Contributors: potatomaster, alleyinteractive, beezwaxbuzz, gosukiwi, pilaf, jaygonzales, brianschick
-Donate link: http://wordpress.org
+Contributors: potatomaster, kevinfodness, alleyinteractive, beezwaxbuzz, gosukiwi, pilaf, jaygonzales, brianschick
+Donate link: https://wordpress.org
 Tags: publish, apple, news, iOS
 Requires at least: 4.0
 Tested up to: 4.7
-Stable tag: 1.2.0
+Stable tag: 1.2.1
 License: GPLv3 or later
-License URI: http://www.gnu.org/licenses/gpl.html
+License URI: https://www.gnu.org/licenses/gpl.html
 
 Enable your WordPress blog content to be published to your Apple News channel.
 
@@ -45,6 +45,20 @@ Please visit our [wiki](https://github.com/alleyinteractive/apple-news/wiki) for
 
 == Changelog ==
 
+= 1.2.1 =
+* Added an experimental setting to enable HTML format on body elements.
+* Added settings for monospaced fonts, which applies to <pre>, <code>, and <samp> elements in body components when HTML formatting is enabled.
+* Added additional text formatting options, including tracking (letter-spacing) and line height.
+* Split text formatting options for headings to allow full customization per heading level.
+* Modified logic for image alignment so that centered and non-aligned images now appear centered instead of right-aligned.
+* Added an option for full-bleed images that will cause all centered and non-aligned images to display edge-to-edge.
+* Added logic to intelligently split body elements around anchor targets to allow for more opportunities for ad insertion.
+* Modified column span logic on left and right orientation to align the right side of the text with the right side of right-aligned images.
+* Fixed a bug caused by hardcoded column spans on center orientation.
+* Fixed a PHP warning about accessing a static class method using arrow syntax.
+* Added unit test coverage for new functionality.
+* Refactored several core files to conform to WordPress standards and PHP best practices.
+
 = 1.2.0 =
 * Added a live preview of the font being selected (macOS only).
 * Added a live preview of formatting settings (font preview in macOS only).