Merge branch 'full-site-editing' into fse/page

.eslintrc.json

@@ -46,5 +46,10 @@
   },
   "parserOptions": {
     "requireConfigFile": false
+  },
+  "settings": {
+    "jsdoc": {
+      "mode": "typescript"
+    }
   }
 }

Gruntfile.js

@@ -86,6 +86,7 @@ module.exports = function ( grunt ) {
 					'!theme/assets/js/*.map',
 					'!theme/assets/js/editor*',
 					'!theme/assets/src/**',
+					'theme/assets/src/**/*.json',
 					'!theme/tests/**',
 					'!theme/wp-assets/**',
 					'!theme/composer*',

theme/assets/css/src/base/fse-layout.css

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 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.
+ */
+
+header.wp-block-template-part + * {
+	margin-top: 12rem;
+}

theme/assets/css/src/base/index.css

@@ -18,3 +18,4 @@
 @import "./masonry-grid.css";
 @import "./typography.css";
 @import "./wordpress.css";
+@import "./fse-layout.css";

theme/assets/css/src/editor.css

@@ -20,6 +20,9 @@
 /* Following imports are used for card block. */
 @import "./components/post-card.css";
 @import "./components/avatar.css";
+
+/* import site logo in editor to fix editor style. */
+@import "./components/logo.css";
 @import "@material/button/dist/mdc.button.css";
 @mixin selector-typography .wp-block div, body1;
 @mixin selector-typography p, body1;

theme/assets/css/src/front-end.css

@@ -28,3 +28,4 @@
 
 /* Block editor */
 @import "./../../src/block-editor/plugins/hide-sections/style.css";
+@import "./../../src/block-editor/style/horizontal-line/style.css";

theme/assets/src/block-editor/blocks/back-to-top/block.json

@@ -11,7 +11,7 @@
   },
   "description": "Material back to top button",
   "editorStyle": [
-    "material-google-fonts-cdn",
+    "material-google-fonts",
     "material-block-editor-css-theme"
   ],
   "editorScript": "material-block-editor-js-theme"

theme/assets/src/block-editor/blocks/card/block.json

@@ -19,6 +19,14 @@
       "type": "boolean",
       "default": true
     },
