From 29d54bcb78ed93e689e8424e7eae23dbd6d932da Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Thu, 27 Mar 2014 00:05:22 +0000 Subject: [PATCH] Twenty Thirteen and Fourteen: implement HTML5 markup for galleries (see #26697) and captions (see #26642). Props obenland, closes #27502. git-svn-id: https://develop.svn.wordpress.org/trunk@27763 602fd350-edb4-49c9-b593-d223f7449a82 --- .../twentyfourteen/css/editor-style.css | 22 +++++++++++++++++++ .../themes/twentyfourteen/functions.php | 2 +- .../themes/twentyfourteen/style.css | 11 ++++++++++ .../twentythirteen/css/editor-style.css | 22 +++++++++++++++++++ .../themes/twentythirteen/functions.php | 4 +++- .../themes/twentythirteen/style.css | 11 ++++++++++ 6 files changed, 70 insertions(+), 2 deletions(-) diff --git a/src/wp-content/themes/twentyfourteen/css/editor-style.css b/src/wp-content/themes/twentyfourteen/css/editor-style.css index c3f03fb8a1..e99813cae0 100644 --- a/src/wp-content/themes/twentyfourteen/css/editor-style.css +++ b/src/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; } diff --git a/src/wp-content/themes/twentyfourteen/functions.php b/src/wp-content/themes/twentyfourteen/functions.php index d7c9b19fbe..d78b44b262 100644 --- a/src/wp-content/themes/twentyfourteen/functions.php +++ b/src/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' ) ); /* diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css index ebc5951a39..1217d92ae4 100644 --- a/src/wp-content/themes/twentyfourteen/style.css +++ b/src/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; diff --git a/src/wp-content/themes/twentythirteen/css/editor-style.css b/src/wp-content/themes/twentythirteen/css/editor-style.css index c7228c3d53..568418992b 100644 --- a/src/wp-content/themes/twentythirteen/css/editor-style.css +++ b/src/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; } diff --git a/src/wp-content/themes/twentythirteen/functions.php b/src/wp-content/themes/twentythirteen/functions.php index 6b9d440ef5..2cfd20fe4b 100644 --- a/src/wp-content/themes/twentythirteen/functions.php +++ b/src/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. diff --git a/src/wp-content/themes/twentythirteen/style.css b/src/wp-content/themes/twentythirteen/style.css index a78cb9a0d0..6f5f53fe85 100644 --- a/src/wp-content/themes/twentythirteen/style.css +++ b/src/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,