Errors and layout issues

The Apple News plugin uses a built-in template that uses a default component order. Re-ordering certain components (like moving the title below the image) is a feature that’s in the queue for development for the next version of the plugin. You can also use the numerous hooks and filters provided by the plugin to develop your own custom components or templates. It does require a strong knowledge of the Apple News format, so I suggest reading through their documentation thoroughly if you go that route.

All body styles are converted to Markdown format which is what Apple News uses.

Those errors seem to indicate that the body content is empty. I’d recommend downloading the JSON for that post and troubleshooting further in the News Preview tool.

Thanks Bradford. I’ll look at the News Preview tool.

One other query – I mentioned body styles but specifically heading tags and corresponding line-heights. In Advanced settings >’heading line height’ seems to affect all H tag line-heights. How to override this for eg H3 tags?

You’d need to edit the final JSON, there really isn’t a way around that. This can be done using the filter apple_news_get_json

I think we could improve the available filters for a future version though.

Another thought would also be to create a custom Heading component class that handles this too. You can create your own within your theme and then filter out the existing one and insert yours using the filter apple_news_initialize_components

OK, thanks. I’ll look into this.

also look at the apple_news_component_text_styles filter, which passes all the styles. you can mod any of the existing ones (or add new ones) there.

Good call

Hmmm… might be out of my depth, here.
You have a ‘title’ component which has and uses styles and a ‘heading component that doesn’t use styles (and isn’t supported by apple markdown). Where would I add a custom style to H3 tags?

Sorry – both components use styles. I’m confused about this directive in the headings class

*: No markdown because the apple format doesn't support markdown with
		// textStyle in headings.

Well – downloaded Apple News preview and no json files can be opened (not even examples downloaded from the Apple developer site) and no console logs show up so I’m done for now.

I’ll await an update to the plugin and see how it goes.

After more testing, my main layout issue is with images placed within body text. No matter how the images are aligned, the paragraphs are always split at the first line. See this image.
Could this be to do with the body class and how it manages non-markdownable content – function split_non_markdownable ?

Just following up on this to see how I can change heading styles – lineHeight and margins.

I’ve been looking into the apple_news_component_text_styles filter but cant work out how to utilise it. Are we talking about html or json here?

protected function build() {
		return apply_filters( 'apple_news_component_text_styles', $this->styles );
	}

I assume I need to access two private functions in the class-heading.php – set_layout and set_style or the $styles variable but I can’t work out how to access them. I’ve spent a lot of time trying to find answers looking at lots of examples but no luck.

You shouldn’t need to access the private functions. The filter you specifically mentioned takes a PHP array in the format of Apple News JSON.

With regards to customizing the layout and styles, the built-in component classes create a default layout that has some customization options in the Apple News plugin settings. For more advanced customizations, we’ve made it easy to create your own version of the component classes and substitute them for the built-in versions using the apple_news_initialize_components hook: https://github.com/alleyinteractive/apple-news/blob/master/includes/apple-exporter/class-component-factory.php#L93

You can also always modify the final JSON output (it’s a PHP array at this point) using apple_news_generate_json: https://github.com/alleyinteractive/apple-news/blob/master/includes/apple-exporter/class-exporter.php#L192

Hope that helps!

I’ve spent a lot of time trying to use the filter hook in my functions.php file – apple_news_initialize_components hook – but cant get anything to work.

I want to replace the ‘heading’ line of the $Components array here:
self::register_component( 'heading' , '\\Apple_Exporter\\Components\\Heading' ); with another class/file but unsure how to reference the array in my function as it’s part of the class Component_Factory.

My latest attempt:

function change_components($components){ \\How to access Component_Factory::$components

	//$newcomps = new Component_Factory::$components;

	$ns = 'headingtest';
	$nc = '\\Apple_Exporter\\Components\\Headingtest';

	foreach($components as $comp){

	$comp = str_replace('heading',$ns,$comp);
	$comp .= str_replace('\\Apple_Exporter\\Components\\Heading',$nc,$comp);
		return $comp;
	}

	return $components;
}
add_filter('apple_news_initialize_components','change_components');

I know you guys are busy with the plain development but any hints would be appreciated.

Iterating over an array with a foreach loop creates a copy of the array, unless you append the & param to the pointer variable like:

foreach( $components as &$comp ) {

Otherwise anything you do in the loop does not modify the array.

That said, a much simpler way to do this is to use the apple_news_register_component filter in the same class, something like:

function override_heading( $classname, $shortname ) {
	if ( 'heading' === $shortname ) {
		$classname = 'YOUR CLASSNAME GOES HERE';
	}

	return $classname;
}
add_filter( 'apple_news_register_component', 'override_heading', 10, 2 );

Thanks Bradford.
I have this code, below, but I’m getting a blank screen on submitting for publishing (no errors). I have a file called class-headingtest.php in the same directory as the other class files.

function override_heading( $classname, $shortname ) {
	if ( 'heading' === $shortname ) {
		$classname = '\\Apple_Exporter\\Components\\Headingtest';
	}

	return $classname;
}
add_filter( 'apple_news_register_component', 'override_heading', 10, 2 );