feat: add none presets to padding and margin similar to native

Author: Arukuen

src/block-components/helpers/size/edit.js

@@ -139,7 +139,14 @@ const Spacing = props => {
 		highlight: 'margin',
 	}
 
-	const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
+	// Add additional presets for setting margins and paddings to None
+	const nonePreset = {
+		name: 'None',
+		size: '0rem',
+		slug: 'none',
+	}
+	const presetMarks = usePresetControls( 'spacingSizes' )
+		?.getPresetMarks( { additionalPresets: [ nonePreset ] } ) || null
 
 	return (
 		<>

src/block-components/typography/edit.js

@@ -104,7 +104,8 @@ export const Controls = props => {
 
 	const onChangeContent = useCallback( text => setDebouncedText( escapeHTMLIfInvalid( text ) ), [] )
 
-	const presetMarks = usePresetControls( 'fontSizes' )?.getPresetMarks( useTypographyAsPresets ) || null
+	const presetMarks = usePresetControls( 'fontSizes' )
+		?.getPresetMarks( { customOnly: useTypographyAsPresets } ) || null
 
 	return (
 		<>

src/hooks/use-preset-controls.js

@@ -56,9 +56,10 @@ export const usePresetControls = property => {
 
 	// Get the merge preset marks with the CSS Variable value
 	// Setting customOnly to true returns the preset marks for custom presets only
-	const getPresetMarks = ( customOnly = false ) => {
+	const getPresetMarks = ( { customOnly = false, additionalPresets = [] } = {} ) => {
 		const prefix = PRESET_MAPPING[ property ].prefix
-		const presets = customOnly ? allCustomPresets[ property ] ?? [] : getMergedPresets()
+		let presets = customOnly ? allCustomPresets[ property ] ?? [] : getMergedPresets()
+		presets = [ ...additionalPresets, ...presets ]
 
 		return presets
 			.filter( preset => ! ( preset?.isDiscarded ) )