Block Editor: Fix the TinyMCE `wordpress` plugin to handle hiding/showing of toolbars in the classic block. Change the classic block toolbar to use the (now fixed) `wp_adv` button.

Props azaozz.
Merges [43889] and [43890] to trunk.
Fixes #45264.

git-svn-id: https://develop.svn.wordpress.org/trunk@44247 602fd350-edb4-49c9-b593-d223f7449a82

src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js

@@ -19,47 +19,51 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 	}
 
 	function toggleToolbars( state ) {
-		var iframe, initial, toolbars,
-			pixels = 0;
+		var initial, toolbars,
+			pixels = 0,
+			classicBlockToolbar = tinymce.$( '.block-library-classic__toolbar' );
 
-		initial = ( state === 'hide' );
+		if ( state === 'hide' ) {
+			initial = true;
+		} else if ( classicBlockToolbar.length && ! classicBlockToolbar.hasClass( 'has-advanced-toolbar' ) ) {
+			// Show the second, third, etc. toolbar rows in the Classic block instance.
+			classicBlockToolbar.addClass( 'has-advanced-toolbar' );
+			state = 'show';
+		}
 
 		if ( editor.theme.panel ) {
 			toolbars = editor.theme.panel.find('.toolbar:not(.menubar)');
 		}
 
-		if ( ! toolbars || toolbars.length < 2 || ( state === 'hide' && ! toolbars[1].visible() ) ) {
-			return;
-		}
+		if ( toolbars && toolbars.length > 1 ) {
+			if ( ! state && toolbars[1].visible() ) {
+				state = 'hide';
+			}
 
-		if ( ! state && toolbars[1].visible() ) {
-			state = 'hide';
-		}
-
-		each( toolbars, function( toolbar, i ) {
-			if ( i > 0 ) {
-				if ( state === 'hide' ) {
-					toolbar.hide();
-					pixels += 30;
-				} else {
-					toolbar.show();
-					pixels -= 30;
+			each( toolbars, function( toolbar, i ) {
+				if ( i > 0 ) {
+					if ( state === 'hide' ) {
+						toolbar.hide();
+						pixels += 30;
+					} else {
+						toolbar.show();
+						pixels -= 30;
+					}
 				}
-			}
-		});
+			});
+		}
 
-		if ( pixels && ! initial ) {
-			// Resize iframe, not needed in iOS
-			if ( ! tinymce.Env.iOS ) {
-				iframe = editor.getContentAreaContainer().firstChild;
-				DOM.setStyle( iframe, 'height', iframe.clientHeight + pixels );
-			}
+		// Resize editor iframe, not needed for iOS and inline instances.
+		if ( pixels && ! tinymce.Env.iOS && editor.iframeElement ) {
+			DOM.setStyle( editor.iframeElement, 'height', editor.iframeElement.clientHeight + pixels );
+		}
 
+		if ( ! initial ) {
 			if ( state === 'hide' ) {
-				setUserSetting('hidetb', '0');
+				setUserSetting( 'hidetb', '0' );
 				wpAdvButton && wpAdvButton.active( false );
 			} else {
-				setUserSetting('hidetb', '1');
+				setUserSetting( 'hidetb', '1' );
 				wpAdvButton && wpAdvButton.active( true );
 			}
 		}
@@ -73,7 +77,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 		cmd: 'WP_Adv',
 		onPostRender: function() {
 			wpAdvButton = this;
-			wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' ? true : false );
+			wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' );
 		}
 	});
 
@@ -81,6 +85,8 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 	editor.on( 'PostRender', function() {
 		if ( editor.getParam( 'wordpress_adv_hidden', true ) && getUserSetting( 'hidetb', '0' ) === '0' ) {
 			toggleToolbars( 'hide' );
+		} else {
+			tinymce.$( '.block-library-classic__toolbar' ).addClass( 'has-advanced-toolbar' );
 		}
 	});
 
@@ -426,9 +432,14 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 		stateSelector: 'code'
 	});
 
-	// Menubar
 	// Insert->Add Media
 	if ( wp && wp.media && wp.media.editor ) {
+		editor.addButton( 'wp_add_media', {
+			tooltip: 'Add Media',
+			icon: 'dashicon dashicons-admin-media',
+			cmd: 'WP_Medialib'
+		} );
+
 		editor.addMenuItem( 'add_media', {
 			text: 'Add Media',
 			icon: 'wp-media-library',

src/wp-includes/css/editor.css

@@ -361,6 +361,15 @@ div.mce-toolbar-grp > div {
 	margin: 0;
 }
 
+/* Classic block hide/show toolbars */
+.block-library-classic__toolbar .mce-toolbar-grp .mce-toolbar:not(:first-child) {
+	display: none;
+}
+
+.block-library-classic__toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar {
+	display: block;
+}
+
 div.mce-statusbar {
 	border-top: 1px solid #e5e5e5;
 }

src/wp-includes/script-loader.php

@@ -517,7 +517,7 @@ function wp_default_packages_inline_scripts( &$scripts ) {
 		'wp_more',
 		'spellchecker',
 		'wp_add_media',
-		'kitchensink',
+		'wp_adv',
 	);
 
 	/* This filter is documented in wp-includes/class-wp-editor.php */