Merge pull request #392 from ckeditor/t/391

Feature: Introduced the `BlockToolbar` plugin. Closes #391.

package.json

@@ -15,14 +15,18 @@
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-basic-styles": "^10.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^10.0.0",
     "@ckeditor/ckeditor5-cloud-services": "^10.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^10.0.0",
     "@ckeditor/ckeditor5-editor-classic": "^10.0.0",
     "@ckeditor/ckeditor5-engine": "^10.0.0",
     "@ckeditor/ckeditor5-enter": "^10.0.0",
     "@ckeditor/ckeditor5-easy-image": "^10.0.0",
+    "@ckeditor/ckeditor5-essentials": "^10.0.0",
     "@ckeditor/ckeditor5-heading": "^10.0.0",
     "@ckeditor/ckeditor5-image": "^10.0.0",
     "@ckeditor/ckeditor5-link": "^10.0.0",
+    "@ckeditor/ckeditor5-list": "^10.0.0",
     "@ckeditor/ckeditor5-paragraph": "^10.0.0",
     "@ckeditor/ckeditor5-typing": "^10.0.0",
     "@ckeditor/ckeditor5-undo": "^10.0.0",

src/toolbar/block/blockbuttonview.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2016 - 2017, CKSource - Frederico Knabben. All rights reserved.
+ */
+
+/**
+ * @module ui/toolbar/block/blockbuttonview
+ */
+
+import ButtonView from '../../button/buttonview';
+import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
+import '../../../theme/components/toolbar/blocktoolbar.css';
+
+const toPx = toUnit( 'px' );
+
+/**
+ * The block button view class.
+ *
+ * This view represents a button attached next to block element where the selection is anchored.
+ *
+ * See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.
+ *
+ * @extends {module:ui/button/buttonview~ButtonView}
+ */
+export default class BlockButtonView extends ButtonView {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		// Hide button on init.
+		this.isVisible = false;
+
+		/**
+		 * Top offset.
+		 *
+		 * @member {Number} #top
+		 */
+		this.set( 'top', 0 );
+
+		/**
+		 * Left offset.
+		 *
+		 * @member {Number} #left
+		 */
+		this.set( 'left', 0 );
+
+		this.extendTemplate( {
+			attributes: {
+				class: 'ck-block-toolbar-button',
+				style: {
+					top: bind.to( 'top', val => toPx( val ) ),
+					left: bind.to( 'left', val => toPx( val ) ),
+				}
+			}
+		} );
+	}
+}