Changeset 44247

Timestamp:

12/16/2018 11:55:58 PM (8 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',
         );