瀏覽代碼

Simplify block styles

Ben Dwyer 4 年之前
父節點
當前提交
14736ec978
共有 2 個文件被更改,包括 188 次插入223 次删除
  1. 30 96
      altofocus/assets/stylesheets/editor-blocks.css
  2. 158 127
      altofocus/functions.php

+ 30 - 96
altofocus/assets/stylesheets/editor-blocks.css

@@ -10,9 +10,8 @@ Description: Used to style Gutenberg Blocks in the editor.
 2.0 General Block Styles
 3.0 Blocks - Common Blocks
 4.0 Blocks - Formatting
-5.0 Blocks - Layout Elements
-6.0 Blocks - Widgets
-7.0 Blocks - Animations
+5.0 Blocks - Widgets
+6.0 Blocks - Layout Elements
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
@@ -446,7 +445,34 @@ li > ol,
 }
 
 /*--------------------------------------------------------------
-5.0 Blocks - Layout Elements
+5.0 Blocks - Widgets
+--------------------------------------------------------------*/
+
+.wp-block-archives ul,
+.wp-block-categories ul,
+.wp-block-categories ul ul,
+.wp-block-latest-posts ul {
+	list-style: disc;
+}
+
+[data-align="center"] .wp-block-categories__list,
+[data-align="center"] .wp-block-archives,
+[data-align="center"] .wp-block-lastest-posts {
+	list-style-position: inside;
+}
+
+.wp-block-archives li,
+.wp-block-categories li,
+.wp-block-latest-posts li {
+	margin-bottom: 0;
+}
+
+.wp-block-latest-posts.is-grid {
+	list-style: none;
+}
+
+/*--------------------------------------------------------------
+6.0 Blocks - Layout Elements
 --------------------------------------------------------------*/
 
 /* Button */
@@ -488,95 +514,3 @@ li > ol,
 	border: 0;
 	height: 1px;
 }
-
-/*--------------------------------------------------------------
-6.0 Blocks - Widgets
---------------------------------------------------------------*/
-
-.editor-styles-wrapper .wp-block-archives ul,
-.editor-styles-wrapper .wp-block-categories ul,
-.editor-styles-wrapper .wp-block-categories ul ul,
-.editor-styles-wrapper .wp-block-latest-posts ul {
-	list-style: disc;
-}
-
-[data-align="center"] .wp-block-categories__list,
-[data-align="center"] .wp-block-archives,
-[data-align="center"] .wp-block-lastest-posts {
-	list-style-position: inside;
-}
-
-.editor-styles-wrapper .wp-block-archives li,
-.editor-styles-wrapper .wp-block-categories li,
-.editor-styles-wrapper .wp-block-latest-posts li {
-	margin-bottom: 0;
-}
-
-.editor-styles-wrapper .wp-block-latest-posts.is-grid {
-	list-style: none;
-}
-
-/*--------------------------------------------------------------
-7.0 Blocks - Animations
---------------------------------------------------------------*/
-
-@-webkit-keyframes bounce-reveal {
-	0%,
-	100% {
-		-webkit-transform: scale(1);
-		transform: scale(1);
-	}
-	33% {
-		-webkit-transform: scale(1.1);
-		transform: scale(1.1);
-	}
-	66% {
-		-webkit-transform: scale(0.9);
-		transform: scale(0.9);
-	}
-}
-
-@-moz-keyframes bounce-reveal {
-	0%,
-	100% {
-		-moz-transform: scale(1);
-		transform: scale(1);
-	}
-	33% {
-		-moz-transform: scale(1.1);
-		transform: scale(1.1);
-	}
-	66% {
-		-moz-transform: scale(0.9);
-		transform: scale(0.9);
-	}
-}
-
-@-o-keyframes bounce-reveal {
-	0%,
-	100% {
-		-o-transform: scale(1);
-		transform: scale(1);
-	}
-	33% {
-		-o-transform: scale(1.1);
-		transform: scale(1.1);
-	}
-	66% {
-		-o-transform: scale(0.9);
-		transform: scale(0.9);
-	}
-}
-
-@keyframes bounce-reveal {
-	0%,
-	100% {
-		transform: scale(1);
-	}
-	33% {
-		transform: scale(1.1);
-	}
-	66% {
-		transform: scale(0.9);
-	}
-}

+ 158 - 127
altofocus/functions.php

@@ -8,122 +8,143 @@
  */
 
 if ( ! function_exists( 'altofocus_setup' ) ) :
