Skip to content

feat: add block defaults for heading theme margin and icon for icon l… #3676

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bfintal merged 5 commits into from
Aug 5, 2026
Merged

feat: add block defaults for heading theme margin and icon for icon l… #3676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7cae2eb
feat: add block defaults for heading theme margin and icon for icon l…
Arukuen Jan 20, 2026
07093e7
Merge branch 'develop' into feat/3673/3674-block-defaults
Arukuen May 25, 2026
658d0d7
fix: fall back to DEFAULT_SVG when icon is empty
Arukuen May 25, 2026
0aa58cc
fix: apply block defaults only on insertion using block variation
Arukuen Jul 31, 2026
cfb7275
fix: also apply default attribute to transform
Arukuen Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/block/heading/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import metadata from './block.json'
import example from './example'
import deprecated from './deprecated'
import substitute from './substitute'
import variations from './variations'

export const settings = {
...metadata,
Expand All @@ -33,6 +34,7 @@ export const settings = {
save,
example,
transforms,
variations,
merge( attributes, attributesToMerge ) {
// Make sure that the selection is always at the end of the text.
// @see https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-library/src/paragraph/index.js
Expand Down
18 changes: 16 additions & 2 deletions src/block/heading/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,16 @@
*/
import { createBlock, createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks'

/**
* External dependencies
*/
import { settings } from 'stackable'

/**
* Internal dependencies
*/
import { TEMPLATE as ICON_LABEL_TEMPLATE } from '../icon-label/edit'
import { getHeadingDefaultAttributes } from './util'

const transforms = {
from: [
Expand All @@ -15,15 +21,21 @@ const transforms = {
isMultiBlock: true,
blocks: [ 'stackable/text' ],
transform: attributes => {
return attributes.map( ( { ...attrs } ) => createBlock( 'stackable/heading', { ...attrs } ) )
return attributes.map( ( { ...attrs } ) => createBlock( 'stackable/heading', {
...getHeadingDefaultAttributes( settings ),
...attrs,
} ) )
},
},
{
type: 'block',
isMultiBlock: true,
blocks: [ 'stackable/subtitle' ],
transform: attributes => {
return attributes.map( ( { ...attrs } ) => createBlock( 'stackable/heading', { ...attrs } ) )
return attributes.map( ( { ...attrs } ) => createBlock( 'stackable/heading', {
...getHeadingDefaultAttributes( settings ),
...attrs,
} ) )
},
},
{
Expand All @@ -32,6 +44,7 @@ const transforms = {
blocks: [ 'core/paragraph' ],
transform: attributes => {
return attributes.map( ( { content } ) => createBlock( 'stackable/heading', {
...getHeadingDefaultAttributes( settings ),
text: content,
} ) )
},
Expand All @@ -42,6 +55,7 @@ const transforms = {
blocks: [ 'core/heading' ],
transform: attributes => {
return attributes.map( ( { content } ) => createBlock( 'stackable/heading', {
...getHeadingDefaultAttributes( settings ),
text: content,
} ) )
},
Expand Down
12 changes: 12 additions & 0 deletions src/block/heading/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// This helper is called only by the inserter variation and explicit block
// transforms. Parsed existing blocks and Design Library blocks do not call it.
export const getHeadingDefaultAttributes = ( editorSettings = {} ) => {
const isPost = editorSettings.stackable_current_post_type === 'post'

return {
// Posts and non-post editor screens have separate admin defaults.
useThemeTextMargins: isPost
? !! editorSettings.stackable_enable_heading_default_theme_margins_posts
: !! editorSettings.stackable_enable_heading_default_theme_margins_non_posts,
}
}
21 changes: 21 additions & 0 deletions src/block/heading/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* External dependencies
*/
import { settings } from 'stackable'

/**
* Internal dependencies
*/
import { getHeadingDefaultAttributes } from './util'

// Scope this variation to direct inserter creation.
export const getHeadingVariations = ( editorSettings = {} ) => [
{
name: 'default',
isDefault: true,
scope: [ 'inserter' ],
attributes: getHeadingDefaultAttributes( editorSettings ),
},
]

export default getHeadingVariations( settings )
2 changes: 2 additions & 0 deletions src/block/icon-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import schema from './schema'
import example from './example'
import deprecated from './deprecated'
import transforms from './transforms'
import variations from './variations'

/**
* WordPress dependencies
Expand All @@ -35,4 +36,5 @@ export const settings = {
edit,
save,
transforms,
variations,
}
8 changes: 8 additions & 0 deletions src/block/icon-list/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,15 @@ import {
create, split, toHTMLString,
} from '@wordpress/rich-text'

/**
* External dependencies
*/
import { settings } from 'stackable'

/**
* Internal dependencies
*/
import { getIconListDefaultAttributes } from './util'

// import { createListBlockFromDOMElement } from './util'

Expand Down Expand Up @@ -69,6 +75,7 @@ const transforms = {
return createBlock(
'stackable/icon-list',
{
...getIconListDefaultAttributes( settings ),
anchor: blockAttributes.anchor,
},
childBlocks
Expand All @@ -85,6 +92,7 @@ const transforms = {
return createBlock(
'stackable/icon-list',
{
...getIconListDefaultAttributes( settings ),
anchor: blockAttributes.anchor,
},
childBlocks
Expand Down
8 changes: 7 additions & 1 deletion src/block/icon-list/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@ import { i18n } from 'stackable'
// The default icon list SVG.
export const DEFAULT_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 190"><polygon points="173.8,28.4 60.4,141.8 15.7,97.2 5.1,107.8 60.4,163 184.4,39 173.8,28.4"/></svg>'

// This helper is called only by the inserter variation and explicit block
// transforms. Parsed existing blocks and Design Library blocks do not call it.
export const getIconListDefaultAttributes = ( editorSettings = {} ) => ( {
// Preserve the original schema icon when no custom admin default is set.
icon: editorSettings.stackable_icon_list_block_default_icon || DEFAULT_SVG,
} )

export const IconSvgDef = props => {
const { icon, uniqueId } = props

Expand Down Expand Up @@ -122,4 +129,3 @@ export function migrateTypeToInlineStyle( attributes ) {

return attributes
}

21 changes: 21 additions & 0 deletions src/block/icon-list/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* External dependencies
*/
import { settings } from 'stackable'

/**
* Internal dependencies
*/
import { getIconListDefaultAttributes } from './util'

// Scope this variation to direct inserter creation.
export const getIconListVariations = ( editorSettings = {} ) => [
{
name: 'default',
isDefault: true,
scope: [ 'inserter' ],
attributes: getIconListDefaultAttributes( editorSettings ),
},
]

export default getIconListVariations( settings )
3 changes: 3 additions & 0 deletions src/components/admin-icon-setting/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.ugb-admin-icon-setting {
--wp-components-color-accent: var(--stk-skin-dark);
}
32 changes: 32 additions & 0 deletions src/components/admin-icon-setting/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import AdminBaseSetting from '../admin-base-setting'
import IconControl from '../icon-control'
import classnames from 'classnames'

const defaultIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 190"><polygon points="173.8,28.4 60.4,141.8 15.7,97.2 5.1,107.8 60.4,163 184.4,39 173.8,28.4"/></svg>'

const AdminIconSetting = props => {
return (
<AdminBaseSetting
{ ...props }
className={ classnames( props.className, 'ugb-admin-icon-setting' ) }>
<IconControl
label=""
value={ props.value }
defaultValue={ defaultIcon }
onChange={ icon => {
props.onChange( icon )
} }
allowReset={ false }
hasPanelModifiedIndicator={ true }
/>
{ props.children }
</AdminBaseSetting>
)
}

AdminIconSetting.defaultProps = {
value: '',
onChange: () => {},
}

export default AdminIconSetting
3 changes: 2 additions & 1 deletion src/components/icon-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const IconControl = props => {
<BaseControl
className="ugb-icon-control stk-control"
{ ...omit( props, [ 'onChange', 'value' ] ) }
allowReset={ true }
allowReset={ props.allowReset }
value={ props.value }
defaultValue={ props.defaultValue }
onChange={ props.onChange }
Expand Down Expand Up @@ -71,6 +71,7 @@ IconControl.defaultProps = {
returnSVGValue: true, // If true, the value provided in onChange will be the SVG markup of the icon. If false, the value will be a prefix-iconName value.
onChange: () => {},
defaultValue: '',
allowReset: true,
hasPanelModifiedIndicator: true,
}

Expand Down
58 changes: 58 additions & 0 deletions src/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,12 +241,62 @@ public function register_settings() {
'default' => false,
)
);

register_setting(
'stackable_editor_settings',
'stackable_enable_heading_default_theme_margins_posts',
array(
'type' => 'boolean',
'description' => __( "When enabled, newly added Stackable Heading blocks in Posts will use the theme's default margins automatically.", STACKABLE_I18N ),
'sanitize_callback' => 'sanitize_text_field',
'show_in_rest' => true,
'default' => false,
)
);

register_setting(
'stackable_editor_settings',
'stackable_enable_heading_default_theme_margins_non_posts',
array(
'type' => 'boolean',
'description' => __( "When enabled, newly added Stackable Heading blocks in non-Post content (Pages and custom post types) will use the theme's default margins automatically.", STACKABLE_I18N ),
'sanitize_callback' => 'sanitize_text_field',
'show_in_rest' => true,
'default' => false,
)
);

register_setting(
'stackable_editor_settings',
'stackable_icon_list_block_default_icon',
array(
'type' => 'string',
'description' => __( 'Choose the default icon that will be used when adding a new Icon List block.', STACKABLE_I18N ),
'sanitize_callback' => array( $this, 'sanitize_svg_setting' ),
'show_in_rest' => true,
'default' => '',
)
);
}

public function sanitize_array_setting( $input ) {
return ! is_array( $input ) ? array( array() ) : $input;
}

public function sanitize_svg_setting( $input ) {
if ( empty( $input ) ) {
return '';
}

// Remove scripts, event handlers, foreignObject, iframe, embeds
$input = preg_replace( '/<\s*(script|iframe|embed|object|foreignObject)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $input );
$input = preg_replace( '/on\w+\s*=\s*"[^"]*"/i', '', $input );
$input = preg_replace( "/on\w+\s*=\s*'[^']*'/i", '', $input );
$input = preg_replace( '/javascript:/i', '', $input );

return $input;
}
Comment on lines +286 to +298

@coderabbitai coderabbitai Bot Jan 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

SVG sanitization may be incomplete for security-critical use.

The current implementation provides basic protection but has gaps that could allow XSS:

  1. Unquoted event handlers: The regex only handles quoted attributes (on\w+=\s*"..." and '...'), missing unquoted values like onclick=alert(1).

  2. Missing dangerous patterns:

    • data: URLs (e.g., xlink:href="data:text/html,<script>...")
    • xlink:href and href attributes pointing to javascript:
    • <use> elements referencing external content
    • <animate>, <set> elements that can trigger scripts

  3. Error handling: preg_replace returns null on error; this should be handled.

Proposed improvements for more robust sanitization 
 public function sanitize_svg_setting( $input ) {
 	if ( empty( $input ) ) {
 		return '';
 	}

 	// Remove scripts, event handlers, foreignObject, iframe, embeds
 	$input = preg_replace( '/<\s*(script|iframe|embed|object|foreignObject)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $input );
+	// Remove potentially dangerous elements
+	$input = preg_replace( '/<\s*(use|animate|set|animateTransform)[^>]*\/?>/is', '', $input );
 	$input = preg_replace( '/on\w+\s*=\s*"[^"]*"/i', '', $input );
 	$input = preg_replace( "/on\w+\s*=\s*'[^']*'/i", '', $input );
+	// Handle unquoted event handlers
+	$input = preg_replace( '/on\w+\s*=\s*[^\s>]+/i', '', $input );
 	$input = preg_replace( '/javascript:/i', '', $input );
+	// Remove data: URLs and xlink:href with dangerous protocols
+	$input = preg_replace( '/xlink:href\s*=\s*["\'][^"\']*(?:javascript:|data:)[^"\']*["\']/i', '', $input );
+	$input = preg_replace( '/href\s*=\s*["\'][^"\']*(?:javascript:|data:)[^"\']*["\']/i', '', $input );

+	// Handle preg_replace errors
+	if ( $input === null ) {
+		return '';
+	}
+
 	return $input;
 }

Alternatively, consider using WordPress's built-in wp_kses with an SVG-specific allowed tags/attributes list, or a dedicated SVG sanitization library for more comprehensive protection.

🤖 Prompt for AI Agents 
In `@src/editor-settings.php` around lines 286 - 298, sanitize_svg_setting
currently uses brittle regexes that miss unquoted event handlers, data: URLs,
xlink/href javascript targets, <use> references and animation elements, and does
not handle preg_replace returning null; update it to perform robust sanitization
by either (A) replacing the ad-hoc regex approach in sanitize_svg_setting with
WordPress's wp_kses using a restrictive SVG-specific allowed tags/attributes
whitelist (including removal of on* attributes regardless of quoting, stripping
href/xlink:href values that start with javascript: or data:, and disallowing
<use>, <animate>, <set>), or (B) if you keep regexes, add patterns to remove
unquoted on* attributes, strip any href/xlink:href attributes whose values begin
with javascript: or data:, remove <use>, <animate>, <set> elements, and after
each preg_replace check for null and handle by returning an empty string or
logging and returning safe output; make these changes inside the
sanitize_svg_setting function to ensure all dangerous patterns are covered.


/**
* Make our settings available in the editor.
*
Expand All @@ -267,6 +317,14 @@ public function add_settings( $settings ) {
$settings['stackable_enable_reset_layout'] = get_option( 'stackable_enable_reset_layout' );
$settings['stackable_enable_save_as_default_block'] = get_option( 'stackable_enable_save_as_default_block' );
$settings['stackable_enable_text_default_block'] = get_option( 'stackable_enable_text_default_block' );
$settings['stackable_enable_heading_default_theme_margins_posts'] = get_option( 'stackable_enable_heading_default_theme_margins_posts' );
$settings['stackable_enable_heading_default_theme_margins_non_posts'] = get_option( 'stackable_enable_heading_default_theme_margins_non_posts' );
$settings['stackable_icon_list_block_default_icon'] = get_option( 'stackable_icon_list_block_default_icon' );

// Inserter variations are registered before the block Edit component renders,
// so provide the post type here.
$current_screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
$settings['stackable_current_post_type'] = $current_screen && ! empty( $current_screen->post_type ) ? $current_screen->post_type : '';

return $settings;
}
Expand Down
43 changes: 43 additions & 0 deletions src/welcome/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import AdminSelectSetting from '~stackable/components/admin-select-setting'
import AdminToggleSetting from '~stackable/components/admin-toggle-setting'
import AdminTextSetting from '~stackable/components/admin-text-setting'
import AdminToolbarSetting from '~stackable/components/admin-toolbar-setting'
import AdminIconSetting from '~stackable/components/admin-icon-setting'
import { GettingStarted } from './getting-started'
import { BLOCK_STATE } from '~stackable/util/blocks'
import { BlockToggler, OptimizationSettings } from '~stackable/deprecated/v2/welcome/admin'
Expand Down Expand Up @@ -81,6 +82,14 @@ const SEARCH_TREE = [
__( 'Nested Wide Block Width', i18n ),
],
},
{
id: 'block-defaults',
children: [
__( 'Default to Theme Margins for Headings (Posts)', i18n ),
__( 'Default to Theme Margins for Headings (Non-Posts)', i18n ),
__( 'Default Icon for Icon List Block', i18n ),
],
},
{
id: 'editor',
children: [
Expand Down Expand Up @@ -631,6 +640,7 @@ const EditorSettings = props => {

const groups = filteredSearchTree.find( tab => tab.id === 'editor-settings' ).groups
const blocks = groups.find( group => group.id === 'blocks' )
const blockDefaults = groups.find( group => group.id === 'block-defaults' )
const editor = groups.find( group => group.id === 'editor' )
const toolbar = groups.find( group => group.id === 'toolbar' )
const inspector = groups.find( group => group.id === 'inspector' )
Expand Down Expand Up @@ -668,6 +678,39 @@ const EditorSettings = props => {
/>
</div>
}
{ ( blockDefaults.children === null || blockDefaults.children.length > 0 ) &&
<div className="s-setting-group">
<h2>{ __( 'Block Defaults', i18n ) }</h2>
<p className="s-settings-subtitle">{ __( 'Adjust the default behavior of some Stackable blocks.', i18n ) }</p>
<AdminToggleSetting
label={ __( 'Default to Theme Margins for Headings (Posts)', i18n ) }
searchedSettings={ blockDefaults.children }
value={ settings.stackable_enable_heading_default_theme_margins_posts }
onChange={ value => {
handleSettingsChange( { stackable_enable_heading_default_theme_margins_posts: value } ) // eslint-disable-line camelcase
} }
help={ __( "When enabled, newly added Stackable Heading blocks in Posts will use the theme's default margins automatically. Existing blocks are not affected.", i18n ) }
/>
<AdminToggleSetting
label={ __( 'Default to Theme Margins for Headings (Non-Posts)', i18n ) }
searchedSettings={ blockDefaults.children }
value={ settings.stackable_enable_heading_default_theme_margins_non_posts }
onChange={ value => {
handleSettingsChange( { stackable_enable_heading_default_theme_margins_non_posts: value } ) // eslint-disable-line camelcase
} }
help={ __( "When enabled, newly added Stackable Heading blocks in non-Post content (Pages and custom post types) will use the theme's default margins automatically. Existing blocks are not affected.", i18n ) }
/>
<AdminIconSetting
label={ __( 'Default Icon for Icon List Block', i18n ) }
searchedSettings={ blockDefaults.children }
value={ settings.stackable_icon_list_block_default_icon }
onChange={ value => {
handleSettingsChange( { stackable_icon_list_block_default_icon: value } ) // eslint-disable-line camelcase
} }
help={ __( 'Choose the default icon that will be used when adding a new Icon List block.', i18n ) }
/>
</div>
}
{ ( editor.children === null || editor.children.length > 0 ) &&
<div className="s-setting-group">
<h2>{ __( 'Editor', i18n ) }</h2>
Expand Down
Loading