Twenty Fourteen: first pass at adding editor stylesheet. Props Frank Klein, see #25084.

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


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

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

@@ -0,0 +1,425 @@
+/*
+Theme Name: Twenty Fourteen
+Description: Used to style the TinyMCE editor.
+*/
+
+
+/**
+ * Table of Contents:
+ *
+ * 1.0 - Body
+ * 2.0 - Headings
+ * 3.0 - Text Elements
+ * 4.0 - Links
+ * 5.0 - Alignment
+ * 6.0 - Tables
+ * 7.0 - Images
+ * 8.0 - RTL
+ * ----------------------------------------------------------------------------
+ */
+
+
+/**
+ * 1.0 Body
+ * ----------------------------------------------------------------------------
+ */
+
+html .mceContentBody {
+	font-size: 100%;
+	max-width: 474px;
+}
+
+body {
+	color: #2b2b2b;
+	font-family: Lato, sans-serif;
+	line-height: 1.5;
+	text-rendering: optimizeLegibility;
+	vertical-align: baseline;
+}
+
+
+/**
+ * 2.0 Headings
+ * ----------------------------------------------------------------------------
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	clear: both;
+	font-weight: 700;
+	margin: 0 0 12px;
+}
+
+h1 {
+	font-size: 33px;
+	line-height: 1.0909090909;
+}
+
+h2 {
+	font-size: 30px;
+	line-height: 1.2;
+}
+
+h3 {
+	font-size: 26px;
+	line-height: 1.3846153846;
+}
+
+h4 {
+	font-size: 22px;
+	line-height: 1.0909090909;
+}
+
+h5 {
+	font-size: 18px;
+	line-height: 1.3333333333;
+}
+
+h6 {
+	font-size: 16px;
+	line-height: 1.5;
+}
+
+hr {
+	background-color: rgba(0, 0, 0, 0.1);
+	border: 0;
+	height: 1px;
+	margin-bottom: 23px;
+}
+
+
+/**
+ * 3.0 Text Elements
+ * ----------------------------------------------------------------------------
+ */
+
+p {
+	margin: 0 0 24px;
+}
+
+ol,
+ul {
+	margin: 0 0 24px 22px;
+	padding-left: 0;
+}
+
+ul {
+	list-style-type: disc;
+}
+
+ol {
+	list-style: decimal;
+}
+
+li > ul,
+li > ol {
+	margin-bottom: 0;
+	margin-left: 20px;
+}
+
+dl {
+	margin: 0 20px;
+}
+
+dt {
+	font-weight: bold;
+}
+
+dd {
+	margin: 0 0 24px;
+}
+
+strong {
+	font-weight: bold;
+}
+
+code,
+kbd,
+tt,
+var,
+samp {
+	font: 15px/1.6 Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace;
+}
+
+pre {
+	background: #eee;
+	font-family: 'Courier 10 Pitch', Courier, monospace;
+	font-size: 15px;
+	line-height: 1.6;
+	margin-bottom: 24px;
+	padding: 12px;
+	overflow: auto;
+	max-width: 100%;
+}
+
+blockquote,
+q {
+	quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+	content: "";
+	content: none;
+}
+
+blockquote {
+	font-style: italic;
+	font-weight: 300;
+	margin: 0 0 24px;
+}
+
+blockquote em, blockquote i, blockquote cite {
+	font-style: normal;
+}
+
+blockquote p {
+	color: #767676;
+	font-size: 19px;
+	line-height: 1.2631578947;
+}
+
+blockquote cite,
+blockquote small {
+	color: #2b2b2b;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+}
+
+blockquote.pull p {
+	margin-bottom: 17px;
+}
+
+blockquote.pull.alignleft,
+blockquote.pull.alignright {
+	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	padding-top: 17px;
+	width: 50%;
+}
+
+blockquote.pull.alignleft {
+	margin: 7px 24px 7px 0;
+}
+
+blockquote.pull.alignright {
+	margin: 7px 0 7px 24px;
+}
+
+blockquote blockquote {
+	margin-right: 0;
+}
+
+cite {
+	border-bottom: 0;
+}
+
+abbr[title] {
+	border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
+}
+
+address {
+	font-style: normal;
+	margin: 0 0 24px;
+}
+
+del {
+	color: #333;
+}
+
+ins {
+	background: #fff9c0;
+	border: none;
+	color: #333;
+	text-decoration: none;
+}
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	bottom: 1ex;
+}
+
+sub {
+	top: .5ex;
+}
+
+
+/**
+ * 4.0 Links
+ * ----------------------------------------------------------------------------
+ */
+
+a {
+	color: #24890d;
+	text-decoration: none;
+}
+
+a:visited {
+	color: #24890d;
+}
+
+a:focus {
+	outline: thin dotted;
+}
+
+a:active,
+a:hover {
+	color: #5ff23d;
+	outline: 0;
+}
+
+/**
+ * 5.0 Alignment
+ * ----------------------------------------------------------------------------
+ */
+
+.alignleft {
+	float: left;
+	margin-right: 24px;
+}
+
+.alignright {
+	float: right;
+	margin-left: 24px;
+}
+
+.aligncenter {
+	clear: both;
+	display: block;
+	margin: 0 auto;
+}
+
+img.alignnone {
+	margin: 5px 0;
+}
+
+
+/**
+ * 6.0 Tables
+ * ----------------------------------------------------------------------------
+ */
+
+table {
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-collapse: collapse;
+	border-spacing: 0;
+	font-size: 14px;
+	line-height: 1.2857142857;
+	margin-bottom: 24px;
+	width: 100%;
+}
+
+caption,
+th {
+	border-right: 1px solid rgba(0, 0, 0, 0.1);
+	font-weight: 700;
+	padding: 8px;
+	text-transform: uppercase;
+}
+
+td {
+	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-right: 1px solid rgba(0, 0, 0, 0.1);
+	padding: 8px;
+}
+
+/**
+ * 7.0 Images
+ * ----------------------------------------------------------------------------
+ */
+
+img {
+	height: auto;
+	max-width: 474px;
+	vertical-align: middle;
+}
+
+.wp-caption {
+	background: transparent;
+	border: none;
+	margin: 0 0 24px 0;
+	padding: 0;
+	text-align: left;
+}
+
+.wp-caption.alignleft {
+	margin: 7px 24px 7px 0;
+}
+
+.wp-caption.alignright {
+	margin: 7px 0 7px 24px;
+}
+
+.wp-caption.aligncenter {
+	margin: 7px 0;
+}
+
+.wp-caption-dt {
+	margin: 0;
+}
+
+.wp-caption .wp-caption-text,
+.wp-caption-dd {
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	font-size: 12px;
+	font-style: italic;
+	line-height: 1.6666666666;
+	margin: 4px 0;
+	padding: 0 10px 0 0; /* Avoid the caption to overflow the width of the image because wp-caption has 10px wider width */
+	text-align: left;
+}
+
+.mceTemp + ul,
+.mceTemp + ol  {
+	list-style-position: inside;
+}
+
+/**
+ * 8.0 RTL
+ * ----------------------------------------------------------------------------
+ */
+
+html .mceContentBody.rtl {
+	direction: rtl;
+	unicode-bidi: embed;
+}
+
+.rtl ol,
+.rtl ul {
+	margin-left: 0;
+	margin-right: 24px;
+}
+
+.rtl blockquote.pull.alignleft {
+	margin-left: 24px;
+	margin-right: 0;
+}
+
+.rtl blockquote.pull.alignright {
+	margin-left: 0;
+	margin-right: 24px;
+}
+
+.rtl .wp-caption,
+.rtl tr th {
+	text-align: right;
+}
+
+.rtl td {
+	text-align: right;
+}

