Merge ff6da1f into be8614a

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

@@ -26,6 +26,7 @@
 @import "./material-components.css";
 @import "./tokens/index.css";
 @import "./components/datatable-editor.css";
+@import "./components/button.css";
 
 @media (min-width: 600px) {
 

plugin/assets/css/src/components/button.css

@@ -0,0 +1,126 @@
+/*
+ *  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.
+ */
+
+.mdc-button {
+	align-items: center;
+	border: 0;
+	display: flex;
+	justify-content: center;
+	letter-spacing: 0.1px;
+	padding: 10px 24px;
+
+	&:focus,
+	&:active {
+		outline: thin dotted;
+	}
+
+	& .mdc-button__icon ~ .mdc-button__label {
+		margin-left: 8px;
+	}
+
+	&.is-large {
+		height: 50px;
+		padding: 16px 32px;
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+}
+
+.mdc-button--raised,
+.mdc-button--elevated {
+	background-color: var(--md-sys-color-surface-variant);
+	border: 0 !important; /* Use !important to override the default style of the button. */
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+	color: var(--md-sys-color-primary);
+
+	&:hover {
+		background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
+	}
+
+	&:focus,
+	&:active {
+		background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
+	}
+
+	&:disabled {
+		background-color: rgba(31, 31, 31, 0.12);
+		color: var(--md-sys-color-on-surface);
+	}
+}
+
+.mdc-button--outlined,
+.mdc-button--outlined:not(:disabled),
+.mdc-button--text,
+.mdc-button--text:not(:disabled) {
+	background: transparent;
+	border: 1px solid var(--md-sys-color-outline) !important; /* Use !important to override the default style of the button. */
+	color: var(--md-sys-color-primary);
+
+	&:hover {
+		background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
+	}
+
+	&:focus,
+	&:active {
+		background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
+	}
+
+	&:disabled {
+		border: 1px solid rgba(31, 31, 31, 0.12);
+		color: var(--md-sys-color-on-surface);
+	}
+}
+
+.mdc-button--text,
+.mdc-button--text:not(:disabled) {
+	border: 0 !important; /* Use !important to override the default style of the button. */
+}
+
+.mdc-button--text:disabled {
+	color: var(--md-sys-color-on-surface);
+}
+
+.mdc-button--filled,
+.mdc-button--unelevated {
+	background-color: var(--md-sys-color-primary);
+	color: var(--md-sys-color-on-primary);
+
+	&:hover {
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+	}
+
+	&:disabled {
+		background-color: rgba(31, 31, 31, 0.12);
+		color: var(--md-sys-color-on-surface);
+	}
+}
+
+.mdc-button--tonal {
+	background-color: var(--md-sys-color-secondary-container);
+	color: var(--md-sys-color-on-secondary-container);
+
+	&:hover {
+		background-color: rgba(var(--md-sys-color-secondary-container-rgb), 0.8);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+	}
+
+	&:disabled {
+		background-color: rgba(31, 31, 31, 0.12);
+		color: var(--md-sys-color-on-surface);
+	}
+}

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

@@ -158,7 +158,7 @@
 .mdc-card__link,
 .single-post-card__title,
 .material-design-card__title {
-	color: var(--md-sys-color-on-surface, #000);
+
 	text-decoration: none;
 }
 

plugin/assets/css/src/material-components.css

@@ -33,3 +33,4 @@
 @import "./components/tab-indicator.css";
 @import "./components/list.css";
 @import "./components/tooltip.css";
+@import "./components/button.css";

plugin/assets/src/block-editor/blocks/button/block.json

@@ -15,8 +15,8 @@
       "default": "text"
     },
     "style": {
-      "type": "string",
-      "default": "raised"
+      "default": "raised",
+      "type": "string"
     },
     "iconPosition": {
       "type": "string",
@@ -76,6 +76,11 @@
     "size": {
       "type": "string",
       "default": "normal"
+    },
+    "elevationStyle": {
+      "default": "elevated",
+      "enum": [ "text", "outlined", "elevated", "filled", "tonal" ],
+      "type": "string"
     }
   }
 }

plugin/assets/src/block-editor/blocks/button/deprecated.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2021 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 { SaveM2 } from './deprecated/m2/m2-version';
+
+const deprecated = [ SaveM2 ];
+
+export default deprecated;