Merge 23fd1dd into 367caaf

plugin/assets/css/src/block-editor.css

@@ -21,6 +21,7 @@
 @import "./base/variables.css";
 @import "./conf/index.css";
 @import "./components/masonry-grid.css";
+@import "./components/card.css";
 @import "./overrides.css";
 @import "./material-components.css";
 

plugin/assets/css/src/block/style/masonry.css

@@ -0,0 +1,60 @@
+/**
+ * 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.
+ */
+
+
+/*
+ * Masonry Grid for query loop with card.
+ */
+.is-style-material-masonry.wp-block-post-template.is-flex-container {
+	grid-gap: var(--mdc-layout-grid-margin-desktop, 24px);
+	grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
+	grid-auto-rows: var(--mdc-layout-grid-margin-desktop, 24px);
+	margin: var(--mdc-layout-grid-margin-desktop, 24px) 0;
+	padding: var(--mdc-layout-grid-margin-desktop, 24px);
+
+	@media (--medium-viewport) {
+		display: grid;
+	}
+
+	@nest .material-archive__wide & {
+		grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+	}
+
+	&.columns-3 {
+		grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+	}
+
+	&.columns-4 {
+		grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
+	}
+
+	&.columns-5 {
+		grid-template-columns: repeat(auto-fill, minmax(16%, 1fr));
+	}
+
+	&.columns-6 {
+		grid-template-columns: repeat(auto-fill, minmax(14%, 1fr));
+	}
+}
+
+.is-style-material-masonry.wp-block-post-template.is-flex-container > li,
+.is-style-material-masonry.wp-block-query-loop.is-flex-container > li {
+	width: 100% !important;
+}
+
+.entry-content h2.post-card__title {
+	margin: revert;
+}

plugin/assets/css/src/components/card.css

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+.post-card {
+
+	&.sticky .post-card__title {
+		align-items: center;
+		display: flex;
+	}
+
+	&.sticky .post-card__title .material-icons {
+		margin-right: 5px;
+	}
+
+	& .post-card__title a {
+		text-decoration: none;
+	}
+
+	& a:focus {
+		outline: 1px dotted;
+	}
+
+	.mdc-card__action--button {
+		text-transform: none;
+	}
+
+	.mdc-card__action-buttons .mdc-button__icon {
+		color: var(--mdc-theme-primary, #6200ee);
+	}
+
+	.post-card__primary,
+	.post-card__secondary {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	.post-card__subtitle {
+		color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54);
+	}
+
+	.mdc-card__media {
+
+		& img {
+			bottom: 0;
+			height: 100%;
+			object-fit: cover;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+	}
+
+	.avatar {
+		border-radius: 50%;
+		margin-right: 1rem;
+	}
+}

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

@@ -26,3 +26,4 @@
 @import "../../src/block-editor/blocks/common-posts-list/style.css";
 @import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";
 @import "../../src/block-editor/blocks/card/style.css";
+@import "./block/style/masonry.css";

plugin/assets/src/block-editor/blocks/card-image/block.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "name": "material/image-card-query",
+  "category": "material",
+  "title": "Material Image Card for Query loop",
+  "supports": {},
+  "apiVersion": 2,
+  "description": "Material image card for query loop block",
+  "editorStyle": "material-block-editor-css",
+  "editorScript": "material-block-editor-js",
+  "usesContext": [ "postId", "postType", "queryId" ],
+  "textdomain": "material-design-google"
+}

plugin/assets/src/block-editor/blocks/card-image/edit.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed uder 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
+ */
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+
+/**
+ * Internal dependencies
+ */
+import { name } from './block.json';
+
+/**
+ * Edit.
+ *
+ * @param {Object}                                         props
+ * @param {{postType:string,postId:number,queryId:number}} props.context
+ * @param {Object}                                         props.attributes
+ * @return {JSX.Element} Block edit.
+ */
+const Edit = ( { context, attributes } ) => {
+	const urlQueryArgs = {
+		materialParamContext: [],
+	};
+	// Server side rendering doesn't support passing context yet. This hack adds context as url param to later manually parse in php.
+	for ( const key in context ) {
+		urlQueryArgs.materialParamContext[ key ] = context[ key ];
+	}
+
+	const preventAnchorLink = e => {
+		e.preventDefault();
+		return false;
+	};
+
+	return (
+		<>
+			{ /* Prevent anchor click coming from SSR. */ }
+			{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ }
+			<div { ...useBlockProps() } onClick={ preventAnchorLink }>
+				<ServerSideRender
+					block={ name }
+					urlQueryArgs={ urlQueryArgs }
+					attributes={ attributes }
+				/>
+			</div>
+		</>
+	);
+};
+
+export default Edit;

plugin/assets/src/block-editor/blocks/card-image/index.js

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import { icon } from '../card-query/icon';
+import edit from './edit';
+
+const { name, title } = metadata;
+
+const isQueryLoopRequired = true;
+export { metadata, name, isQueryLoopRequired };
+
+export const settings = {
+	title,
+	description: metadata.description,
+	icon,
+	edit,
+};

plugin/assets/src/block-editor/blocks/card-image/style.css

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+.wp-block-material-image-card-query a {
+	display: block;
+}
+
+.wp-block-material-image-card-query {
+	position: relative;
+
+	.mdc-image-list__supporting {
+		position: absolute;
+		background: rgba(0, 0, 0, .6);
+		bottom: 7.5px;
+		color: #fff;
+		height: auto;
+		width: 100%;
+		align-items: start;
+		border-bottom-left-radius: var(--mdc-image-list-radius, 4px);
+		border-bottom-right-radius: var(--mdc-image-list-radius, 4px);
+		max-height: 100%;
+		min-height: 48px;
+		overflow: hidden;
+		padding: 8px 16px;
+	}
+}

plugin/assets/src/block-editor/blocks/card-query/block.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "name": "material/card-query",
+  "category": "material",
+  "attributes": {
+    "showExcerpt": {
+      "type": "boolean",
+      "default": true
+    },
+    "showDate": {
+      "type": "boolean",
+      "default": true
+    },
+    "showAuthor": {
+      "type": "boolean",
+      "default": true
+    },
+    "showComments": {
+      "type": "boolean",
+      "default": true
+    },
+    "showFeaturedImage": {
+      "type": "boolean",
+      "default": true
+    },
+    "showTitle": {
+      "type": "boolean",
+      "default": true
+    },
+    "postContentLength": {
+      "type": "number",
+      "default": 20
+    },
+    "cardStyle": {
+      "enum": [ "global", "elevated", "outlined"],
+      "default": "global",
+      "type": "string"
+    }
+  },
+  "title": "Material Card for Query loop",
+  "supports": {},
+  "apiVersion": 2,
+  "description": "Material card for query loop block",
+  "editorStyle": "material-block-editor-css",
+  "editorScript": "material-block-editor-js",
+  "usesContext": [ "postId", "postType", "queryId" ],
+  "textdomain": "material-design-google"
+}