Skip to content

Commit 054216e

Browse files
ArukuenArukuen
committed
feat: apply body to html
1 parent 477cfbe commit 054216e

File tree

3 files changed

+68
-15
lines changed

3 files changed

+68
-15
lines changed

‎src/global-settings.php‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,18 @@ public function register_global_settings() {
424424
)
425425
);
426426

427+
register_setting(
428+
'stackable_global_settings',
429+
'stackable_is_apply_body_to_html',
430+
array(
431+
'type' => 'boolean',
432+
'description' => __( 'Stackable global typography apply to setting', STACKABLE_I18N ),
433+
'sanitize_callback' => 'sanitize_text_field',
434+
'show_in_rest' => true,
435+
'default' => '',
436+
)
437+
);
438+
427439
register_setting(
428440
'stackable_global_settings',
429441
'stackable_icon_library',
@@ -650,11 +662,19 @@ public function form_tag_selector( $tag ) {
650662
}
651663

652664
public function form_paragraph_selector() {
653-
return array_merge(
654-
$this->form_tag_selector( 'p' ), // Core text.
655-
$this->form_tag_selector( 'li' ), // Core lists.
656-
$this->form_tag_selector( 'td' ) // Core table cells.
665+
$is_apply_body_to_html = get_option( 'stackable_is_apply_body_to_html' ) ?? false;
666+
$selectors = array_merge(
667+
$this->form_tag_selector( 'p' ), // Core text
668+
$this->form_tag_selector( 'li' ), // Core lists
669+
$this->form_tag_selector( 'td' ) // Core table cells
657670
);
671+
672+
// Add 'html' only if is_apply_body_to_html is true
673+
if ( $is_apply_body_to_html ) {
674+
$selectors[] = 'html';
675+
}
676+
677+
return $selectors;
658678
}
659679

660680
/**

‎src/plugins/global-settings/typography/editor-loader.js‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { useSelect } from '@wordpress/data'
2929
export const GlobalTypographyStyles = () => {
3030
const [ typographySettings, setTypographySettings ] = useState( [] )
3131
const [ applySettingsTo, setApplySettingsTo ] = useState( '' )
32+
const [ isApplyBodyToHTML, setIsApplyBodyToHTML ] = useState( false )
3233

3334
// These are for debouncing the style generation to make things faster.
3435
const [ styles, setStyles ] = useState( '' )
@@ -54,12 +55,16 @@ export const GlobalTypographyStyles = () => {
5455
fetchSettings().then( response => {
5556
setTypographySettings( ( head( response.stackable_global_typography ) ) || {} )
5657
setApplySettingsTo( response.stackable_global_typography_apply_to || 'blocks-stackable-native' )
58+
setIsApplyBodyToHTML( response.stackable_is_apply_body_to_html || false )
5759
} )
5860

5961
// Allow actions to trigger styles to update.
60-
addAction( 'stackable.global-settings.typography.update-trigger', 'stackable/typography-styles', ( newTypographySettings, newAapplySettingsTo ) => {
62+
addAction( 'stackable.global-settings.typography.update-trigger', 'stackable/typography-styles', (
63+
newTypographySettings, newAapplySettingsTo, newIsApplyBodyToHTML
64+
) => {
6165
setTypographySettings( newTypographySettings )
6266
setApplySettingsTo( newAapplySettingsTo )
67+
setIsApplyBodyToHTML( newIsApplyBodyToHTML )
6368
} )
6469
return () => {
6570
removeAction( 'stackable.global-settings.typography.update-trigger', 'stackable/typography-styles' )
@@ -71,7 +76,7 @@ export const GlobalTypographyStyles = () => {
7176
addAction( 'stackable.global-settings.typography-update-global-styles', 'stackable/typography-styles', typographySettings => {
7277
// Generate all the typography styles.
7378
const styleObject = Object.keys( typographySettings ).map( tag => {
74-
const selectors = formSelectors( tag, applySettingsTo )
79+
const selectors = formSelectors( tag, applySettingsTo, isApplyBodyToHTML )
7580

7681
// Build our selector, target h2.block or .block h2.
7782
// Some blocks may output the heading tag right away.
@@ -118,16 +123,16 @@ export const GlobalTypographyStyles = () => {
118123
setStyleTimeout( setTimeout( () => doAction( 'stackable.global-settings.typography-update-global-styles', typographySettings ), 200 ) )
119124

120125
return () => removeAction( 'stackable.global-settings.typography-update-global-styles', 'stackable/typography-styles' )
121-
}, [ JSON.stringify( typographySettings ), applySettingsTo, device, editorMode ] )
126+
}, [ JSON.stringify( typographySettings ), applySettingsTo, isApplyBodyToHTML, device, editorMode ] )
122127

123128
return styles
124129
}
125130

126-
export const formSelectors = ( selector, applyTo ) => {
131+
export const formSelectors = ( selector, applyTo, isApplyBodyToHTML ) => {
127132
if ( [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ].includes( selector ) || selector.startsWith( '.' ) ) {
128133
return formClassOrTagSelectors( selector, applyTo )
129134
}
130-
return formParagraphSelectors( applyTo )
135+
return formParagraphSelectors( applyTo, isApplyBodyToHTML )
131136
}
132137

133138
export const formClassOrTagSelectors = ( selector, applyTo ) => {
@@ -152,8 +157,8 @@ export const formClassOrTagSelectors = ( selector, applyTo ) => {
152157
return applyFilters( 'stackable.global-settings.typography-selectors', selectors, selector )
153158
}
154159

155-
export const formParagraphSelectors = applyTo => {
156-
return applyFilters( 'stackable.global-settings.typography-selectors', [
160+
export const formParagraphSelectors = ( applyTo, isApplyBodyToHTML ) => {
161+
const selectors = [
157162
...formClassOrTagSelectors( 'p', applyTo ),
158163
...formClassOrTagSelectors( 'li', applyTo ),
159164
`.editor-styles-wrapper p.block-editor-block-list__block[data-type^="core/"]`,
@@ -162,7 +167,13 @@ export const formParagraphSelectors = applyTo => {
162167
`.editor-styles-wrapper .block-editor-block-list__block[data-type^="core/"] td`,
163168
// Apply the font styles to the content placeholder text when the post is blank.
164169
'.block-editor-default-block-appender.has-visible-prompt',
165-
], '' )
170+
]
171+
172+
// Add 'html' only if is_apply_body_to_html is true
173+
if ( isApplyBodyToHTML ) {
174+
selectors.push( 'html' )
175+
}
176+
return applyFilters( 'stackable.global-settings.typography-selectors', selectors, '' )
166177
}
167178

168179
// Make sure that this isn't applied to the native query loop block, otherwise

‎src/plugins/global-settings/typography/index.js‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { getAppliedTypeScale } from './utils'
1111
* External dependencies
1212
*/
1313
import {
14-
PanelAdvancedSettings, AdvancedSelectControl, ControlSeparator, FontPairPicker, ProControlButton,
14+
PanelAdvancedSettings, AdvancedSelectControl, ControlSeparator, FontPairPicker, ProControlButton, AdvancedToggleControl,
1515
} from '~stackable/components'
1616
import { fetchSettings, getDefaultFontSize } from '~stackable/util'
1717
import {
@@ -160,6 +160,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
160160
const [ selectedFontPairName, setSelectedFontPairName ] = useState( '' )
161161
const [ isEditingFontPair, setIsEditingFontPair ] = useState( false )
162162
const [ selectedTypeScale, setSelectedTypeScale ] = useState( 'none' )
163+
const [ isApplyBodyToHTML, setIsApplyBodyToHTML ] = useState( false )
163164

164165
const fontPairContainerRef = useRef( null )
165166

@@ -171,6 +172,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
171172
setApplySettingsTo( response.stackable_global_typography_apply_to || 'blocks-stackable-native' )
172173
setCustomFontPairs( response.stackable_custom_font_pairs || [] )
173174
setSelectedFontPairName( response.stackable_selected_font_pair || 'theme-heading-default/theme-body-default' )
175+
setIsApplyBodyToHTML( response.stackable_is_apply_body_to_html || false )
174176

175177
// Reversely compute the type scale from the font sizes
176178
let typeScale = _typographySettings?.h6?.fontSize
@@ -190,7 +192,12 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
190192

191193
useEffect( () => {
192194
// When typography styles are changed, trigger our editor style generator to update.
193-
doAction( 'stackable.global-settings.typography.update-trigger', typographySettings, applySettingsTo )
195+
doAction( 'stackable.global-settings.typography.update-trigger', typographySettings, applySettingsTo, isApplyBodyToHTML )
196+
}, [ JSON.stringify( typographySettings ), applySettingsTo, isApplyBodyToHTML ] )
197+
198+
useEffect( () => {
199+
// When typography styles are changed, trigger our editor style generator to update.
200+
doAction( 'stackable.global-settings.typography.update-trigger', typographySettings, applySettingsTo, isApplyBodyToHTML )
194201

195202
// Update the custom presets when using typography as presets
196203
if ( useTypographyAsPresets ) {
@@ -235,7 +242,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
235242

236243
dispatch( 'stackable/global-preset-controls.custom' ).updateCustomPresetControls( newSettings )
237244
}
238-
}, [ JSON.stringify( typographySettings ), applySettingsTo, useTypographyAsPresets ] )
245+
}, [ JSON.stringify( typographySettings ), useTypographyAsPresets ] )
239246

240247
// Scroll to the selected font pair when Global Typography tab is toggled
241248
useEffect( () => {
@@ -301,6 +308,14 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
301308
model.save()
302309
}
303310

311+
const changeIsApplyBodyToHTML = value => {
312+
setIsApplyBodyToHTML( value )
313+
const model = new models.Settings( {
314+
stackable_is_apply_body_to_html: value, // eslint-disable-line
315+
} )
316+
model.save()
317+
}
318+
304319
const updateTypeScale = value => {
305320
setSelectedTypeScale( value )
306321

@@ -587,6 +602,13 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
587602
getIsAllowReset={ getIsAllowReset }
588603
/>
589604
}
605+
<AdvancedToggleControl
606+
label={ __( 'Apply Body to HTML Tag', i18n ) }
607+
help={ __( 'Adds the body text settings to the main HTML tag.', i18n ) }
608+
defaultValue={ false }
609+
checked={ isApplyBodyToHTML }
610+
onChange={ changeIsApplyBodyToHTML }
611+
/>
590612
</PanelAdvancedSettings>
591613
</Fragment>
592614
)

0 commit comments

Comments
 (0)