+    "showFeaturedImage": {
+      "type": "boolean",
+      "default": true
+    },
+    "showTitle": {
+      "type": "boolean",
+      "default": true
+    },
     "isEditMode": {
       "type": "boolean",
       "default": false
@@ -28,7 +36,7 @@
   "supports": {},
   "apiVersion": 2,
   "description": "Material card for query loop block",
-  "editorStyle": ["material-google-fonts-cdn", "material-block-editor-css-theme"],
+  "editorStyle": ["material-google-fonts", "material-block-editor-css-theme"],
   "editorScript": "material-block-editor-js-theme",
   "usesContext": [ "postId", "postType", "queryId" ],
   "textdomain": "material-design-google"

theme/assets/src/block-editor/blocks/card/inspectControl.js

@@ -34,14 +34,23 @@ import { __ } from '@wordpress/i18n';
  * @param {Object}   props
  * @param {Function} props.setAttributes
  * @param {Object}   props.attributes
+ * @param {boolean}  props.attributes.showFeaturedImage
+ * @param {boolean}  props.attributes.showTitle
  * @param {boolean}  props.attributes.showExcerpt
  * @param {boolean}  props.attributes.showDate
  * @param {boolean}  props.attributes.showAuthor
  * @param {boolean}  props.attributes.showComments
  */
 const InspectControls = ( {
 	setAttributes,
-	attributes: { showExcerpt, showDate, showAuthor, showComments },
+	attributes: {
+		showFeaturedImage,
+		showTitle,
+		showExcerpt,
+		showDate,
+		showAuthor,
+		showComments,
+	},
 } ) => {
 	const setter = genericAttributesSetter( setAttributes );
 	return (
@@ -53,6 +62,16 @@ const InspectControls = ( {
 				) }
 				initialOpen={ true }
 			>
+				<ToggleControl
+					label={ __( 'Featured Image', 'material-design' ) }
+					checked={ showFeaturedImage }
+					onChange={ setter( 'showFeaturedImage' ) }
+				/>
+				<ToggleControl
+					label={ __( 'Post title', 'material-design' ) }
+					checked={ showTitle }
+					onChange={ setter( 'showTitle' ) }
+				/>
 				<ToggleControl
 					label={ __( 'Post date', 'material-design' ) }
 					checked={ showDate }

theme/assets/src/block-editor/blocks/dark-mode-switch/block.json

@@ -8,7 +8,7 @@
   "title": "Dark Mode Switch",
   "description": "Material dark mode switch",
   "editorStyle": [
-    "material-google-fonts-cdn",
+    "material-google-fonts",
     "material-block-editor-css-theme"
   ],
   "editorScript": "material-block-editor-js-theme"

theme/assets/src/block-editor/blocks/search-header-title/block.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "material/search-title",
+  "textdomain": "material-design-google",
+  "category": "material",
+  "attributes": {
+    "textAlign": {
+      "type": "string"
+    },
+    "level": {
+      "type": "number",
+      "default": 2
+    },
+    "title": {
+      "type": "string",
+      "default": "Search Results for:"
+    }
+  },
+  "title": "Material Search Title",
+  "supports": {},
+  "description": "Material search title",
+  "editorStyle": [
+    "material-google-fonts",
+    "material-block-editor-css-theme"
+  ],
+  "editorScript": "material-block-editor-js-theme"
+}

theme/assets/src/block-editor/blocks/search-header-title/edit.js

@@ -0,0 +1,95 @@
+/**
+ * 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.
+ */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import HeadingLevelDropdown from './heading-level-dropdown';
+import { PanelBody, TextControl } from '@wordpress/components';
+
+/**
+ * Edit.
+ *
+ * @param {Object}   props
+ * @param {Object}   props.attributes
+ * @param {string}   props.attributes.textAlign
+ * @param {string}   props.attributes.title
+ * @param {number}   props.attributes.level
+ * @param {Function} props.setAttributes
+ * @return {JSX.Element} Block edit.
+ */
+const Edit = ( { attributes: { textAlign, level, title }, setAttributes } ) => {
+	const TagName = 0 === level ? 'p' : 'h' + level;
+	const blockProps = useBlockProps( {
+		className: classnames(
+			{
+				[ `has-text-align-${ textAlign }` ]: textAlign,
+			},
+			'page-title',
+			'mdc-typography',
+			`mdc-typography--headline-${ level }`
+		),
+	} );
+	return (
+		<>
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					selectedLevel={ level }
+					onChange={ newLevel =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ nextAlign => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<TextControl
+						label={ __( 'Search title', 'material-design-google' ) }
+						value={ title }
+						onChange={ newTitle =>
+							setAttributes( { title: newTitle } )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<TagName { ...blockProps }>
+				{ title }
+				<span>
+					{ __( ' search keyword', 'material-design-google' ) }
+				</span>
+			</TagName>
+		</>
+	);
+};
+
+export default Edit;

theme/assets/src/block-editor/blocks/search-header-title/heading-level-dropdown.js

@@ -0,0 +1,72 @@
+/**
+ * Source: https://github.com/WordPress/gutenberg/blob/5062a1ebac941d3feabb66da34c9205c8247d6b0/packages/block-library/src/heading/heading-level-dropdown.js
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { ToolbarDropdownMenu } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelIcon from './heading-level-icon';
+
+const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
+
+const POPOVER_PROPS = {
+	className: 'block-library-heading-level-dropdown',
+};
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * HeadingLevelDropdown props.
+ *
+ * @typedef WPHeadingLevelDropdownProps
+ *
+ * @property {number}                 selectedLevel The chosen heading level.
+ * @property {(newValue:number)=>any} onChange      Callback to run when
+ *                                                  toolbar value is changed.
+ */
+
+/**
+ * Dropdown for selecting a heading level (1 through 6).
+ *
+ * @param {WPHeadingLevelDropdownProps} props Component props.
+ *
+ * @return {WPComponent} The toolbar.
+ */
+export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
+	return (
+		<ToolbarDropdownMenu
+			popoverProps={ POPOVER_PROPS }
+			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
+			label={ __( 'Change heading level' ) }
+			controls={ HEADING_LEVELS.map( targetLevel => {
+				{
+					const isActive = targetLevel === selectedLevel;
+
+					return {
+						icon: (
+							<HeadingLevelIcon
+								level={ targetLevel }
+								isPressed={ isActive }
+							/>
+						),
+						label: sprintf(
+							// translators: %s: heading level e.g: "1", "2", "3"
+							__( 'Heading %d' ),
+							targetLevel
+						),
+						isActive,
+						onClick() {
+							onChange( targetLevel );
+						},
+					};
+				}
+			} ) }
+		/>
+	);
+}

theme/assets/src/block-editor/blocks/search-header-title/heading-level-icon.js

@@ -0,0 +1,55 @@
+/**
+ * Source: https://github.com/WordPress/gutenberg/blob/5062a1ebac941d3feabb66da34c9205c8247d6b0/packages/block-library/src/heading/heading-level-icon.js
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+// eslint-disable-next-line jsdoc/valid-types,jsdoc/valid-types
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * HeadingLevelIcon props.
+ *
+ * @typedef WPHeadingLevelIconProps
+ *
+ * @property {number}   level     The heading level to show an icon for.
+ * @property {?boolean} isPressed Whether or not the icon should appear pressed; default: false.
+ */
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * Heading level icon.
+ *
+ * @param {WPHeadingLevelIconProps} props Component props.
+ *
+ * @return {?WPComponent} The icon.
+ */
+export default function HeadingLevelIcon( { level, isPressed = false } ) {
+	const levelToPath = {
+		1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
+		2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
+		3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
+		4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
+		5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
+		6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
+	};
+	if ( ! levelToPath.hasOwnProperty( level ) ) {
+		return null;
+	}
+
+	return (
+		<SVG
+			width="24"
+			height="24"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			isPressed={ isPressed }
+		>
+			<Path d={ levelToPath[ level ] } />
+		</SVG>
+	);
+}