Add image to HTML and block handling.

blocks.js

@@ -19,7 +19,8 @@ function attachBlockHandlers() {
 function getBlocks() {
 	var text = document.getElementsByTagName( 'p' );
 	var heading = document.getElementsByTagName( 'h2' );
-	return [ ...text, ...heading ];
+	var images = document.getElementsByTagName( 'img' );
+	return [ ...text, ...heading, ...images ];
 }
 
 function selectBlock( event ) {

index.html

@@ -16,6 +16,7 @@
 			<h2>1.0 Is The Loneliest Number</h2>
 			<p>Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p>
 			<p>I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.</p>
+			<img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720" />
 			<p> </p>
 			<svg class="gridicon gridicons-add-outline" height="48" width="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 9h-4V7h-2v4H7v2h4v4h2v-4h4v-2z"></path></g></svg>
 		</section>

style.css

@@ -24,7 +24,8 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+img {
   font-family: "Merriweather", serif;
   margin: 15px 0;
   /* Uses paddings instead */
@@ -52,7 +53,8 @@ h3,
 h4,
 h5,
 h6,
-p {
+p,
+img {
   position: relative;
   box-shadow: inset 0px 0px 0px 0px #e0e5e9;
   transition: all .2s ease;
@@ -65,7 +67,8 @@ h3:hover,
 h4:hover,
 h5:hover,
 h6:hover,
-p:hover {
+p:hover,
+img:hover {
   box-shadow: inset 0px 0px 0px 2px #e0e5e9;
 }
 h1.is-selected,
@@ -74,7 +77,8 @@ h3.is-selected,
 h4.is-selected,
 h5.is-selected,
 h6.is-selected,
-p.is-selected {
+p.is-selected,
+img.is-selected {
   box-shadow: inset 0px 0px 0px 2px #191e23;
 }
 h1:before,
@@ -83,7 +87,8 @@ h3:before,
 h4:before,
 h5:before,
 h6:before,
-p:before {
+p:before,
+img:before {
   content: "";
   position: absolute;
   display: block;
@@ -101,7 +106,8 @@ h3.is-selected:before,
 h4.is-selected:before,
 h5.is-selected:before,
 h6.is-selected:before,
-p.is-selected:before {
+p.is-selected:before,
+img.is-selected:before {
   height: 36px;
   top: -36px;
 }
@@ -139,3 +145,8 @@ p {
   right: 6px;
   top: 6px;
 }
+
+img {
+	max-width: 100%;
+	height: auto;
+}