From 3b639b04d2ce53d5d20fe1e2c8c39c4bedaf33dc Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Mon, 6 Apr 2020 19:53:26 +0200
Subject: [PATCH] Markdown Block: ensure the editor buttons look good
 everywhere

Fixes #14978

This adds additional classes so the button can be properly styled by the editor.
---
 extensions/blocks/markdown/edit.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/extensions/blocks/markdown/edit.js b/extensions/blocks/markdown/edit.js
index 7b8e9f46be8df..a592290ae6eaa 100644
--- a/extensions/blocks/markdown/edit.js
+++ b/extensions/blocks/markdown/edit.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { BlockControls, PlainText } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
@@ -67,12 +68,13 @@ class MarkdownEdit extends Component {
 
 	renderToolbarButton( mode, label ) {
 		const { activePanel } = this.state;
+		const { className } = this.props;
+		const buttonClassnames = classnames( className, 'components-button components-tab-button', {
+			'is-pressed': activePanel === mode,
+		} );
 
 		return (
-			<button
-				className={ `components-tab-button ${ activePanel === mode ? 'is-active' : '' }` }
-				onClick={ this.toggleMode( mode ) }
-			>
+			<button className={ buttonClassnames } onClick={ this.toggleMode( mode ) }>
 				<span>{ label }</span>
 			</button>
 		);