Changeset 27763

Timestamp:

03/27/2014 12:05:22 AM (13 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;
 }