Skip to content

Commit

Permalink
Classic Theme Helper: Require Content Options from the package (#39210)
Browse files Browse the repository at this point in the history
  • Loading branch information
@coder-karen
coder-karen authored Sep 11, 2024
1 parent 2aa1c38 commit 63f8b7f
Show file tree
Hide file tree
Showing 14 changed files with 449 additions and 493 deletions.
4 changes: 4 additions & 0 deletions ...lassic-theme-helper/changelog/add-require-content-options-in-classic-theme-helper-package
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Content Options: Ensuring feature is now required.
1 change: 1 addition & 0 deletions projects/packages/classic-theme-helper/src/class-main.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ class Main {
'site-breadcrumbs.php',
'social-menu.php',
'jetpack-color.php',
'content-options.php',
);

/** Holds the singleton instance of the Loader
Expand Down
288 changes: 109 additions & 179 deletions projects/packages/classic-theme-helper/src/content-options/customizer.js
View file
Original file line number Diff line number Diff line change
@@ -1,218 +1,148 @@
/* global blogDisplay, postDetails */
/* global blogDisplay, postDetails, wp */

/**
* customizer.js
*
* Theme Customizer enhancements for a better user experience.
*
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
* @param $
*/

jQuery( function ( $, wp ) {
// Blog Display
wp.customize( 'jetpack_content_blog_display', function ( value ) {
if ( 'content' === blogDisplay.display ) {
$( '.jetpack-blog-display.jetpack-the-excerpt' ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute',
} );
$( '.jetpack-blog-display.jetpack-the-content' ).css( {
clip: 'auto',
position: 'relative',
} );
} else if ( 'excerpt' === blogDisplay.display ) {
$( '.jetpack-blog-display.jetpack-the-content' ).css( {
/**
* Function to apply styles to elements based on the display type
* @param {object} selectors - HTML selectors which styles will apply to.
* @param {object} styles - Styles to be applied to selectors.
*/
function applyStyles( selectors, styles ) {
document.querySelectorAll( selectors ).forEach( el => {
for ( const [ key, value ] of Object.entries( styles ) ) {
el.style[ key ] = value;
}
} );
}

// Blog Display
wp.customize( 'jetpack_content_blog_display', function ( value ) {
/**
* Updates the blog display based on the selected option.
* @param {string} to - Content display option.
*/
function updateBlogDisplay( to ) {
const contentSelectors = '.jetpack-blog-display.jetpack-the-content';
const excerptSelectors = '.jetpack-blog-display.jetpack-the-excerpt';
const featuredContentSelectors = '.featured-content .jetpack-blog-display';

if ( to === 'content' ) {
applyStyles( `${ excerptSelectors }, ${ featuredContentSelectors }.jetpack-the-excerpt`, {
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute',
} );
$( '.jetpack-blog-display.jetpack-the-excerpt' ).css( {
applyStyles( `${ contentSelectors }, ${ featuredContentSelectors }.jetpack-the-content`, {
clip: 'auto',
position: 'relative',
} );
} else if ( 'mixed' === blogDisplay.display ) {
$( '.jetpack-blog-display.jetpack-the-content.output-the-content' ).css( {
clip: 'auto',
position: 'relative',
} );
$( '.jetpack-blog-display.jetpack-the-excerpt.output-the-content' ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute',
} );
$( '.jetpack-blog-display.jetpack-the-content.output-the-excerpt' ).css( {
} else if ( to === 'excerpt' ) {
applyStyles( `${ contentSelectors }, ${ featuredContentSelectors }.jetpack-the-content`, {
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute',
} );
$( '.jetpack-blog-display.jetpack-the-excerpt.output-the-excerpt' ).css( {
applyStyles( `${ excerptSelectors }, ${ featuredContentSelectors }.jetpack-the-excerpt`, {
clip: 'auto',
position: 'relative',
} );
}
value.bind( function ( to ) {
if ( 'content' === to ) {
$( '.jetpack-blog-display.jetpack-the-excerpt' ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute',
} );
$( '.jetpack-blog-display.jetpack-the-content' ).css( {
clip: 'auto',
position: 'relative',
} );
} else if ( 'excerpt' === to ) {
$( '.jetpack-blog-display.jetpack-the-content' ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute',
} );
$( '.jetpack-blog-display.jetpack-the-excerpt' ).css( {
clip: 'auto',
position: 'relative',
} );
} else if ( 'mixed' === to ) {
$( '.jetpack-blog-display.jetpack-the-content.output-the-content' ).css( {
} else if ( to === 'mixed' ) {
applyStyles(
`${ contentSelectors }.output-the-content, ${ featuredContentSelectors }.jetpack-the-content.output-the-content`,
{
clip: 'auto',
position: 'relative',
} );
$( '.jetpack-blog-display.jetpack-the-excerpt.output-the-content' ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute',
} );
$( '.jetpack-blog-display.jetpack-the-content.output-the-excerpt' ).css( {
}
);
applyStyles(
`${ excerptSelectors }.output-the-content, ${ contentSelectors }.output-the-excerpt, ${ featuredContentSelectors }.jetpack-the-excerpt.output-the-content, ${ featuredContentSelectors }.jetpack-the-content.output-the-excerpt`,
{
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute',
} );
$( '.jetpack-blog-display.jetpack-the-excerpt.output-the-excerpt' ).css( {
}
);
applyStyles(
`${ excerptSelectors }.output-the-excerpt, ${ featuredContentSelectors }.jetpack-the-excerpt.output-the-excerpt`,
{
clip: 'auto',
position: 'relative',
} );
}
if ( blogDisplay.masonry ) {
$( blogDisplay.masonry ).masonry();
}
);
}

if ( blogDisplay.masonry ) {
const masonryElement = document.querySelector( blogDisplay.masonry );
if ( masonryElement ) {
masonryElement.masonry();
}
} );
}
}

updateBlogDisplay( blogDisplay.display );
value.bind( updateBlogDisplay );
} );

/**
* Function to update post details visibility
* @param {object} selectors - HTML selectors which styles will apply to.
* @param {string} to - Content display option.
* @param {string} hiddenClass - Class to be added to the body when the post details are hidden.
*/
function updatePostDetails( selectors, to, hiddenClass ) {
document.querySelectorAll( selectors ).forEach( element => {
if ( to === false ) {
element.style.clip = 'rect(1px, 1px, 1px, 1px)';
element.style.height = '1px';
element.style.overflow = 'hidden';
element.style.position = 'absolute';
element.style.width = '1px';
document.body.classList.add( hiddenClass );
} else {
element.style.clip = 'auto';
element.style.height = 'auto';
element.style.overflow = 'auto';
element.style.position = 'relative';
element.style.width = 'auto';
document.body.classList.remove( hiddenClass );
}
} );
}

// Post Details: Date.
wp.customize( 'jetpack_content_post_details_date', function ( value ) {
value.bind( function ( to ) {
if ( false === to ) {
$( postDetails.date ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
height: '1px',
overflow: 'hidden',
position: 'absolute',
width: '1px',
} );
$( 'body' ).addClass( 'date-hidden' );
} else {
$( postDetails.date ).css( {
clip: 'auto',
height: 'auto',
overflow: 'auto',
position: 'relative',
width: 'auto',
} );
$( 'body' ).removeClass( 'date-hidden' );
}
} );
// Post Details: Date
wp.customize( 'jetpack_content_post_details_date', function ( value ) {
value.bind( function ( to ) {
updatePostDetails( postDetails.date, to, 'date-hidden' );
} );
} );

// Post Details: Categories.
wp.customize( 'jetpack_content_post_details_categories', function ( value ) {
value.bind( function ( to ) {
if ( false === to ) {
$( postDetails.categories ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
height: '1px',
overflow: 'hidden',
position: 'absolute',
width: '1px',
} );
$( 'body' ).addClass( 'categories-hidden' );
} else {
$( postDetails.categories ).css( {
clip: 'auto',
height: 'auto',
overflow: 'auto',
position: 'relative',
width: 'auto',
} );
$( 'body' ).removeClass( 'categories-hidden' );
}
} );
// Post Details: Categories
wp.customize( 'jetpack_content_post_details_categories', function ( value ) {
value.bind( function ( to ) {
updatePostDetails( postDetails.categories, to, 'categories-hidden' );
} );
} );

// Post Details: Tags.
wp.customize( 'jetpack_content_post_details_tags', function ( value ) {
value.bind( function ( to ) {
if ( false === to ) {
$( postDetails.tags ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
height: '1px',
overflow: 'hidden',
position: 'absolute',
width: '1px',
} );
$( 'body' ).addClass( 'tags-hidden' );
} else {
$( postDetails.tags ).css( {
clip: 'auto',
height: 'auto',
overflow: 'auto',
position: 'relative',
width: 'auto',
} );
$( 'body' ).removeClass( 'tags-hidden' );
}
} );
// Post Details: Tags
wp.customize( 'jetpack_content_post_details_tags', function ( value ) {
value.bind( function ( to ) {
updatePostDetails( postDetails.tags, to, 'tags-hidden' );
} );
} );

// Post Details: Author.
wp.customize( 'jetpack_content_post_details_author', function ( value ) {
value.bind( function ( to ) {
if ( false === to ) {
$( postDetails.author ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
height: '1px',
overflow: 'hidden',
position: 'absolute',
width: '1px',
} );
$( 'body' ).addClass( 'author-hidden' );
} else {
$( postDetails.author ).css( {
clip: 'auto',
height: 'auto',
overflow: 'auto',
position: 'relative',
width: 'auto',
} );
$( 'body' ).removeClass( 'author-hidden' );
}
} );
// Post Details: Author
wp.customize( 'jetpack_content_post_details_author', function ( value ) {
value.bind( function ( to ) {
updatePostDetails( postDetails.author, to, 'author-hidden' );
} );
} );

// Post Details: Comment link.
wp.customize( 'jetpack_content_post_details_comment', function ( value ) {
value.bind( function ( to ) {
if ( false === to ) {
$( postDetails.comment ).css( {
clip: 'rect(1px, 1px, 1px, 1px)',
height: '1px',
overflow: 'hidden',
position: 'absolute',
width: '1px',
} );
$( 'body' ).addClass( 'comment-hidden' );
} else {
$( postDetails.comment ).css( {
clip: 'auto',
height: 'auto',
overflow: 'auto',
position: 'relative',
width: 'auto',
} );
$( 'body' ).removeClass( 'comment-hidden' );
}
} );
// Post Details: Comment link
wp.customize( 'jetpack_content_post_details_comment', function ( value ) {
value.bind( function ( to ) {
updatePostDetails( postDetails.comment, to, 'comment-hidden' );
} );
} )( jQuery );
} );
15 changes: 14 additions & 1 deletion projects/packages/classic-theme-helper/src/content-options/customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
* @package automattic/jetpack-classic-theme-helper
*/

use Automattic\Jetpack\Assets;

if ( ! function_exists( 'jetpack_content_options_customize_register' ) ) {

/**
Expand Down Expand Up @@ -493,7 +495,18 @@ function jetpack_content_options_customize_preview_js() {
$author = ( ! empty( $post_details['author'] ) ) ? $post_details['author'] : null;
$comment = ( ! empty( $post_details['comment'] ) ) ? $post_details['comment'] : null;

wp_enqueue_script( 'jetpack-content-options-customizer', plugins_url( 'customizer.js', __FILE__ ), array( 'jquery', 'customize-preview' ), '1.0', true );
Assets::register_script(
'jetpack-content-options-customizer',
'../../dist/content-options/customizer.js',
__FILE__,
array(
'dependencies' => array(
'customize-preview',
),
'in_footer' => true,
'enqueue' => true,
)
);

wp_localize_script(
'jetpack-content-options-customizer',
Expand Down
6 changes: 4 additions & 2 deletions projects/packages/classic-theme-helper/src/content-options/post-details.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,10 @@ function jetpack_post_details_enqueue_scripts() {
$css = $elements . ' { clip: rect(1px, 1px, 1px, 1px); height: 1px; position: absolute; overflow: hidden; width: 1px; }';

// Add the CSS to the stylesheet.
// @phan-suppress-next-line PhanTypeArraySuspiciousNullable.
wp_add_inline_style( $post_details['stylesheet'], $css );

if ( is_array( $post_details ) && isset( $post_details['stylesheet'] ) ) {
wp_add_inline_style( $post_details['stylesheet'], $css );
}
}
add_action( 'wp_enqueue_scripts', 'jetpack_post_details_enqueue_scripts' );

Expand Down
4 changes: 4 additions & 0 deletions ...cts/plugins/jetpack/changelog/add-require-content-options-in-classic-theme-helper-package
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: other

Content Options: Ensure the feature is loaded via the Classic Theme Helper package instead of Jetpack module.
Loading

0 comments on commit 63f8b7f

Please sign in to comment.