diff --git a/docs/walkthroughs/saving-and-loading-html-content.md b/docs/walkthroughs/saving-and-loading-html-content.md
index 2f1f8d91f..96bff7eaf 100644
--- a/docs/walkthroughs/saving-and-loading-html-content.md
+++ b/docs/walkthroughs/saving-and-loading-html-content.md
@@ -48,6 +48,9 @@ const rules = [
         return {
           object: 'block',
           type: 'paragraph',
+          data: {
+            className: el.getAttribute('class'),
+          },
           nodes: next(el.childNodes),
         }
       }
@@ -68,6 +71,9 @@ const rules = [
         return {
           object: 'block',
           type: 'paragraph',
+          data: {
+            className: el.getAttribute('class'),
+          },
           nodes: next(el.childNodes),
         }
       }
@@ -75,7 +81,7 @@ const rules = [
     // Add a serializing function property to our rule...
     serialize(obj, children) {
       if (obj.object == 'block' && obj.type == 'paragraph') {
-        return <p>{children}</p>
+        return <p className={obj.data.get('className')}>{children}</p>
       }
     },
   },
@@ -107,6 +113,9 @@ const rules = [
         return {
           object: 'block',
           type: type,
+          data: {
+            className: el.getAttribute('class'),
+          },
           nodes: next(el.childNodes),
         }
       }
@@ -116,7 +125,7 @@ const rules = [
       if (obj.object == 'block') {
         switch (obj.type) {
           case 'paragraph':
-            return <p>{children}</p>
+            return <p className={obj.data.get('className')}>{children}</p>
           case 'quote':
             return <blockquote>{children}</blockquote>
           case 'code':
@@ -160,6 +169,9 @@ const rules = [
         return {
           object: 'block',
           type: type,
+          data: {
+            className: el.getAttribute('class'),
+          },
           nodes: next(el.childNodes),
         }
       }
@@ -174,7 +186,7 @@ const rules = [
               </pre>
             )
           case 'paragraph':
-            return <p>{children}</p>
+            return <p className={obj.data.get('className')}>{children}</p>
           case 'quote':
             return <blockquote>{children}</blockquote>
         }
@@ -260,7 +272,11 @@ class App extends React.Component {
           </pre>
         )
       case 'paragraph':
-        return <p {...props.attributes}>{props.children}</p>
+        return (
+          <p {...props.attributes} className={node.data.get('className')}>
+            {props.children}
+          </p>
+        )
       case 'quote':
         return <blockquote {...props.attributes}>{props.children}</blockquote>
     }