Add padding support to Group block (#24966)

Co-authored-by: Jon Q <[email protected]>

packages/block-library/src/editor.scss

@@ -109,6 +109,14 @@
 	margin-bottom: $default-block-margin;
 }
 
+.block-editor-block-list__layout > .wp-block:first-child {
+	margin-top: 0;
+}
+
+.block-editor-block-list__layout > .wp-block:last-child {
+	margin-bottom: 0;
+}
+
 // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
 #end-resizable-editor-section {
 	display: none;

packages/block-library/src/group/block.json

@@ -18,6 +18,7 @@
 		"__experimentalColor": {
 			"gradients": true,
 			"linkColor": true
-		}
+		},
+		"__experimentalPadding": true
 	}
 }

packages/block-library/src/group/edit.js

@@ -6,6 +6,8 @@ import {
 	InnerBlocks,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+const { __Visualizer: BoxControlVisualizer } = BoxControl;
 
 function GroupEdit( { attributes, className, clientId } ) {
 	const hasInnerBlocks = useSelect(
@@ -20,6 +22,10 @@ function GroupEdit( { attributes, className, clientId } ) {
 
 	return (
 		<BlockWrapper className={ className }>
+			<BoxControlVisualizer
+				values={ attributes.style?.spacing?.padding }
+				showValues={ attributes.style?.visualizers?.padding }
+			/>
 			<InnerBlocks
 				renderAppender={
 					hasInnerBlocks

packages/block-library/src/group/editor.scss

@@ -3,9 +3,6 @@
  */
 
 .wp-block-group {
-	// Zero out the baseline margin that is set for every block in the editor.
-	margin-top: 0;
-	margin-bottom: 0;
 
 	// Ensure not rendering outside the element
 	// as -1px causes overflow-x scrollbars

packages/components/src/box-control/unit-control.js

@@ -51,9 +51,17 @@ export default function BoxUnitControl( {
 function Tooltip( { children, text } ) {
 	if ( ! text ) return children;
 
+	/**
+	 * Wrapping the children in a `<div />` as Tooltip as it attempts
+	 * to render the <UnitControl />. Using a plain `<div />` appears to
+	 * resolve this issue.
+	 *
+	 * Originally discovered and referenced here:
+	 * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
+	 */
 	return (
 		<BaseTooltip text={ text } position="top">
-			{ children }
+			<div>{ children }</div>
 		</BaseTooltip>
 	);
 }