diff --git a/.gitignore b/.gitignore index a4c53d12..8cb910b4 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,4 @@ *.codekit3 .vscode wp-cli.phar -bundled-fonts.css +/cache diff --git a/includes/functions/_customizer.php b/includes/functions/_customizer.php index c4c1af1c..fcb23e5c 100644 --- a/includes/functions/_customizer.php +++ b/includes/functions/_customizer.php @@ -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 ) . "; diff --git a/includes/functions/_theme_setup.php b/includes/functions/_theme_setup.php index 4d2b5c14..da6fb696 100644 --- a/includes/functions/_theme_setup.php +++ b/includes/functions/_theme_setup.php @@ -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 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 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 diff --git a/includes/functions/_utility.php b/includes/functions/_utility.php index b4e614bb..b7a8bc93 100644 --- a/includes/functions/_utility.php +++ b/includes/functions/_utility.php @@ -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 // =============================================================================