Skip to content
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.

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

ToolsPanel: Remove hardcoded classnames #35415

Merged
merged 9 commits into from
Oct 15, 2021

Conversation

aaronrobertshaw
Copy link
Contributor

Fixes: #35058

Description

This PR removes the use of hardcoded CSS classnames from the ToolsPanel styles. The one exception is the single-column class as this will be removed an a separate PR adopting the Grid component to handle layout for the `ToolsPanel.

How has this been tested?

Manually.

Testing Instructions

  1. Checkout this PR and start up Storybook npm run storybook:dev
  2. Navigate to the ToolsPanel story and confirm it still displays and functions correctly
  3. On a local site, open the block editor, add a cover block, and select it
  4. Confirm the dimensions panel displays and functions correctly

Screenshots

Screen Shot 2021-10-07 at 4 09 32 pm

Types of changes

Enhancement.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@aaronrobertshaw aaronrobertshaw added [Feature] UI Components Impacts or related to the UI component system CSS Styling Related to editor and front end styles, CSS-specific issues. labels Oct 7, 2021
@aaronrobertshaw aaronrobertshaw self-assigned this Oct 7, 2021
Base automatically changed from add/virtual-bubbling-for-block-support-slots to trunk October 8, 2021 04:36
@aaronrobertshaw aaronrobertshaw force-pushed the remove/toolspanel-hardcoded-classnames branch from 65de7b8 to 0c324a8 Compare October 8, 2021 04:44
@glendaviesnz
Copy link
Contributor

This tested well for me in Storybook and in local site cover block. The emotion css stuff is new to me though, so will leave it to someone with more experience in that to sign it off.

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Thank you for working on this, @aaronrobertshaw !

I left a couple of comments. I would also love to hear @sarayourfriend 's opinion on this PR and the solutions we've adopting. I'm also cc'ing @mirka for visibility.

Comment on lines 68 to 69
/* Required to meet specificity requirements to ensure zero margin */
&& {
Copy link
Contributor

@ciampo ciampo Oct 11, 2021

Choose a reason for hiding this comment

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

This specificity hack shouldn't be necessary — I tried removing it and the spacing still looks correct (at least in Storybook).

I then noticed that, in the markup, we're using a h2 and that's we're adding flexbox styles manually. And so, I played around and leveraged the HStack and Heading components to reduce the amount of custom CSS needed in a component (similarly to what we're going to do by leveraging Grid in a future PR).

Using Heading this way can also help us improve the overall consistency of the typography system (see related #35464)

This is what I came up with
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 5135d2287e..6de4d21a5b 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -57,18 +57,7 @@ export const ToolsPanelHiddenInnerWrapper = css`
 `;
 
 export const ToolsPanelHeader = css`
-	align-items: center;
-	display: flex;
-	font-size: inherit;
-	font-weight: 500;
 	${ toolsPanelGrid.item.fullWidth }
