Merge 1386119 into f011b04

material-components · Jun 30, 2022 · 6132ff8 · 6132ff8
2 parents f011b04 + 1386119
commit 6132ff8
Show file tree

Hide file tree

Showing 111 changed files with 9,127 additions and 6,494 deletions.
diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
@@ -0,0 +1,128 @@
+name: Build plugin
+
+on:
+  push:
+    # Don't run for irrelevant changes.
+    paths-ignore:
+      - '__mocks__/**'
+      - '__static__/**'
+      - 'bin/**'
+      - 'packages/e2e-test-utils/**'
+      - 'packages/e2e-tests/**'
+      - 'packages/karma-*/**'
+      - 'plugin/tests/**'
+      - '**.md'
+      - '**.yml'
+      - '**.js.snap'
+      - '**.neon.dist'
+      - '**.xml.dist'
+      - '.editorconfig'
+      - '.eslint*'
+      - '.prettier*'
+      - '.stylelint*'
+      - '.github/workflows/**'
+      - '!.github/workflows/build-and-deploy.yml'
+    branches:
+      - develop
+      - full-site-editing
+
+jobs:
+  build:
+    name: Build and package artifacts
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v2.5.1
+        with:
+          node-version-file: '.nvmrc'
+          cache: npm
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '7.4'
+          coverage: none
+          tools: composer
+
+      - name: Install dependencies
+        run: |
+          npm ci
+        env:
+          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
+
+      - name: Install PHP dependencies
+        uses: 'ramsey/composer-install@v1'
+        with:
+          composer-options: '--prefer-dist --no-progress --no-interaction'
+
+      - name: Build plugin
+        run: |
+          npm run build
+          mkdir -p build/plugin/ build/theme
+
+      - name: Bundle regular version
+        run: |
+          unzip material-design.zip -d "build/plugin/"
+          unzip material-design-google.zip -d "build/theme/"
+
+      - name: Upload regular bundle
+        uses: actions/upload-artifact@v2
+        with:
+          name: material-design
+          path: build/
+
+  deploy-to-staging:
+    name: Deploy to staging environment
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    needs: build
+    if: github.ref == 'refs/heads/develop' && github.event_name == 'push'
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Download full bundle
+        uses: actions/download-artifact@v2
+        with:
+          name: material-design
+          path: build
+
+      - name: Setup SSH Keys and known_hosts
+        uses: webfactory/ssh-agent@v0.5.4
+        with:
+          ssh-private-key: ${{ secrets.PANTHEON_DEPLOY_KEY }}
+
+      - name: Run deployment
+        run: bash bin/deploy-to-staging.sh master
+
+  deploy-to-fse:
+    name: Deploy to fse environment
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    needs: build
+    if: github.ref == 'refs/heads/full-site-editing' && github.event_name == 'push'
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Download full bundle
+        uses: actions/download-artifact@v2
+        with:
+          name: material-design
+          path: build
+
+      - name: Setup SSH Keys and known_hosts
+        uses: webfactory/ssh-agent@v0.5.4
+        with:
+          ssh-private-key: ${{ secrets.PANTHEON_DEPLOY_KEY }}
+
+      - name: Run deployment to fse
+        run: bash bin/deploy-to-staging.sh fse
+
+      - name: Run deployment to traditional
+        run: bash bin/deploy-to-staging.sh traditional
diff --git a/.wp-env.json b/.wp-env.json
@@ -0,0 +1,13 @@
+{
+  "core": "WordPress/WordPress",
+  "port": 8080,
+  "mappings": {
+    "wp-content/plugins/material-design": "./plugin",
+    "wp-content/themes/material-design-google": "./theme"
+  },
+  "env": {
+    "tests": {
+      "port": 8081
+    }
+  }
+}
diff --git a/bin/deploy-to-staging.sh b/bin/deploy-to-staging.sh
@@ -0,0 +1,95 @@
+#!/bin/bash
+set -e
+
+#
+# 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
+#
+#     https://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.
+#
+
+# Custom deployment script for Pantheon environment.
+# Adapted from https://github.com/google/web-stories-wp/blob/ca31b552fc9fce8b567bda4b0f59e15e1ddbc22c/bin/deploy-to-test-environment.sh
+
+echo "Initializing deployment to Material design theme and plugin to test environment"
+
+PANTHEON_SITE="mdc-web"
+PANTHEON_BRANCH=$1
+PANTHEON_UUID="395bf65b-d336-4308-9c86-311e8ddce422"
+
+cd "$(dirname "$0")/.."
+project_dir="$(pwd)"
+repo_dir="$HOME/deployment-targets/$PANTHEON_SITE"
+
+echo "Setting up SSH configuration"
+
+# Dynamic hosts through Pantheon mean constantly checking interactively
+# that we mean to connect to an unknown host. We ignore those here.
+echo "StrictHostKeyChecking no" > ~/.ssh/config
+
+if ! grep -q "codeserver.dev.$PANTHEON_UUID.drush.in" ~/.ssh/known_hosts; then
+    ssh-keyscan -p 2222 codeserver.dev.$PANTHEON_UUID.drush.in >> ~/.ssh/known_hosts
+fi
+
+if ! grep -q "codeserver.dev.$PANTHEON_UUID.drush.in" ~/.ssh/config; then
+    echo "" >> ~/.ssh/config
+    echo "Host $PANTHEON_SITE" >> ~/.ssh/config
+    echo "  Hostname codeserver.dev.$PANTHEON_UUID.drush.in" >> ~/.ssh/config
+    echo "  User codeserver.dev.$PANTHEON_UUID" >> ~/.ssh/config
+    echo "  Port 2222" >> ~/.ssh/config
+    echo "  KbdInteractiveAuthentication no" >> ~/.ssh/config
+fi
+
+echo "Fetching remote repository"
+
+git config --global user.name "Travis CI"
+git config --global user.email "travis-ci+$PANTHEON_SITE@example.org"
+
+if [ ! -e "$repo_dir/.git" ]; then
+    git clone -v ssh://codeserver.dev.$PANTHEON_UUID@codeserver.dev.$PANTHEON_UUID.drush.in:2222/~/repository.git --depth 1 --branch "$PANTHEON_BRANCH" --single-branch "$repo_dir"
+fi
+
+cd "$repo_dir"
+
+if git rev-parse --verify --quiet "origin/$PANTHEON_BRANCH" > /dev/null; then
+    git reset --hard "origin/$PANTHEON_BRANCH"
+fi
+
+cd "$project_dir"
+
+echo "Moving files to repository"
+
+rsync -avz --delete ./build/plugin/material-design/ "$repo_dir/wp-content/plugins/material-design/"
+rsync -avz --delete ./build/theme/material-design-google/ "$repo_dir/wp-content/themes/material-design-google/"
+git --no-pager log -1 --format="Build material theme and plugin at %h: %s" > /tmp/commit-message.txt
+
+echo "Committing changes"
+
+# Commit and deploy.
+cd "$repo_dir"
+git add -A "wp-content/plugins/material-design/" "wp-content/themes/material-design-google/"
+git commit -F /tmp/commit-message.txt
+
+echo "Pushing new build to remote repository"
+git push origin $PANTHEON_BRANCH
+
+if [ "$PANTHEON_BRANCH" == "master" ]; then
+		PANTHEON_ENV="dev"
+else
+		PANTHEON_ENV="$PANTHEON_BRANCH"
+fi
+
+echo "Cleaning up project dir"
+rm -rf "$repo_dir"
+
+echo "View site at http://$PANTHEON_ENV-$PANTHEON_SITE.pantheonsite.io/"
+echo "Access Pantheon dashboard at https://dashboard.pantheon.io/sites/$PANTHEON_UUID#$PANTHEON_BRANCH"
diff --git a/composer.json b/composer.json
@@ -11,6 +11,10 @@
     "platform": {
       "php": "7.4.2",
       "ext-filter": "7.1"
+    },
+    "allow-plugins": {
+      "xwp/wordpress-tests-installer": true,
+      "dealerdirect/phpcodesniffer-composer-installer": true
     }
   },
   "require": {

diff --git a/contributing/engineering.md b/contributing/engineering.md
@@ -55,6 +55,13 @@ git clone git@github.com:material-components/material-design-for-wordpress.git m
 cd material-design
 ```
 
+### Windows local enviorment
+Use WordPress's [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/).
+
+1. Install wp-env as mentioned above.
+2. Start with `wp-env start` (Assuming you have `wp-env` installed globally with updated PATH variable or use `npx wp-env start` to execute from repository's node_modules):
+3. Activate material plugin and theme.
+
 Setup the development tools using [Node.js](https://nodejs.org) and [Composer](https://getcomposer.org):
 
 ```bash

diff --git a/plugin/assets/css/src/block-editor.css b/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";
 

diff --git a/plugin/assets/css/src/block/style/masonry.css b/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;
+}