Merge pull request #55 from WordPress/fix/switcher-menu-dont-convert-…

…images Switcher: Only allow type conversions based on kinds
WordPress · Feb 10, 2017 · 35db542 · 35db542
2 parents 940faf3 + 6fc1377
commit 35db542
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/blocks.js b/blocks.js
@@ -286,6 +286,24 @@ function hideMenu() {
 function showSwitcherMenu( event ) {
 	event.stopPropagation();
 
+	if ( ! selectedBlock ) {
+		return;
+	}
+
+	// not all block types can be converted to all block types.
+	// filter which lists of types are shown in the menu depending on the
+	// selected block, based on _kinds_ (see config)
+	var blockType = getTagType( selectedBlock.nodeName );
+	var kinds = getTypeKinds( blockType );
+	var validClasses = kinds.map( function( kind ) {
+		return 'switch-block__block-list-' + kind;
+	} );
+	query( '.switch-block__block-list' ).forEach( function( switcherGroup ) {
+		var shouldShow = containsOneOf( switcherGroup, validClasses );
+		switcherGroup.style.display = shouldShow ? 'block' : 'none';
+	} );
+
+	// position switcher menu next to type icon
 	var position = switcher.getBoundingClientRect();
 	switcherMenu.style.top = ( position.top + 42 + window.scrollY ) + 'px';
 	switcherMenu.style.left = ( position.left - 32 + window.scrollX ) + 'px';
@@ -314,3 +332,9 @@ function getConfig( configName, tagName ) {
 	return config[ configName ][ tagName ] ||
 		config[ configName ].default;
 }
+
+function containsOneOf( element, classes ) {
+	return classes.some( function( className ) {
+		return element.classList.contains( className );
+	} );
+}
diff --git a/index.html b/index.html
@@ -51,7 +51,7 @@
 		</div>
 		<div class="switch-block__menu popover is-bottom">
 			<div class="popover__arrow"></div>
-			<div class="switch-block__block-list">
+			<div class="switch-block__block-list switch-block__block-list-text">
 				<div class="switch-block__block">
 					<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><label>Paragraph</label>
 				</div>
@@ -62,6 +62,11 @@
 					<svg class="type-icon-quote gridicon gridicons-quote" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M11.192 15.757c0-.88-.23-1.618-.69-2.217-.326-.412-.768-.683-1.327-.812-.55-.128-1.07-.137-1.54-.028-.16-.95.1-1.956.76-3.022.66-1.065 1.515-1.867 2.558-2.403L9.373 5c-.8.396-1.56.898-2.26 1.505-.71.607-1.34 1.305-1.9 2.094s-.98 1.68-1.25 2.69-.346 2.04-.217 3.1c.168 1.4.62 2.52 1.356 3.35.735.84 1.652 1.26 2.748 1.26.965 0 1.766-.29 2.4-.878.628-.576.94-1.365.94-2.368l.002.003zm9.124 0c0-.88-.23-1.618-.69-2.217-.326-.42-.77-.692-1.327-.817-.56-.124-1.074-.13-1.54-.022-.16-.94.09-1.95.75-3.02.66-1.06 1.514-1.86 2.557-2.4L18.49 5c-.8.396-1.555.898-2.26 1.505-.708.607-1.34 1.305-1.894 2.094-.556.79-.97 1.68-1.24 2.69-.273 1-.345 2.04-.217 3.1.165 1.4.615 2.52 1.35 3.35.732.833 1.646 1.25 2.742 1.25.967 0 1.768-.29 2.402-.876.627-.576.942-1.365.942-2.368v.01z"></path></g></svg><label>Quote</label>
 				</div>
 			</div>
+			<div class="switch-block__block-list switch-block__block-list-image">
+				<div class="switch-block__block">
+					<p>Nothing here.</p>
+				</div>
+			</div>
 		</div>
 		<section class="editor" contenteditable="true">
 			<h2>1.0 Is The Loneliest Number</h2>