-	justify-content: space-between;
-	line-height: normal;
-
-	/* Required to meet specificity requirements to ensure zero margin */
-	&& {
-		margin: 0;
-	}
 
 	/* Tweak dropdown menu and toggle button for better alignment */
 	> div {
@@ -86,6 +75,12 @@ export const ToolsPanelHeader = css`
 	}
 `;
 
+export const ToolsPanelHeading = css`
+	font-size: inherit;
+	font-weight: 500;
+	line-height: normal;
+`;
+
 export const ToolsPanelItem = css`
 	${ toolsPanelGrid.item.fullWidth }
 
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx
index 3204615434..0373f6adb7 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx
@@ -16,6 +16,8 @@ import { __, sprintf } from '@wordpress/i18n';
 import DropdownMenu from '../../dropdown-menu';
 import MenuGroup from '../../menu-group';
 import MenuItem from '../../menu-item';
+import { Heading } from '../../heading';
+import { HStack } from '../../h-stack';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import type {
@@ -122,6 +124,7 @@ const ToolsPanelHeader = (
 		menuItems,
 		resetAll,
 		toggleItem,
+		headingClassName,
 		...headerProps
 	} = useToolsPanelHeader( props );
 
@@ -133,8 +136,10 @@ const ToolsPanelHeader = (
 	const optionalItems = Object.entries( menuItems?.optional || {} );
 
 	return (
-		<h2 { ...headerProps } ref={ forwardedRef }>
-			{ labelText }
+		<HStack { ...headerProps } ref={ forwardedRef }>
+			<Heading level={ 2 } className={ headingClassName }>
+				{ labelText }
+			</Heading>
 			{ hasMenuItems && (
 				<DropdownMenu
 					icon={ moreVertical }
@@ -168,7 +173,7 @@ const ToolsPanelHeader = (
 					) }
 				</DropdownMenu>
 			) }
-		</h2>
+		</HStack>
 	);
 };
 
diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.ts b/packages/components/src/tools-panel/tools-panel-header/hook.ts
index f31e8cb637..26a2ebca57 100644
--- a/packages/components/src/tools-panel/tools-panel-header/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel-header/hook.ts
@@ -25,6 +25,11 @@ export function useToolsPanelHeader(
 		return cx( styles.ToolsPanelHeader, className );
 	}, [ className ] );
 
+	const headingClassName = useMemo(
+		() => cx( styles.ToolsPanelHeading ),
+		[]
+	);
+
 	const dropdownMenuClassName = useMemo( () => {
 		return cx( styles.DropdownMenu );
 	}, [] );
@@ -33,9 +38,10 @@ export function useToolsPanelHeader(
 
 	return {
 		...otherProps,
-		dropdownMenuClassName,
 		hasMenuItems,
 		menuItems,
 		className: classes,
+		dropdownMenuClassName,
+		headingClassName,
 	};
 }

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks @ciampo for going the extra mile yet again in your reviews, it's appreciated 👍

The increased specificity was required for use outside of the storybook. Previous tweaks to the heading's styles from within the block editor to overcome its own heading styles were requested to be removed and that the component should ensure the zero margin itself, hence the rule as it stands now.

The use of the h2 is one of the last remnants of this component having evolved from a basic clone of the existing panel.

I'll roll your proposed changes into this PR tomorrow when I'll have more time to test it all with real-world use cases such as block supports.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks @ciampo for going the extra mile yet again in your reviews, it's appreciated 👍

It's my pleasure — it's important that we share knowledge as much as possible, especially around the components package and its specific requirements.

The increased specificity was required for use outside of the storybook.

Thank you for the context. I suspected there must have been a use case for it 😅

I'll roll your proposed changes into this PR tomorrow when I'll have more time to test it all with real-world use cases such as block supports.

No rush as always. I hope these changes will still hold up well in real-world use 🤞

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The switch to using HStack and Heading is a nice step forward. There were two catches with it that I found while testing.

  1. The hack to enforce margin-bottom: 0 is still required to overcome editor styles.
  2. The HStack's div conflicted with the styles aiming to re-establish a grid layout when slots wrap the fills in a div

As I continue to work on switching the panel to use the Grid component to handle layout, I'll see if that second issue can't be mitigated.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thank you for the explanation!

Regarding your second point, I think a better way to write that workardound could be to use the ToolsPanelHeader styles object as a selector

Example:
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 39fd6e4e74..270dca54e8 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -38,20 +38,31 @@ export const ToolsPanel = css`
 	padding: ${ space( 4 ) };
 `;
 
+export const ToolsPanelHeading = css`
+	font-size: inherit;
+	font-weight: 500;
+	line-height: normal;
+
+	/* Required to meet specificity requirements to ensure zero margin */
+	&& {
+		margin: 0;
+	}
+`;
+
 /**
  * Items injected into a ToolsPanel via a virtual bubbling slot will require
  * an inner dom element to be injected. The following rule allows for the
  * CSS grid display to be re-established.
  */
 export const ToolsPanelWithInnerWrapper = css`
-	> div:not( :first-of-type ) {
+	> div:not( ${ ToolsPanelHeading } ) {
 		${ toolsPanelGrid.container }
 		${ toolsPanelGrid.item.fullWidth }
 	}
 `;
 
 export const ToolsPanelHiddenInnerWrapper = css`
-	> div:not( :first-of-type ) {
+	> div:not( ${ ToolsPanelHeading } ) {
 		display: none;
 	}
 `;
@@ -81,17 +92,6 @@ export const ToolsPanelHeader = css`
 	}
 `;
 
-export const ToolsPanelHeading = css`
-	font-size: inherit;
-	font-weight: 500;
-	line-height: normal;
-
-	/* Required to meet specificity requirements to ensure zero margin */
-	&& {
-		margin: 0;
-	}
-`;
-
 export const ToolsPanelItem = css`
 	${ toolsPanelGrid.item.fullWidth }

Copy link
Contributor

Choose a reason for hiding this comment

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

@ciampo I don't think it's possible to use the serialized styles object as a selector is it? I thought it was just styled components that could be (but I'll be happily surprised if I'm wrong!)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The suggested change doesn't work for me. No errors are thrown however those styles are omitted.

There might be a way to achieve a valid syntax here that I'm missing. I'm not sure it offers much at this stage though.

Copy link
Contributor

Choose a reason for hiding this comment

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

My bad. I tested it by checking it the WithSlotFillItems Storybook example thinking that it would cover this case, but I was wrong.

I thought it was just styled components that could be (but I'll be happily surprised if I'm wrong!)

Me too, but then testing on the wrong Storybook example tricked me into thinking it would work 😅

packages/components/src/tools-panel/styles.ts Outdated Show resolved Hide resolved
@aaronrobertshaw aaronrobertshaw force-pushed the remove/toolspanel-hardcoded-classnames branch from 2a6ecbe to d684a45 Compare October 14, 2021 00:56
@aaronrobertshaw
Copy link
Contributor Author

This has been rebased after the plus icon changes for the panel menu were merged.

All the requested changes have been made. Assuming that the tweak to enforce no bottom margin on the header is acceptable, I think this should be close now.

@github-actions
Copy link

github-actions bot commented Oct 14, 2021

Size Change: -418 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/block-editor/index.min.js 134 kB -17 B (0%)
build/block-library/blocks/button/editor-rtl.css 470 B -4 B (-1%)
build/block-library/blocks/button/editor.css 470 B -4 B (-1%)
build/block-library/blocks/button/style-rtl.css 549 B -51 B (-8%)
build/block-library/blocks/button/style.css 549 B -51 B (-8%)
build/block-library/blocks/buttons/editor-rtl.css 309 B -6 B (-2%)
build/block-library/blocks/buttons/editor.css 309 B -6 B (-2%)
build/block-library/blocks/buttons/style-rtl.css 317 B -53 B (-14%) 👏
build/block-library/blocks/buttons/style.css 317 B -53 B (-14%) 👏
build/block-library/blocks/post-author/editor-rtl.css 0 B -210 B (removed) 🏆
build/block-library/blocks/post-author/editor.css 0 B -210 B (removed) 🏆
build/block-library/blocks/post-author/style-rtl.css 175 B -7 B (-4%)
build/block-library/blocks/post-author/style.css 176 B -5 B (-3%)
build/block-library/blocks/query-title/editor-rtl.css 0 B -85 B (removed) 🏆
build/block-library/blocks/query-title/editor.css 0 B -85 B (removed) 🏆
build/block-library/blocks/social-link/editor-rtl.css 177 B +12 B (+7%) 🔍
build/block-library/blocks/social-link/editor.css 177 B +12 B (+7%) 🔍
build/block-library/blocks/social-links/editor-rtl.css 824 B +12 B (+1%)
build/block-library/blocks/social-links/editor.css 823 B +12 B (+1%)
build/block-library/blocks/social-links/style-rtl.css 1.32 kB +14 B (+1%)
build/block-library/blocks/social-links/style.css 1.32 kB +14 B (+1%)
build/block-library/blocks/template-part/editor-rtl.css 560 B -76 B (-12%) 👏
build/block-library/blocks/template-part/editor.css 559 B -76 B (-12%) 👏
build/block-library/blocks/term-description/editor-rtl.css 0 B -90 B (removed) 🏆
build/block-library/blocks/term-description/editor.css 0 B -90 B (removed) 🏆
build/block-library/editor-rtl.css 9.65 kB -136 B (-1%)
build/block-library/editor.css 9.65 kB -138 B (-1%)
build/block-library/index.min.js 148 kB +200 B (0%)
build/block-library/style-rtl.css 10.3 kB -83 B (-1%)
build/block-library/style.css 10.3 kB -82 B (-1%)
build/blocks/index.min.js 46 kB +245 B (+1%)
build/components/index.min.js 217 kB +363 B (0%)
build/components/style-rtl.css 15.3 kB +79 B (+1%)
build/components/style.css 15.3 kB +79 B (+1%)
build/customize-widgets/index.min.js 11.2 kB +19 B (0%)
build/edit-navigation/index.min.js 15.4 kB +17 B (0%)
build/edit-post/index.min.js 29.3 kB +11 B (0%)
build/edit-site/index.min.js 29.8 kB +49 B (0%)
build/edit-widgets/index.min.js 15.8 kB +18 B (0%)
build/editor/index.min.js 37.5 kB +2 B (0%)
build/element/index.min.js 3.21 kB +42 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 931 B
build/admin-manifest/index.min.js 1.09 kB
build/annotations/index.min.js 2.7 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.08 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.2 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/style-rtl.css 13.9 kB
build/block-editor/style.css 13.9 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 497 B
build/block-library/blocks/columns/style.css 496 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.17 kB
build/block-library/blocks/cover/style.css 1.17 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 977 B
build/block-library/blocks/gallery/editor.css 982 B
build/block-library/blocks/gallery/style-rtl.css 1.6 kB
build/block-library/blocks/gallery/style.css 1.59 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 502 B
build/block-library/blocks/image/style.css 505 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 568 B
build/block-library/blocks/navigation-link/editor.css 570 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 300 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/style-rtl.css 195 B
build/block-library/blocks/navigation-submenu/style.css 195 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.71 kB
build/block-library/blocks/navigation/editor.css 1.71 kB
build/block-library/blocks/navigation/style-rtl.css 1.64 kB
build/block-library/blocks/navigation/style.css 1.64 kB
build/block-library/blocks/navigation/view.min.js 2.74 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 198 B
build/block-library/blocks/page-list/style.css 198 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 396 B
build/block-library/blocks/post-featured-image/editor.css 397 B
build/block-library/blocks/post-featured-image/style-rtl.css 156 B
build/block-library/blocks/post-featured-image/style.css 156 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 391 B
build/block-library/blocks/post-template/style.css 392 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 60 B
build/block-library/blocks/post-title/style.css 60 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 378 B
build/block-library/blocks/pullquote/style.css 378 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 262 B
build/block-library/blocks/query-pagination/editor.css 255 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 220 B
build/block-library/blocks/quote/theme.css 222 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 374 B
build/block-library/blocks/search/style.css 375 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 250 B
build/block-library/blocks/separator/style.css 250 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 769 B
build/block-library/blocks/site-logo/editor.css 769 B
build/block-library/blocks/site-logo/style-rtl.css 165 B
build/block-library/blocks/site-logo/style.css 165 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 815 B
build/block-library/common.css 812 B
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/theme-rtl.css 665 B
build/block-library/theme.css 669 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/compose/index.min.js 10.4 kB
build/core-data/index.min.js 12.4 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 614 B
build/data/index.min.js 7.1 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 428 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.46 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/style-rtl.css 7.22 kB
build/edit-post/style.css 7.22 kB
build/edit-site/style-rtl.css 5.54 kB
build/edit-site/style.css 5.54 kB
build/edit-widgets/style-rtl.css 4.12 kB
build/edit-widgets/style.css 4.13 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 5.93 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.6 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.3 kB
build/list-reusable-blocks/index.min.js 1.85 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 845 B
build/nux/index.min.js 2.03 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.83 kB
build/primitives/index.min.js 921 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.63 kB
build/reusable-blocks/index.min.js 2.19 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.52 kB
build/shortcode/index.min.js 1.48 kB
build/token-list/index.min.js 562 B
build/url/index.min.js 1.74 kB
build/viewport/index.min.js 1.02 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.11 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@aaronrobertshaw
Copy link
Contributor Author

I have a follow-up PR to this one switching the ToolsPanel to leverage the Grid component removing the reliance on the single-column class. #35621

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Thank you @aaronrobertshaw!

I left a couple more comments, but feel free to merge once they are addressed 🚀

I have a follow-up PR to this one switching the ToolsPanel to leverage the Grid component removing the reliance on the single-column class

Excellent, thank you! Just FYI I may not be able to have a look at it today (but I'll try tomorrow) — thank you!

Another nice follow-up to this PR would be to type the DropdownMenu component, in order to get rid of the last hardcoded classnames — although I understand if can't look at it now, since other work on ToolsPanel and Typography tools may have higher priority.

@aaronrobertshaw
Copy link
Contributor Author

Excellent, thank you! Just FYI I may not be able to have a look at it today (but I'll try tomorrow) — thank you!

There's no hurry 🙂

The switch to using the Grid component will make the ToolsPanel more flexible in terms of layout so it will be good to work through that one whenever we can.

Another nice follow-up to this PR would be to type the DropdownMenu component, in order to get rid of the last hardcoded classnames — although I understand if can't look at it now, since other work on ToolsPanel and Typography tools may have higher priority.

It would be a nice follow up. Unfortunately, it will not be something that I can work on. The typography tools have my immediate focus and following that I'll need to return to a greater focus on design tooling for blocks.

Happy to help out with reviews etc if someone else would like to pick up that conversion.

@aaronrobertshaw aaronrobertshaw merged commit 5b8bf51 into trunk Oct 15, 2021
@aaronrobertshaw aaronrobertshaw deleted the remove/toolspanel-hardcoded-classnames branch October 15, 2021 05:51
@github-actions github-actions bot added this to the Gutenberg 11.8 milestone Oct 15, 2021
@ciampo
Copy link
Contributor

ciampo commented Oct 15, 2021

It would be a nice follow up. Unfortunately, it will not be something that I can work on. The typography tools have my immediate focus and following that I'll need to return to a greater focus on design tooling for blocks.
Happy to help out with reviews etc if someone else would like to pick up that conversion.

No problems at all! I already really appreciate the help you've been giving with ToolsPanel

@ciampo ciampo added [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Oct 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] UI Components Impacts or related to the UI component system [Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ToolsPanel: move away from hardcoded classnames
4 participants