Merge pull request #292 from material-components/feature/233-site-logo

Site Logo

theme/assets/css/src/base/wordpress.css

@@ -58,3 +58,11 @@ ul ul {
 ul ul ul {
 	list-style: square;
 }
+
+/**
+ * Prevent white space at the top of screen
+ */
+.wp-site-blocks {
+	display: flex;
+	flex-direction: column;
+}

theme/assets/css/src/components/logo.css

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-.logo {
+.logo,
+.wp-block-site-logo {
 	align-items: center;
 	display: flex;
 	padding: 0.75rem;

theme/assets/css/src/components/top-app-bar.css

@@ -50,7 +50,8 @@
 		max-width: var(--mdc-theme-header-width, 76.5625rem);
 	}
 
-	& .logo {
+	& .logo,
+	& .wp-block-site-logo {
 		padding: 0;
 	}
 

theme/assets/src/block-editor/hooks.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const withTitleClassNames = createHigherOrderComponent( BlockListBlock => {
+	return props => {
+		if ( 'core/site-title' === props.name ) {
+			return (
+				<BlockListBlock
+					{ ...props }
+					className={ classnames(
+						'site-title mdc-typography mdc-typography--headline6',
+						props.className
+					) }
+				/>
+			);
+		}
+
+		return <BlockListBlock { ...props } />;
+	};
+}, 'withTitleClassNames' );
+
+addFilter(
+	'editor.BlockListBlock',
+	'material/title-class-name',
+	withTitleClassNames
+);

theme/assets/src/block-editor/index.js

@@ -17,6 +17,7 @@
 import './plugins/hide-sections';
 import './plugins/style/core-template';
 import { registerBlocks } from './util';
+import './hooks';
 
 /**
  * Register the blocks.

theme/inc/blocks/class-blocks.php

@@ -45,6 +45,7 @@ class Blocks {
 	 */
 	public function init() {
 		$this->action_register_blocks();
+		$this->add_filter_render_block();
 	}
 
 	/**
@@ -155,4 +156,28 @@ public static function render( $attributes, $content, $block ) {
 
 		return ob_get_clean();
 	}
+
+	/**
+	 * Add filter to modify core dynamic blocks markup.
+	 */
+	public function add_filter_render_block() {
+		add_filter( 'render_block', [ $this, 'filter_render_block' ], 10, 2 );
+	}
+
+	/**
+	 * Filter render_block to add specific classes to site title.
+	 *
+	 * @param string $block_content Block content.
+	 * @param array  $block         Block object.
+	 *
+	 * @return string
+	 */
+	public function filter_render_block( $block_content, $block ) {
+		if ( 'core/site-title' === $block['blockName'] ) {
+			// Add additional classes to markup.
+			$block_content = str_replace( '<h1 class="', '<h1 class="site-title mdc-typography mdc-typography--headline6 ', $block_content );
+		}
+
+		return $block_content;
+	}
 }