Display typography with no default values
anthonyryanrusso opened this issue · comments
Issue description:
Is there a way to have the fields still display on the frontend even if you don't have default values for them? I've tried but it always hides the field.
The issue I am running into is I have default font values set for body/h1-h6 so unless the user wants to override them they should fall back to original body/h1-h6 values that are already set.
Version used:
3.0.25
Using theme_mods or options?
theme_mods
Code to reproduce the issue (config + field(s))
Kirki::add_field($opt_name, array(
'label' => esc_html__('Header top typography'),
'section' => 'header_top_typography_section',
'settings' => 'header_top_typography',
'type' => 'typography',
'required' => array(
array(
'setting' => 'header_top_visibility',
'operator' => 'contains',
'value' => array('mobile', 'tablet', 'desktop')
)
),
'default' => array(
'font-family' => '',
'font-size' => '',
'line-height' => '',
'text-transform' => '',
'letter-spacing' => '',
'color' => '#777'
),
'output' => array(
array(
'element' => '#header-top',
'property' => 'typography'
)
)
));
Update: I used "inherit" to get by for now, however this causes a few issues.
- Using "inherit" as the default font-family causes a js error in console.
- Using "inherit" might be confusing to an end user so there should be a way to leave the values blank and still have the field display for the user.
- Using "inherit" causes unnecessary css output.
@aristath Any feedback on this?
Marked as a feature request. Default values will be needed, we just have to add support for empty defaults.
Ok great, looking forward to this.
Implemented in the develop branch, will be included in v3.0.26. You will now be able to use empty defaults 👍
@aristath It looks like all values work empty except for color. Color outputs white if it's blank.
I just pushed a commit just now that should fix it, could you please pull again and check? (apologies, I only had 5 minutes to spare so no time to test it)
Works good now.
thanks for checking 👍
I'm having this exact issue in 3.0.33. I can make a new issue if you'd rather not re-open this one.
The following fields do not work when the values are empty:
'font-size' => '',
'letter-spacing' => '',
'text-align' => '',
'text-transform' => '',
This does not change anything in preview or after save:
/**
* Footer Widget Titles
*/
Kirki::add_field( $config_id, array(
'type' => 'typography',
'settings' => 'footer_widget_titles',
'label' => esc_attr__( 'Footer Widget Titles', 'mai-fonts' ),
'section' => 'widgets',
'transport' => 'auto',
'default' => array(
'font-family' => '',
'variant' => '',
'font-size' => '',
'letter-spacing' => '',
'text-align' => '',
'text-transform' => '',
),
'output' => array(
array(
'element' => array( '.footer-widgets .widgettitle', '.footer-widgets .widget-title' ),
),
),
) );
Yet this does work, however I don't want to set a default value as my theme already has these defaults in the base stylesheet.
/**
* Footer Widget Titles
*/
Kirki::add_field( $config_id, array(
'type' => 'typography',
'settings' => 'footer_widget_titles',
'label' => esc_attr__( 'Footer Widget Titles', 'mai-fonts' ),
'section' => 'widgets',
'transport' => 'auto',
'default' => array(
'font-family' => '',
'variant' => '',
'font-size' => 'inherit',
'letter-spacing' => '0',
'text-align' => 'left',
'text-transform' => 'none',
),
'output' => array(
array(
'element' => array( '.footer-widgets .widgettitle', '.footer-widgets .widget-title' ),
),
),
) );
Update: I just tested this on the develop branch and the issue remains.
@JiveDig I just tested the develop branch and this seems to be working fine... Can you please try this on a fresh installation? Perhaps there's something wrong with the save theme-options
I will try again. I am saving in a option/array not a theme_mod if that matters. I’ll try again though and report back.
I'm still having all sorts of issues. Just tested on a clean install. develop and master branch show the same results.
This is the exact code I'm using right now. The output only works for font-family and variant.
add_action( 'init', 'maifonts_register_customizer_settings' );
function maifonts_register_customizer_settings() {
if ( ! class_exists( 'Kirki' ) ) {
return;
}
$config_id = 'mai_fonts';
$panel_id = 'mai_fonts';
$settings_field = 'mai_fonts';
Kirki::add_config( $config_id, array(
'capability' => 'edit_theme_options',
'option_type' => 'option',
'option_name' => $settings_field,
) );
/**
* Mai Fonts
*/
Kirki::add_panel( $panel_id, array(
'title' => esc_attr__( 'Mai Fonts', 'mai-fonts' ),
) );
/* *********************************************** *
* Headings *
* *********************************************** */
Kirki::add_section( 'maifonts_headings', array(
'title' => esc_attr__( 'Headings', 'mai-fonts' ),
'panel' => $panel_id,
) );
/**
* Banner Title
*/
Kirki::add_field( $config_id, array(
'type' => 'typography',
'settings' => 'banner_title',
'label' => esc_attr__( 'Banner Title', 'mai-fonts' ),
'section' => 'maifonts_headings',
'transport' => 'auto',
'choices' => array(
'fonts' => array(
'google' => array( 'popularity', 30 ),
),
),
'default' => array(
'font-family' => '',
'variant' => '',
'font-size' => '',
'letter-spacing' => '',
'text-transform' => '',
),
'output' => array(
array(
'element' => array( 'h1', '.banner-title' ),
),
),
) );
}
With no default values set the font size, letter spacing, and text transform don't work at all when I add a value.
Here is an even more simplified version that has the same issues.
add_action( 'init', 'maifonts_register_customizer_settings' );
function maifonts_register_customizer_settings() {
if ( ! class_exists( 'Kirki' ) ) {
return;
}
$config_id = 'mai_fonts';
Kirki::add_config( $config_id, array(
'capability' => 'edit_theme_options',
'option_type' => 'option',
'option_name' => 'mai_fonts',
) );
/* ******** *
* Headings *
* ******** */
Kirki::add_section( 'maifonts_headings', array(
'title' => esc_attr__( 'Headings', 'textdomain' ),
) );
// Banner Title
Kirki::add_field( $config_id, array(
'type' => 'typography',
'settings' => 'banner_title',
'label' => esc_attr__( 'Heading 1', 'textdomain' ),
'section' => 'maifonts_headings',
'transport' => 'auto',
'choices' => array(
'fonts' => array(
'google' => array( 'popularity', 30 ),
),
),
'default' => array(
'font-family' => '',
'variant' => '',
'font-size' => '',
'letter-spacing' => '',
'text-transform' => '',
),
'output' => array(
array(
'element' => array( 'h1', '.banner-title' ),
),
),
) );
}
A new find, if I add values and save them, then refresh the page/customizer, the values are empty for everything but font-family (the only working field to begin with.
Sorry for all the posts, just testing (and documenting) various things while i'm at it.
Changing the field to this:
Kirki::add_field( $config_id, array(
'type' => 'typography',
'settings' => 'banner_title',
'label' => esc_attr__( 'Heading 1', 'textdomain' ),
'section' => 'maifonts_headings',
'transport' => 'auto',
'choices' => array(
'fonts' => array(
'google' => array( 'popularity', 30 ),
),
),
'default' => array(
// 'font-family' => '',
// 'variant' => '',
'font-size' => '',
'letter-spacing' => '',
'text-transform' => '',
),
'output' => array(
array(
'element' => array( 'h1', '.banner-title' ),
),
),
) );
correctly displays this:
but doesn't allow save/publish. No matter what value I change, I can't save the field.
Confirming same issues all around with 'option_type' => 'theme_mod',
Should be ok now for the reported issues.