Twenty Thirteen and Fourteen: implement HTML5 markup for galleries (see #26697) and captions (see #26642). Props obenland, closes #27502.

Built from https://develop.svn.wordpress.org/trunk@27763


git-svn-id: http://core.svn.wordpress.org/trunk@27600 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentyfourteen/css/editor-style.css

@@ -389,14 +389,36 @@ img {
 	text-align: left;
 }
 
+.html5-captions .wp-caption {
+	padding: 0;
+}
+
 .wp-caption.alignleft {
 	margin: 7px 14px 7px 0;
 }
 
+.html5-captions .wp-caption.alignleft {
+	margin-right: 24px;
+}
+
 .wp-caption.alignright {
 	margin: 7px 0 7px 14px;
 }
 
+.wp-caption.alignright img,
+.wp-caption.alignright .wp-caption-dd {
+	padding-left: 10px;
+}
+
+.html5-captions .wp-caption.alignright {
+	margin-left: 24px;
+}
+
+.html5-captions .wp-caption.alignright img,
+.html5-captions .wp-caption.alignright .wp-caption-dd {
+	padding: 0;
+}
+
 .wp-caption.aligncenter {
 	margin: 7px 0;
 }

wp-content/themes/twentyfourteen/functions.php

@@ -89,7 +89,7 @@ function twentyfourteen_setup() {
 	 * to output valid HTML5.
 	 */
 	add_theme_support( 'html5', array(
-		'search-form', 'comment-form', 'comment-list',
+		'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
 	) );
 
 	/*

wp-content/themes/twentyfourteen/style.css

@@ -636,6 +636,7 @@ span > object {
 }
 
 blockquote.alignleft,
+figure.wp-caption.alignleft,
 img.alignleft {
 	margin: 7px 24px 7px 0;
 }
@@ -645,6 +646,7 @@ img.alignleft {
 }
 
 blockquote.alignright,
+figure.wp-caption.alignright,
 img.alignright {
 	margin: 7px 0 7px 24px;
 }
@@ -694,9 +696,18 @@ img.aligncenter,
 	font-style: italic;
 	line-height: 1.5;
 	margin: 9px 0;
+}
+
+div.wp-caption .wp-caption-text {
 	padding-right: 10px;
 }
 
+div.wp-caption.alignright img[class*="wp-image-"],
+div.wp-caption.alignright .wp-caption-text {
+	padding-left: 10px;
+	padding-right: 0;
+}
+
 .wp-smiley {
 	border: 0;
 	margin-bottom: 0;

wp-content/themes/twentythirteen/css/editor-style.css

@@ -344,14 +344,36 @@ img {
 	text-align: left;
 }
 
+.html5-captions .wp-caption {
+	padding: 0;
+}
+
 .wp-caption.alignleft {
 	margin: 5px 10px 5px 0;
 }
 
+.html5-captions .wp-caption.alignleft {
+	margin-right: 20px;
+}
+
 .wp-caption.alignright {
 	margin: 5px 0 5px 10px;
 }
 
+.wp-caption.alignright img,
+.wp-caption.alignright .wp-caption-dd {
+	padding-left: 10px;
+}
+
+.html5-captions .wp-caption.alignright {
+	margin-left: 20px;
+}
+
+.html5-captions .wp-caption.alignright img,
+.html5-captions .wp-caption.alignright .wp-caption-dd {
+	padding: 0;
+}
+
 .wp-caption-dt {
 	margin: 0;
 }

wp-content/themes/twentythirteen/functions.php

@@ -81,7 +81,9 @@ function twentythirteen_setup() {
 	 * Switches default core markup for search form, comment form,
 	 * and comments to output valid HTML5.
 	 */
-	add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );
+	add_theme_support( 'html5', array(
+		'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
+	) );
 
 	/*
 	 * This theme supports all available post formats by default.

wp-content/themes/twentythirteen/style.css

@@ -709,6 +709,7 @@ video {
 	margin-right: auto;
 }
 
+figure.wp-caption.alignleft,
 img.alignleft {
 	margin: 5px 20px 5px 0;
 }
@@ -717,6 +718,7 @@ img.alignleft {
 	margin: 5px 10px 5px 0;
 }
 
+figure.wp-caption.alignright,
 img.alignright {
 	margin: 5px 0 5px 20px;
 }
@@ -740,6 +742,15 @@ img.alignnone {
 	font-size: 18px;
 	font-style: italic;
 	font-weight: 300;
+	margin: 0 0 24px;
+}
+
+div.wp-caption.alignright img[class*="wp-image-"] {
+	float: right;
+}
+
+div.wp-caption.alignright .wp-caption-text {
+	padding-left: 10px;
 }
 
 img.wp-smiley,