wp-content/themes/twentyfourteen/functions.php

@@ -50,6 +50,11 @@ function twentyfourteen_setup() {
 	 */
 	load_theme_textdomain( 'twentyfourteen', get_template_directory() . '/languages' );
 
+	/*
+	* This theme styles the visual editor to resemble the theme style.
+	*/
+	add_editor_style( array( 'editor-style.css', twentyfourteen_font_url() ) );
+
 	// Adds RSS feed links to <head> for posts and comments.
 	add_theme_support( 'automatic-feed-links' );
 
@@ -174,17 +179,21 @@ function twentyfourteen_widgets_init() {
 add_action( 'widgets_init', 'twentyfourteen_widgets_init' );
 
 /**
- * Register Google fonts for Twenty Fourteen.
+ * Register Lato Google font for Twenty Fourteen.
  *
  * @return void
  */
-function twentyfourteen_fonts() {
+function twentyfourteen_font_url() {
-	/* translators: If there are characters in your language that are not supported
+	$font_url = '';
-	   by Lato, translate this to 'off'. Do not translate into your own language. */
+	/*
+	 * Translators: If there are characters in your language that are not supported
+	 * by Lato, translate this to 'off'. Do not translate into your own language.
+	 */
 	if ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentyfourteen' ) )
-		wp_register_style( 'twentyfourteen-lato', '//fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic', array(), null );
+		$font_url = add_query_arg( 'family', urlencode( 'Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' ), "//fonts.googleapis.com/css" );
+
+	return $font_url;
 }
-add_action( 'init', 'twentyfourteen_fonts' );
 
 /**
  * Enqueues scripts and styles for front end.
@@ -212,6 +221,9 @@ function twentyfourteen_scripts() {
 		wp_enqueue_script( 'jquery-masonry' );
 
 	wp_enqueue_script( 'twentyfourteen-theme', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130820', true );
+
+	// Add Lato font used in the main stylesheet.
+	wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );
 }
 add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );