malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add logic for customize stylesheet

Browse Source
This commit is contained in:
Tetrakern 2024-02-15 17:54:04 +01:00
parent 4716c7f539
commit 78a28c9053
4 changed files with 131 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -3,4 +3,4 @@
*.codekit3
.vscode
wp-cli.phar
bundled-fonts.css
/cache

22
includes/functions/_customizer.php
View File

@ -265,10 +265,11 @@ if ( ! function_exists( 'fictioneer_hsl_font_code' ) ) {
// =============================================================================
/**
* Watches for customizer updates to delete Transients
* Watches for customizer updates to purge Transients and files
*
* @since 4.7.0
* @since 5.10.1 - Extend cache purging.
* @since 5.11.0 - Purge customize.css file
*/
function fictioneer_watch_for_customer_updates() {
@ -276,6 +277,9 @@ function fictioneer_watch_for_customer_updates() {
fictioneer_delete_transients_like( 'fictioneer_' );
fictioneer_purge_nav_menu_transients();
// Rebuild customize stylesheet
fictioneer_build_customize_css();
// Files
$bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
@ -558,8 +562,6 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
$small_border_radius = (int) get_theme_mod( 'small_border_radius', 2 );
$card_grid_column_min = (int) get_theme_mod( 'card_grid_column_min', 308 );
$card_cover_width_mod = get_theme_mod( 'card_cover_width_mod', 1 );
$header_image_fading_start = fictioneer_sanitize_integer( get_theme_mod( 'header_image_fading_start', 0 ), 0, 0, 99 );
$header_image_fading_breakpoint = (int) get_theme_mod( 'header_image_fading_breakpoint', 0 );
$font_primary = fictioneer_get_custom_font( 'primary_font_family_value', 'var(--ff-system)', 'Open Sans' );
$font_secondary = fictioneer_get_custom_font( 'secondary_font_family_value', 'var(--ff-base)', 'Lato' );
@ -600,20 +602,6 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
--card-cover-width-mod: {$card_cover_width_mod};
}";
if ( $header_image_fading_start > 0 ) {
if ( $header_image_fading_breakpoint > 320 ) {
$layout_css .= "@media only screen and (min-width: {$header_image_fading_breakpoint}px) {
:root {
--header-fading-mask-image: " . fictioneer_get_fading_gradient( 100, $header_image_fading_start, 100, 'var(--header-fading-mask-image-rotation, 180deg)' ) . ";
}
}";
} else {
$layout_css .= ":root {
--header-fading-mask-image: " . fictioneer_get_fading_gradient( 100, $header_image_fading_start, 100, 'var(--header-fading-mask-image-rotation, 180deg)' ) . ";
}";
}
}
if ( get_theme_mod( 'use_custom_layout', false ) ) {
$layout_css .= ":root, :root[data-theme=base] {
--layout-spacing-vertical: " . fictioneer_get_css_clamp( $vertical_min, $vertical_max, 480, $site_width ) . ";

65
includes/functions/_theme_setup.php
View File

@ -624,7 +624,70 @@ function fictioneer_customizer_queue() {
fictioneer_add_customized_light_mode_css();
fictioneer_add_customized_dark_mode_css();
}
add_action( 'wp_enqueue_scripts', 'fictioneer_customizer_queue', 999 ); // Make sure this is added last!
add_action( 'wp_enqueue_scripts', 'fictioneer_customizer_queue', 999 );
// =============================================================================
// ENQUEUE CUSTOMIZE CSS
// =============================================================================
/**
* Enqueues customize stylesheets <head> meta
*
* @since 5.11.0
*/
function fictioneer_output_customize_css() {
// Setup
$file_path = WP_CONTENT_DIR . '/themes/fictioneer/cache/customize.css';
$last_built_timestamp = get_option( 'fictioneer_customize_css_timestamp', '123456789' );
// Create file if it does not exist
if ( ! file_exists( $file_path ) ) {
fictioneer_build_customize_css();
}
// Output customize stylesheet...
if ( file_exists( $file_path ) ) {
wp_enqueue_style(
'fictioneer-customize',
get_template_directory_uri() . "/cache/customize.css?timestamp={$last_built_timestamp}",
['fictioneer-application'],
FICTIONEER_VERSION
);
}
}
if ( ! is_customize_preview() ) {
add_action( 'wp_enqueue_scripts', 'fictioneer_output_customize_css', 9999 );
}
/**
* Enqueues preview customize stylesheets <head> meta
*
* @since 5.11.0
*/
function fictioneer_output_customize_preview_css() {
// Setup
$file_path = WP_CONTENT_DIR . '/themes/fictioneer/cache/customize-preview.css';
// Create file if it does not exist
fictioneer_build_customize_css( 'preview' );
// Output customize stylesheet...
if ( file_exists( $file_path ) ) {
wp_enqueue_style(
'fictioneer-customize',
get_template_directory_uri() . "/cache/customize-preview.css?timestamp=" . time(),
['fictioneer-application'],
FICTIONEER_VERSION
);
}
}
if ( is_customize_preview() ) {
add_action( 'wp_enqueue_scripts', 'fictioneer_output_customize_preview_css', 9999 );
}
// =============================================================================
// ENQUEUE OVERRIDE STYLESHEETS

61
includes/functions/_utility.php
View File

@ -2990,6 +2990,67 @@ function fictioneer_build_bundled_fonts() {
file_put_contents( $bundled_fonts, $combined_font_css );
}
// =============================================================================
// BUILD BUNDLED CUSTOMIZE CSS FILE
// =============================================================================
/**
* Build bundled font stylesheet
*
* @since 5.11.0
*
* @param string|null $content Optional. In which context the stylesheet created,
* for example 'preview' for the Customizer.
*/
function fictioneer_build_customize_css( $content = null ) {
// --- Setup -----------------------------------------------------------------
$file_path = WP_CONTENT_DIR . '/themes/fictioneer/cache/customize.css';
$css = '';
if ( $content === 'preview' ) {
$file_path = WP_CONTENT_DIR . '/themes/fictioneer/cache/customize-preview.css';
}
// --- Fading header image ---------------------------------------------------
$header_image_fading_start = fictioneer_sanitize_integer( get_theme_mod( 'header_image_fading_start', 0 ), 0, 0, 99 );
$header_image_fading_breakpoint = (int) get_theme_mod( 'header_image_fading_breakpoint', 0 );
if ( $header_image_fading_start > 0 ) {
if ( $header_image_fading_breakpoint > 320 ) {
$css .= "@media only screen and (min-width: {$header_image_fading_breakpoint}px) {
:root {
--header-fading-mask-image: " . fictioneer_get_fading_gradient( 100, $header_image_fading_start, 100, 'var(--header-fading-mask-image-rotation, 180deg)' ) . ";
}
}";
} else {
$css .= ":root {
--header-fading-mask-image: " . fictioneer_get_fading_gradient( 100, $header_image_fading_start, 100, 'var(--header-fading-mask-image-rotation, 180deg)' ) . ";
}";
}
}
// --- Filters ---------------------------------------------------------------
$css = apply_filters( 'fictioneer_filter_customize_css', $css );
// --- Minify ----------------------------------------------------------------
$css = fictioneer_minify_css( $css );
// --- Update options --------------------------------------------------------
if ( $content !== 'preview' ) {
update_option( 'fictioneer_customize_css_timestamp', time(), true );
}
// --- Save ------------------------------------------------------------------
file_put_contents( $file_path, $css );
}
// =============================================================================
// GENERATE LINEAR GRADIENT CSS WITH APPROXIMATED CUBIC-BEZIER
// =============================================================================