Performance Improvements and Better Theme Compatibility Comes to Highlight and Share 4.5

Highlight and Share 4.5 has been released, and it comes with several performance improvements and a fix to a pesky layout bug that affected block and full-site editing layouts.

Why some theme layouts broke with Highlight and Share

When Highlight and Share was installed, it broke some layouts. This can happen with block themes or for layouts that use blocks.

The reason this happened was because Highlight and Share wraps the post content in order to add extra context to the post via data attributes. These data attributes contained the post title, URL, hashtags, and other information that made sharing more accurate. If the data attributes weren’t found, it would try some fallbacks, but these had limitations. For example, a post URL doesn’t always match the URL in the location bar, so it’s necessary to provide a way to access this “real” URL via JavaScript. Furthermore, you can technically have multiple full posts on an archive page, so in that case, the location bar would provide the wrong URL.

In addition, the wrapper is needed to let Highlight and Share know where to target its event handlers so it can capture selected content. In order to auto-target post content, a wrapper was added around the content. This is what broke some layouts.

Here’s an example in code that demonstrates why Highlight and Share would break some layouts:

<div class="has-content-area" data-url="https://dlxplugins.local/" data-title="Home" data-hashtags="">
	<div class="wp-block-cover alignfull is-light">
		<!-- image code -->
	</div>
</div>Code language: HTML, XML (xml)

The issue is the alignfull class. While the Highlight and Share wrapper has no constraints, a block layout honoring alignfull typically assumes it starts immediately after the opening content wrapper. The class alignfull shouldn’t be used in nested (child) blocks. In child blocks, alignfull typically matches the content width, which is often smaller than the screen width.

Here’s what would happen: the layout would be centered with a visible margin.

Pin itShare

The workaround for broken layouts

A workaround to this layout breakage was to disable Highlight and Share for post content.

Pin itShare

You would then need to manually add a CSS class where Highlight and Share could target content. This involved the user having to inspect their HTML or leave a support request for a fix.

Pin itShare

The workaround worked, but again, it involves user intervention, and getting page data from JavaScript alone is just not as accurate.

The fix for the broken layouts

The fix was adding a placeholder <div> below the content instead of wrapping it.

<div class="entry-content">
	<div class="wp-block-cover alignfull is-root-container">
		<!-- sample block in here -->
	</div>
	<div class="has-social-placeholder has-content-area" data-url="https://dlxplugins.local/" data-title="Home" data-hashtags=""></div>
</div>Code language: HTML, XML (xml)

This meant in JavaScript, I could target the has-social-placeholder class, grab its parent, and then attach the text selection event to that. This ensures that the correct content area has Highlight and Share enabled without breaking layouts.

Pin itShare

I had to place the placeholder below the content because some block themes target the container class and then search for any elements directly after it to set a full or wide width. This trickles down until the bottom. Since the placeholder is hidden and last, it doesn’t display or affect anything below it.

Opting out of the new layout fix

I would argue that ninety-nine times out of a hundred, the post content has some wrapper, so I don’t anticipate many issues (knocking on wood). However, if there is any kind of trouble, you can opt-in to legacy mode via a filter:

// Enables the legacy content loop markup for the theme where a div wraps the content.
add_filter( 'has_legacy_content_loop_markup', '__return_true' );
Code language: PHP (php)

You’d place this in your theme’s functions.php or in a code snippet plugin (shown below).

Code Snippets

Author(s): Code Snippets Pro

Current Version: 3.6.6.1

Last Updated: November 28, 2024

code-snippets.3.6.6.1.zip

94%Ratings 1,000,000+Installs WP 5.0+Requires

Some performance improvements have landed

For the sake of page performance, I’ve decided to make the Highlight and Share styles load in the footer.

The main Highlight and Share CSS file contains markup for the various themes that Highlight and Share uses. These styles are not needed urgently because Highlight and Share only displays when an action occurs (click, hover, text selection). This means that I can load the styles late, and by the time the user interacts with the text, the styles should be loaded.

Performance improvements and critical CSS

Highlight and Share now inlines its critical CSS and loads the heavy stylesheet in the footer.

Critical CSS are styles that are needed above the fold so that a user doesn’t see an unstyled page flash and then fix itself upon load.

One best practice for critical CSS is to inline it to save an HTTP request. This can bloat your page size and make things worse, but there’s little harm in small snippets of critical CSS.

This is how I added the critical inline CSS for the social placeholder I need for the fixed layout:

/**
 * Register an inline style with no attached stylesheet.
 */
wp_register_style( 'has-inline-styles', false );
$inline_styles = '.has-social-placeholder {display: none;height: 0;width: 0;overflow: hidden;}' . Themes::get_inline_highlight_css();
// Add inline styles.
wp_add_inline_style(
	'has-inline-styles',
	$inline_styles
);
wp_enqueue_style( 'has-inline-styles' );Code language: PHP (php)

You can also inline-print in the footer as well, but you’ll need to manually print out your script, as WordPress doesn’t support CSS in the footer unless you invoke function print_late_styles.

Here’s an example of how I printed my styles in the footer, using wp_print_styles.

/**
 * Output stylesheets in the footer that do not need to be loaded in the head.
 *
 * Enqueue styles
 *
 * @since 5.0.0
 * @access public
 *
 * @see add_scripts
 */
public function output_footer_css() {
	wp_register_style(
		'highlight-and-share',
		Functions::get_plugin_url( 'dist/has-themes.css' ),
		array(),
		HIGHLIGHT_AND_SHARE_VERSION,
		'all'
	);
	wp_print_styles( 'highlight-and-share' );
}Code language: PHP (php)

More is planned for Highlight and Share

I’ve been updating Highlight and Share’s GitHub issues, and there are several good ideas there. If you like an idea, please comment on or react to the issue to show your support for the feature.

Here are a few ideas in the issues:

• Add Pinterest sharing for images
• Better mobile sharing
• Add stats to track social sharing clicks

Conclusion

While there aren’t many new shiny features in this version, I think this is a good release as it fixes a pesky bug and makes things load faster.

Thank you for reading.

Like this tutorial? There's more like it. Subscribe today!

Name(Required)

First Last

Email(Required)

Δ

Published On: on August 14, 2023

Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.