Add node type icon.

WordPress · Feb 8, 2017 · b528c0a · b528c0a
1 parent 4e1ac25
commit b528c0a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/blocks.js b/blocks.js
@@ -63,9 +63,23 @@ function clearBlocks() {
 }
 
 function showControls( node ) {
+	// show element type
+	document.getElementsByClassName( 'type-icon-image' )[0].style.display = 'none';
+	document.getElementsByClassName( 'type-icon-heading' )[0].style.display = 'none';
+	document.getElementsByClassName( 'type-icon-paragraph' )[0].style.display = 'none';
+	if ( node.nodeName == 'IMG' ) {
+		document.getElementsByClassName( 'type-icon-image' )[0].style.display = 'block';
+	} else if ( node.nodeName == 'H1' || node.nodeName == 'H2' || node.nodeName == 'H3' || node.nodeName == 'H4' || node.nodeName == 'H5' || node.nodeName == 'H6' ) {
+		document.getElementsByClassName( 'type-icon-heading' )[0].style.display = 'block';
+	} else {
+		document.getElementsByClassName( 'type-icon-paragraph' )[0].style.display = 'block';
+	}
+
+	// show controls
 	var position = node.getBoundingClientRect();
 	switcher.style.opacity = 1;
 	switcher.style.top = ( position.top + 18 ) + 'px';
+
 	blockControls.style.display = 'block';
 	blockControls.style.top = ( position.top - 36 ) + 'px';
 	blockControls.style.maxHeight = 'none';

diff --git a/index.html b/index.html
@@ -10,7 +10,11 @@
 		<div class="block-switcher">
 			<svg width="18" height="18" class="up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2 11l7-7 7 7-1.4 1.4L9 6.8l-5.6 5.6"/></svg>
 			<svg width="18" height="18" class="down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16 6.414l-7 7-7-7 1.4-1.4 5.6 5.6 5.6-5.6"/></svg>
-			<svg width="24" height="24" class="type" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="path-1_2_" class="st0" d="M13 5h2v16h2V5h2V3h-6.7.2-3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2v-7h-.5.5V5z"/><path class="st1" d="M9.5 3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3H9.5z"/></svg>
+			<span class="type">
+				<svg width="24" height="24" class="type-icon-paragraph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="path-1_2_" class="st0" d="M13 5h2v16h2V5h2V3h-6.7.2-3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2v-7h-.5.5V5z"/><path class="st1" d="M9.5 3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3H9.5z"/></svg>
+				<svg width="24" height="24" class="type-icon-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Heading</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M18 20h-3v-6H9v6H6V5.01h3V11h6V5.01h3V20z"/></g></svg>
+				<svg width="24" height="24" class="type-icon-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Image</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M13 9.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5zM22 6v12c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V6c0-1.105.895-2 2-2h16c1.105 0 2 .895 2 2zm-2 0H4v7.444L8 9l5.895 6.55 1.587-1.85c.798-.932 2.24-.932 3.037 0L20 15.426V6z"/></g></svg>
+			</span>
 		</div>
 		<div class="block-controls">
 			<button class="is-selected">

diff --git a/style.css b/style.css
@@ -142,11 +142,19 @@ p {
 	bottom: -6px;
 }
 
-.block-switcher svg.type {
+.block-switcher .type {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: absolute;
 	right: 6px;
 	top: 6px;
 }
 
+.block-switcher .type svg { /* node type js picks icon here */
+    display: none;
+}
+
 
 /**
  * Inline controls