Unify the global block styles panel with the block inspector panels (#…

…49428)

packages/edit-site/src/components/global-styles/block-preview-panel.js

@@ -11,7 +11,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 		...blockExample,
 		attributes: {
 			...blockExample?.attributes,
-			className: variation,
+			className: 'is-style-' + variation,
 		},
 	};
 	const blocks =

packages/edit-site/src/components/global-styles/border-panel.js

@@ -58,7 +58,9 @@ export default function BorderPanel( { name, variation = '' } ) {
 	}
 	const prefix = prefixParts.join( '.' );
 
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ style ] = useGlobalStyle( prefix, name, 'user', {
+		shouldDecodeEncode: false,
+	} );
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
 		shouldDecodeEncode: false,
 	} );

packages/edit-site/src/components/global-styles/dimensions-panel.js

@@ -26,19 +26,15 @@ const DEFAULT_CONTROLS = {
 	childLayout: false,
 };
 
-export default function DimensionsPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+export default function DimensionsPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+	const [ rawSettings, setSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 
 	// These intermediary objects are needed because the "layout" property is stored
 	// in settings rather than styles.