Support menu bar, adjust toolbar styling

WordPress · Jul 7, 2017 · 7e06bc2 · 7e06bc2
1 parent 6e277d3
commit 7e06bc2
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 61 deletions.
diff --git a/blocks/library/freeform/old-editor.js b/blocks/library/freeform/old-editor.js
@@ -41,26 +41,14 @@ export default class OldEditor extends Component {
 
 	initialize() {
 		const { id } = this.props;
-		const {
-			plugins,
-			external_plugins,
-			toolbar1,
-			toolbar2,
-			toolbar3,
-			toolbar4,
-		} = window.wpEditorL10n.tinymce.settings;
+		const { settings } = window.wpEditorL10n.tinymce;
 
 		wp.oldEditor.initialize( id, {
 			tinymce: {
+				...settings,
 				inline: true,
 				content_css: false,
 				fixed_toolbar_container: '#' + id + '-toolbar',
-				plugins,
-				external_plugins,
-				toolbar1: toolbar1.join( ',' ),
-				toolbar2: toolbar2.join( ',' ),
-				toolbar3: toolbar3.join( ',' ),
-				toolbar4: toolbar4.join( ',' ),
 				setup: this.onSetup,
 			},
 		} );

diff --git a/blocks/library/freeform/style.scss b/blocks/library/freeform/style.scss
@@ -87,66 +87,72 @@
 
 .freeform-toolbar {
 	width: auto;
-}
-
-.freeform-toolbar .mce-tinymce-inline {
-	margin: 0;
-	background: transparent;
-	position: sticky;
 	top: $header-height - 1px;
 	z-index: z-index( '.editor-visual-editor__block-controls' );
-	margin-top: -$block-controls-height - $item-spacing;
+	position: sticky;
 
 	@include break-medium() {
 		top: $header-height + $admin-bar-height + $item-spacing;
 	}
 }
 
+.freeform-toolbar .mce-tinymce-inline {
+	margin: 0;
+	margin-top: -$block-controls-height - $item-spacing;
+	border: 1px solid $light-gray-500;
+	background-color: $white;
+	box-shadow: $shadow-popover;
+}
+
 // Overwrite inline styles.
 .freeform-toolbar .mce-tinymce-inline,
 .freeform-toolbar .mce-tinymce-inline > div,
 .freeform-toolbar div.mce-toolbar-grp,
-.freeform-toolbar div.mce-toolbar-grp > div {
+.freeform-toolbar div.mce-toolbar-grp > div,
+.freeform-toolbar .mce-menubar,
+.freeform-toolbar .mce-menubar > div {
 	height: auto !important;
 	width: 100% !important;
-	border: none !important;
 }
 
-.freeform-toolbar div.mce-toolbar-grp {
-	background-color: transparent;
-	border: none;
-	position: static;
+.freeform-toolbar .mce-tinymce-inline .mce-flow-layout {
+    white-space: normal;
 }
 
-div.mce-toolbar-grp > div {
-    padding: 0;
+.freeform-toolbar .mce-container-body.mce-abs-layout {
+	overflow: visible;
 }
 
-.freeform-toolbar div.mce-btn-group {
-	border: 1px solid $light-gray-500;
-	box-shadow: $shadow-popover;
-	background-color: $white;
-	padding: 0;
+.freeform-toolbar .mce-menubar {
+	position: static;
+}
 
-	&:not(:first-child) {
-		margin-left: 6px;
-	}
+.freeform-toolbar div.mce-toolbar-grp {
+	background-color: transparent;
+	border: none;
+	position: static;
 }
 
-.freeform-toolbar .mce-container-body.mce-abs-layout {
-	overflow: visible;
+.freeform-toolbar div.mce-toolbar-grp > div {
+    padding: 0;
 }
 
-.freeform-toolbar .mce-toolbar:not(:first-child) {
+.freeform-toolbar .mce-toolbar-grp .mce-toolbar:not(:first-child) {
 	display: none;
-	margin-top: 6px;
+	border-top: 1px solid $light-gray-500;
 }
 
-.freeform-toolbar.has-advanced-toolbar .mce-toolbar {
+.freeform-toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar {
 	display: block;
 }
 
-.freeform-toolbar .mce-toolbar .mce-btn {
+.freeform-toolbar div.mce-btn-group {
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+
+.freeform-toolbar .mce-toolbar-grp .mce-toolbar .mce-btn {
 	margin: 0;
 	padding: 3px;
 	background: none;
@@ -160,6 +166,8 @@ div.mce-toolbar-grp > div {
 	// Overwrite
 	border: none;
 	box-sizing: border-box;
+	box-shadow: none;
+	border-radius: 0;
 
 	&:hover,
 	/* the ":not(:disabled)" is needed to make it specific enough */

diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -443,7 +443,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		'tinymce' => array(
 			'baseURL' => includes_url( 'js/tinymce' ),
 			'suffix' => SCRIPT_DEBUG ? '' : '.min',
-			'settings' => array(
+			'settings' => apply_filters( 'tiny_mce_before_init', array(
 				'external_plugins' => apply_filters( 'mce_external_plugins', array() ),
 				'plugins' => array_unique( apply_filters( 'tiny_mce_plugins', array(
 					'charmap',
@@ -465,25 +465,24 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 					'wptextpattern',
 					'wpview',
 				) ) ),
-				'toolbar1' => array_merge( apply_filters( 'mce_buttons', array(
+				'toolbar1' => implode( ',', array_merge( apply_filters( 'mce_buttons', array(
 					'formatselect',
-					'|',
-					'alignleft',
-					'aligncenter',
-					'alignright',
-					'|',
+					'bold',
+					'italic',
 					'bullist',
 					'numlist',
 					'blockquote',
-					'|',
-					'bold',
-					'italic',
-					'strikethrough',
+					'alignleft',
+					'aligncenter',
+					'alignright',
 					'link',
-				), 'editor' ), array( '|', 'kitchensink' ) ),
-				'toolbar2' => apply_filters( 'mce_buttons_2', array(
-					'hr',
+					'unlink',
 					'wp_more',
+					'spellchecker',
+				), 'editor' ), array( 'kitchensink' ) ) ),
+				'toolbar2' => implode( ',', apply_filters( 'mce_buttons_2', array(
+					'strikethrough',
+					'hr',
 					'forecolor',
 					'pastetext',
 					'removeformat',
@@ -493,10 +492,10 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 					'undo',
 					'redo',
 					'wp_help',
-				), 'editor' ),
-				'toolbar3' => apply_filters( 'mce_buttons_3', array(), 'editor' ),
-				'toolbar4' => apply_filters( 'mce_buttons_4', array(), 'editor' ),
-			),
+				), 'editor' ) ),
+				'toolbar3' => implode( ',', apply_filters( 'mce_buttons_3', array(), 'editor' ) ),
+				'toolbar4' => implode( ',', apply_filters( 'mce_buttons_4', array(), 'editor' ) ),
+			), 'editor' ),
 		),
 	) );