Add helper

WordPress · Jul 12, 2024 · 7b5bccb · 7b5bccb
1 parent 3c50518
commit 7b5bccb
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 47 deletions.
diff --git a/packages/editor/src/hooks/block-bindings.js b/packages/editor/src/hooks/block-bindings.js
@@ -28,7 +28,6 @@ import {
 	Dropdown,
 	Button,
 	Icon,
-	BaseControl,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { chevronRightSmall, customPostType } from '@wordpress/icons';
@@ -222,54 +221,50 @@ const BlockBindingsPanel = ( { name, attributes: { metadata } } ) => {
 				__experimentalLastVisibleItemClass="last"
 			>
 				<div className="block-bindings-block-support-panel__inner-wrapper">
-					<BaseControl
-						help={ __(
-							'Attributes connected to various sources.'
-						) }
-					>
-						{ bindableAttributes.map( ( attribute ) => (
-							<ToolsPanelItem
-								key={ attribute }
-								hasValue={ () =>
-									!! filteredBindings[ attribute ]
-								}
-								label={ attribute }
-								onDeselect={ () => {
-									removeConnection( attribute );
-								} }
-							>
-								<Dropdown
-									popoverProps={ popoverProps }
-									className="block-editor-block-bindings-filters-panel__dropdown"
-									renderToggle={ ( { onToggle, isOpen } ) => {
-										const toggleProps = {
-											onClick: onToggle,
-											className: clsx( {
-												'is-open': isOpen,
-											} ),
-											'aria-expanded': isOpen,
-										};
-										return (
-											<BlockBindingsAttribute
-												toggleProps={ toggleProps }
-												attribute={ attribute }
-												filteredBindings={
-													filteredBindings
-												}
-											/>
-										);
-									} }
-									renderContent={ () => (
-										<BlockBindingsPanelDropdown
-											postMeta={ postMeta }
-											addConnection={ addConnection }
+					{ bindableAttributes.map( ( attribute ) => (
+						<ToolsPanelItem
+							key={ attribute }
+							hasValue={ () => !! filteredBindings[ attribute ] }
+							label={ attribute }
+							onDeselect={ () => {
+								removeConnection( attribute );
+							} }
+						>
+							<Dropdown
+								popoverProps={ popoverProps }
+								className="block-editor-block-bindings-filters-panel__dropdown"
+								renderToggle={ ( { onToggle, isOpen } ) => {
+									const toggleProps = {
+										onClick: onToggle,
+										className: clsx( {
+											'is-open': isOpen,
+										} ),
+										'aria-expanded': isOpen,
+									};
+									return (
+										<BlockBindingsAttribute
+											toggleProps={ toggleProps }
 											attribute={ attribute }
+											filteredBindings={
+												filteredBindings
+											}
 										/>
-									) }
-								/>
-							</ToolsPanelItem>
-						) ) }
-					</BaseControl>
+									);
+								} }
+								renderContent={ () => (
+									<BlockBindingsPanelDropdown
+										postMeta={ postMeta }
+										addConnection={ addConnection }
+										attribute={ attribute }
+									/>
+								) }
+							/>
+						</ToolsPanelItem>
+					) ) }
+					{ /* TODO: Add a helper to ToolPanel item */ }
+					<p as="p" className="block-bindings-styled-help">
+						{ __( 'Attributes connected to various sources.' ) }
+					</p>
 				</div>
 			</ToolsPanel>
 		</InspectorControls>

diff --git a/packages/editor/src/hooks/block-bindings.scss b/packages/editor/src/hooks/block-bindings.scss
@@ -11,6 +11,14 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 		.block-bindings-block-support-panel__inner-wrapper {
 			row-gap: 0;
 		}
+		.block-bindings-styled-help {
+			margin-top: $grid-unit-10;
+			margin-bottom: 0;
+			font-size: $helptext-font-size;
+			font-style: normal;
+			color: $gray-700;
+			grid-column: 1/-1;
+		}
 	}
 
 	.components-panel__block-bindings-panel-item-source {