Global Styles: Re-add styles that were removed, for classic themes (#…

…44334)

* Global Styles: Readd styles that were removed, for classic themes

* change the action on which to run the hook

* Add an explanatory comments

* update comment

lib/compat/wordpress-6.1/script-loader.php

@@ -181,3 +181,19 @@ function gutenberg_enqueue_global_styles() {
 add_action( 'wp_footer', 'gutenberg_enqueue_global_styles', 1 );
 add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_stored_styles' );
 add_action( 'wp_footer', 'gutenberg_enqueue_stored_styles', 1 );
+
+/**
+ * Loads classic theme styles on classic themes.
+ *
+ * This is needed for backwards compatibility for button blocks specifically.
+ */
+function gutenberg_enqueue_classic_theme_styles() {
+	if ( ! wp_is_block_theme() ) {
+		wp_register_style( 'classic-theme-styles', gutenberg_url( 'build/block-library/classic.css' ), array(), true );
+		wp_enqueue_style( 'classic-theme-styles' );
+	}
+}
+// To load classic theme styles on the frontend.
+add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_classic_theme_styles' );
+// To load classic theme styles in the the editor.
+add_action( 'admin_enqueue_scripts', 'gutenberg_enqueue_classic_theme_styles' );

packages/block-library/src/classic.scss

@@ -0,0 +1,15 @@
+// These rules are needed for backwards compatibility.
+.wp-block-button__link {
+	color: $white;
+	background-color: #32373c;
+	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
+
+	// This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+	box-shadow: none;
+	text-decoration: none;
+
+	// The extra 2px are added to size solids the same as the outline versions.
+	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+
+	font-size: 1.125em;
+}