Changeset 44247

Timestamp:

12/16/2018 11:55:58 PM (6 years ago)

Author:

SergeyBiryukov

Message:

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.

Location:

trunk

Files:

• . (modified) (1 prop)
• src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js (modified) (5 diffs)
• src/wp-includes/css/editor.css (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (1 diff)

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

@@ -20 +20 @@
 
     function toggleToolbars( state ) {
-        var iframe, initial, toolbars,
-            pixels = 0;
-
-        initial = ( state === 'hide' );
+        var initial, toolbars,
+            pixels = 0,
+            classicBlockToolbar = tinymce.$( '.block-library-classic__toolbar' );
+
+        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 ) {
@@ -29 +36 @@
         }
 
-        if ( ! toolbars || toolbars.length < 2 || ( state === 'hide' && ! toolbars[1].visible() ) ) {
-            return;
-        }
-
-        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;
-                }
-            }
-        });
-
-        if ( pixels && ! initial ) {
-            // Resize iframe, not needed in iOS
-            if ( ! tinymce.Env.iOS ) {
-                iframe = editor.getContentAreaContainer().firstChild;
-                DOM.setStyle( iframe, 'height', iframe.clientHeight + pixels );
-            }
-
+        if ( toolbars && toolbars.length > 1 ) {
+            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;
+                    }
+                }
+            });
+        }
+
+        // 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 );
             }
@@ -74 +78 @@
         onPostRender: function() {
             wpAdvButton = this;
-            wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' ? true : false );
+            wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' );
         }
     });
@@ -82 +86 @@
         if ( editor.getParam( 'wordpress_adv_hidden', true ) && getUserSetting( 'hidetb', '0' ) === '0' ) {
             toggleToolbars( 'hide' );
+        } else {
+            tinymce.$( '.block-library-classic__toolbar' ).addClass( 'has-advanced-toolbar' );
         }
     });
@@ -427 +433 @@
     });
 
-    // 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',

trunk/src/wp-includes/css/editor.css

@@ -360 +360 @@
 .mce-toolbar .mce-btn-group {
     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;
 }
 

trunk/src/wp-includes/script-loader.php

@@ -518 +518 @@
         'spellchecker',
         'wp_add_media',
-        'kitchensink',
+        'wp_adv',
     );