-/**
- * Sets up theme defaults and registers support for various WordPress features.
- *
- * Note that this function is hooked into the aftercomponentsetup_theme hook, which
- * runs before the init hook. The init hook is too late for some features, such
- * as indicating support for post thumbnails.
- */
-function altofocus_setup() {
-
-	/*
-	 * Make theme available for translation.
-	 * Translations can be filed in the /languages/ directory.
-	 * If you're building a theme based on components, use a find and replace
-	 * to change 'altofocus' to the name of your theme in all the template files.
+	/**
+	 * Sets up theme defaults and registers support for various WordPress features.
+	 *
+	 * Note that this function is hooked into the aftercomponentsetup_theme hook, which
+	 * runs before the init hook. The init hook is too late for some features, such
+	 * as indicating support for post thumbnails.
 	 */
-	load_theme_textdomain( 'altofocus', get_template_directory() . '/languages' );
+	function altofocus_setup() {
 
-	// Add default posts and comments RSS feed links to head.
-	add_theme_support( 'automatic-feed-links' );
+		/*
+		 * Make theme available for translation.
+		 * Translations can be filed in the /languages/ directory.
+		 * If you're building a theme based on components, use a find and replace
+		 * to change 'altofocus' to the name of your theme in all the template files.
+		 */
+		load_theme_textdomain( 'altofocus', get_template_directory() . '/languages' );
 
-	/*
-	 * Let WordPress manage the document title.
-	 * By adding theme support, we declare that this theme does not use a
-	 * hard-coded <title> tag in the document head, and expect WordPress to
-	 * provide it for us.
-	 */
-	add_theme_support( 'title-tag' );
+		// Add default posts and comments RSS feed links to head.
+		add_theme_support( 'automatic-feed-links' );
 
-	/*
-	 * Enable support for Post Thumbnails on posts and pages.
-	 *
-	 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
-	 */
-	add_theme_support( 'post-thumbnails' );
+		/*
+		 * Let WordPress manage the document title.
+		 * By adding theme support, we declare that this theme does not use a
+		 * hard-coded <title> tag in the document head, and expect WordPress to
+		 * provide it for us.
+		 */
+		add_theme_support( 'title-tag' );
 
-	add_image_size( 'altofocus-thumb-image', 640, 9999, false );
-	add_image_size( 'altofocus-post-featured-image', 1200, 800, false );
+		/*
+		 * Enable support for Post Thumbnails on posts and pages.
+		 *
+		 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
+		 */
+		add_theme_support( 'post-thumbnails' );
 
-	// This theme uses wp_nav_menu() in one location.
-	register_nav_menus( array(
-		'menu-1' => esc_html__( 'Top', 'altofocus' ),
-	) );
+		add_image_size( 'altofocus-thumb-image', 640, 9999, false );
+		add_image_size( 'altofocus-post-featured-image', 1200, 800, false );
 
-	/**
-	 * Add support for core custom logo.
-	 */
-	add_theme_support( 'custom-logo', array(
-		'height'      => 200,
-		'width'       => 200,
-		'flex-width'  => true,
-		'flex-height' => true,
-	) );
+		// This theme uses wp_nav_menu() in one location.
+		register_nav_menus(
+			array(
+				'menu-1' => esc_html__( 'Top', 'altofocus' ),
+			)
+		);
 
-	/*
-	 * Switch 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',
-		'gallery',
-		'caption',
-	) );
-
-	// Set up the WordPress core custom background feature.
-	add_theme_support( 'custom-background', apply_filters( 'altofocus_custom_background_args', array(
-		'default-color'      => 'ffffff',
-		'default-image'      => '',
-		'default-position-x' => 'center',
-		'default-position-y' => 'center',
-		'default-repeat'     => 'no-repeat',
-		'default-attachment' => 'fixed',
-		'default-size'       => 'cover',
-		'wp-head-callback'   => 'altofocus_custom_background_cb'
-	) ) );
-
-	// Add support for responsive embeds.
-	add_theme_support( 'responsive-embeds' );
-
-	// Add support for custom color scheme.
-	add_theme_support( 'editor-color-palette', array(
-		array(
-			'name'  => esc_html__( 'Orange', 'altofocus' ),
-			'slug'  => 'orange',
-			'color' => '#e38900',
-		),
-		array(
-			'name'  => esc_html__( 'Dark Gray', 'altofocus' ),
-			'slug'  => 'dark-gray',
-			'color' => '#111',
-		),
-		array(
-			'name'  => esc_html__( 'Medium Gray', 'altofocus' ),
-			'slug'  => 'medium-gray',
-			'color' => '#888',
-		),
-		array(
-			'name'  => esc_html__( 'Light Gray', 'altofocus' ),
-			'slug'  => 'light-gray',
-			'color' => '#ccc',
-		),
-		array(
-			'name'  => esc_html__( 'White', 'altofocus' ),
-			'slug'  => 'white',
-			'color' => '#fff',
-		),
-	) );
-
-	add_theme_support( 'editor-styles' );
-	add_editor_style( array(
-		get_template_directory_uri() . '/assets/stylesheets/editor-blocks.css',
-		altofocus_libre_baskerville_url(),
-		altofocus_karla_url(),
-	) );
-}
+		/**
+		 * Add support for core custom logo.
+		 */
+		add_theme_support(
+			'custom-logo',
+			array(
+				'height'      => 200,
+				'width'       => 200,
+				'flex-width'  => true,
+				'flex-height' => true,
+			)
+		);
+
+		/*
+		 * Switch 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',
+				'gallery',
+				'caption',
+			)
+		);
+
+		// Set up the WordPress core custom background feature.
+		add_theme_support(
+			'custom-background',
+			apply_filters(
+				'altofocus_custom_background_args',
+				array(
+					'default-color'      => 'ffffff',
+					'default-image'      => '',
+					'default-position-x' => 'center',
+					'default-position-y' => 'center',
+					'default-repeat'     => 'no-repeat',
+					'default-attachment' => 'fixed',
+					'default-size'       => 'cover',
+					'wp-head-callback'   => 'altofocus_custom_background_cb',
+				)
+			)
+		);
+
+		// Add support for responsive embeds.
+		add_theme_support( 'responsive-embeds' );
+
+		// Add support for custom color scheme.
+		add_theme_support(
+			'editor-color-palette',
+			array(
+				array(
+					'name'  => esc_html__( 'Orange', 'altofocus' ),
+					'slug'  => 'orange',
+					'color' => '#e38900',
+				),
+				array(
+					'name'  => esc_html__( 'Dark Gray', 'altofocus' ),
+					'slug'  => 'dark-gray',
+					'color' => '#111',
+				),
+				array(
+					'name'  => esc_html__( 'Medium Gray', 'altofocus' ),
+					'slug'  => 'medium-gray',
+					'color' => '#888',
+				),
+				array(
+					'name'  => esc_html__( 'Light Gray', 'altofocus' ),
+					'slug'  => 'light-gray',
+					'color' => '#ccc',
+				),
+				array(
+					'name'  => esc_html__( 'White', 'altofocus' ),
+					'slug'  => 'white',
+					'color' => '#fff',
+				),
+			)
+		);
+
+		add_theme_support( 'editor-styles' );
+		add_editor_style(
+			array(
+				'style.css',
+				'/assets/stylesheets/blocks.css',
+				'/assets/stylesheets/editor-blocks.css',
+				altofocus_libre_baskerville_url(),
+				altofocus_karla_url(),
+			)
+		);
+	}
 endif;
 add_action( 'after_setup_theme', 'altofocus_setup' );
 
@@ -136,7 +157,7 @@ add_action( 'after_setup_theme', 'altofocus_setup' );
  */
 function altofocus_content_width() {
 
-	$GLOBALS[ 'content_width' ] = apply_filters( 'altofocus_content_width', '770' );
+	$GLOBALS['content_width'] = apply_filters( 'altofocus_content_width', '770' );
 }
 add_action( 'after_setup_theme', 'altofocus_content_width', 0 );
 
@@ -147,15 +168,17 @@ add_action( 'after_setup_theme', 'altofocus_content_width', 0 );
  */
 function altofocus_widgets_init() {
 
-	register_sidebar( array(
-		'name'          => esc_html__( 'Footer', 'altofocus' ),
-		'id'            => 'sidebar-1',
-		'description'   => '',
-		'before_widget' => '<section id="%1$s" class="widget %2$s">',
-		'after_widget'  => '</section>',
-		'before_title'  => '<h2 class="widget-title">',
-		'after_title'   => '</h2>',
-	) );
+	register_sidebar(
+		array(
+			'name'          => esc_html__( 'Footer', 'altofocus' ),
+			'id'            => 'sidebar-1',
+			'description'   => '',
+			'before_widget' => '<section id="%1$s" class="widget %2$s">',
+			'after_widget'  => '</section>',
+			'before_title'  => '<h2 class="widget-title">',
+			'after_title'   => '</h2>',
+		)
+	);
 }
 add_action( 'widgets_init', 'altofocus_widgets_init' );
 
@@ -298,16 +321,24 @@ function altofocus_scripts() {
 	}
 
 	// Screenreader text
-	wp_localize_script( 'altofocus-navigation', 'altoFocusScreenReaderText', array(
-		'expand'   => esc_html__( 'expand child menu', 'altofocus' ),
-		'collapse' => esc_html__( 'collapse child menu', 'altofocus' ),
-	) );
+	wp_localize_script(
+		'altofocus-navigation',
+		'altoFocusScreenReaderText',
+		array(
+			'expand'   => esc_html__( 'expand child menu', 'altofocus' ),
+			'collapse' => esc_html__( 'collapse child menu', 'altofocus' ),
+		)
+	);
 
 	// Flexslider text
-	wp_localize_script( 'altofocus-flexslider', 'altoFocusFlexSliderText', array(
-		'next'     => esc_html__( 'Next', 'altofocus' ),
-		'previous' => esc_html__( 'Previous', 'altofocus' ),
-	) );
+	wp_localize_script(
+		'altofocus-flexslider',
+		'altoFocusFlexSliderText',
+		array(
+			'next'     => esc_html__( 'Next', 'altofocus' ),
+			'previous' => esc_html__( 'Previous', 'altofocus' ),
+		)
+	);
 }
 add_action( 'wp_enqueue_scripts', 'altofocus_scripts' );
 
@@ -315,7 +346,7 @@ add_action( 'wp_enqueue_scripts', 'altofocus_scripts' );
  * Check whether the browser supports JavaScript
  */
 function altofocus_html_js_class() {
-	echo '<script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script>'. "\n";
+	echo '<script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script>' . "\n";
 }
 add_action( 'wp_head', 'altofocus_html_js_class', 1 );