Changeset 27763

Timestamp:

03/27/2014 12:05:22 AM (10 years ago)

Author:

lancewillett

Message:

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

Location:

trunk/src/wp-content/themes

Files:

• twentyfourteen/css/editor-style.css (modified) (1 diff)
• twentyfourteen/functions.php (modified) (1 diff)
• twentyfourteen/style.css (modified) (3 diffs)
• twentythirteen/css/editor-style.css (modified) (1 diff)
• twentythirteen/functions.php (modified) (1 diff)
• twentythirteen/style.css (modified) (3 diffs)

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

@@ -390 +390 @@
 }
 
+.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;
 }
 

trunk/src/wp-content/themes/twentyfourteen/functions.php

@@ -90 +90 @@
      */
     add_theme_support( 'html5', array(
-        'search-form', 'comment-form', 'comment-list',
+        'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
     ) );
 

trunk/src/wp-content/themes/twentyfourteen/style.css

@@ -637 +637 @@
 
 blockquote.alignleft,
+figure.wp-caption.alignleft,
 img.alignleft {
     margin: 7px 24px 7px 0;
@@ -646 +647 @@
 
 blockquote.alignright,
+figure.wp-caption.alignright,
 img.alignright {
     margin: 7px 0 7px 24px;
@@ -695 +697 @@
     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;
 }
 

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

@@ -345 +345 @@
 }
 
+.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;
 }
 

trunk/src/wp-content/themes/twentythirteen/functions.php

@@ -82 +82 @@
      * 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'
+    ) );
 
     /*

trunk/src/wp-content/themes/twentythirteen/style.css

@@ -710 +710 @@
 }
 
+figure.wp-caption.alignleft,
 img.alignleft {
     margin: 5px 20px 5px 0;
@@ -718 +719 @@
 }
 
+figure.wp-caption.alignright,
 img.alignright {
     margin: 5px 0 5px 20px;
@@ -741 +743 @@
     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;
 }