Release/WDS-BT-V1

.github/workflows/assertions.yml

@@ -1,17 +1,13 @@
 name: Code Quality
 
 on:
-    pull_request:
-    push:
-        branches:
-            - main
+  pull_request:
+    branches:
+      - main
 
-# Cancel previous workflow run groups that have not completed.
 concurrency:
-    # Group workflow runs by workflow name, along with the head branch ref of the pull request
-    # or otherwise the branch or tag ref.
-    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.ref }}
-    cancel-in-progress: true
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.ref }}
+  cancel-in-progress: true
 
 jobs:
     lint-css:

.github/workflows/security.yml

@@ -1,20 +1,13 @@
 name: Security
 
 on:
-    # Run on all pushes and on all pull requests.
-    push:
-    pull_request:
-    # Also run this workflow every Monday at 6:00.
-    schedule:
-        - cron: '0 6 * * 1'
-    # Allow manually triggering the workflow.
-    workflow_dispatch:
+  pull_request:
+    branches:
+      - main
 
-# Cancels all previous workflow runs for the same branch that have not yet completed.
 concurrency:
-    # The concurrency group contains the workflow name and the branch name.
-    group: ${{ github.workflow }}-${{ github.ref }}
-    cancel-in-progress: true
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.ref }}
+  cancel-in-progress: true
 
 jobs:
     security:

.markdownlintignore

@@ -1,4 +1,4 @@
-blocks
+./blocks
 build
 node_modules
 vendor

.prettierignore

@@ -1,4 +1,4 @@
-blocks/
+./blocks/
 build/
 node_modules/
 vendor/

assets/js/block-filters/buttons.js

@@ -0,0 +1,101 @@
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { InspectorControls } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	PanelRow,
+	ButtonGroup,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Renders the edit component for the button block.
+ *
+ * @param {Object}   props                       - The properties passed to the component.
+ * @param {Object}   props.attributes            - The attributes of the button block.
+ * @param {string}   props.attributes.buttonSize - The size of the button.
+ * @param {Function} props.setAttributes         - The function to set the attributes of the button block.
+ * @return {JSX.Element} The rendered edit component.
+ */
+function Edit({ attributes: { buttonSize }, setAttributes }) {
+	const handleChange = (newSize) => {
+		// Check if we are toggling the size off
+		const size = buttonSize === newSize ? undefined : newSize;
+		const buttonClass = buttonSize !== newSize ? 'has-size-' + newSize : '';
+
+		// Update attributes.
+		setAttributes({
+			buttonSize: size,
+			className: buttonClass,
+		});
+	};
+
+	return (
+		<InspectorControls>
+			<PanelBody title={__('Button Sizes')}>
+				<PanelRow>
+					<ButtonGroup aria-label={__('Button Sizes')}>
+						{['s', 'm', 'l', 'xl'].map((sizeValue) => {
+							return (
+								<Button
+									key={sizeValue}
+									size="medium"
+									variant={
+										buttonSize === sizeValue
+											? 'primary'
+											: undefined
+									}
+									onClick={() => handleChange(sizeValue)}
+								>
+									{sizeValue.toUpperCase()}
+								</Button>
+							);
+						})}
+					</ButtonGroup>
+				</PanelRow>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'wds-bt/button-sizes',
+	(settings, name) => {
+		if (name !== 'core/button') {
+			return settings;
+		}
+
+		return {
+			...settings,
+			attributes: {
+				...settings.attributes,
+				buttonSize: {
+					type: 'string',
+					selector: 'a',
+					default: '',
+				},
+			},
+		};
+	}
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'wds-bt/button-sizes',
+	createHigherOrderComponent((BlockEdit) => {
+		return (props) => {
+			if (props.name !== 'core/button') {
+				return <BlockEdit {...props} />;
+			}
+
+			return (
+				<>
+					<BlockEdit {...props} />
+					<Edit {...props} />
+				</>
+			);
+		};
+	})
+);

assets/js/block-filters/index.js

@@ -6,3 +6,4 @@
 
 // Import the block filter file.
 import './unregister-core-embed';
+import './buttons';

assets/scss/blocks/core/button.scss

@@ -65,7 +65,7 @@
 		}
 	}
 
-	&.large {
+	&.has-size-l {
 		.wp-block-button__link {
 			border-radius: 6px;
 			border-width: 2px;
@@ -78,7 +78,7 @@
 		}
 	}
 
-	&.xlarge {
+	&.has-size-xl {
 		.wp-block-button__link {
 			border-radius: 6px;
 			border-width: 2px;

assets/scss/patterns/_index.scss

@@ -1,2 +1,3 @@
 // 'patterns/' houses styles for custom patterns.
 // @import './pattern-name';
+@import './related-posts';

assets/scss/patterns/related-posts.scss

@@ -0,0 +1,76 @@
+/** cards **/
+
+.related-posts-query {
+	.wp-block-post {
+		border-radius: 10px;
+		box-shadow:
+			0 0.5rem 1rem 0 rgba(48, 49, 51, 0.1),
+			0 0 0.0625rem 0 rgba(48, 49, 51, 0.05);
+
+		> *:not(.wp-block-post-featured-image):not(hr) {
+			padding: 0.5rem 1.875rem;
+		}
+
+		.wp-block-post-featured-image {
+			img {
+				border-top-left-radius: 10px;
+				border-top-right-radius: 10px;
+			}
+		}
+
+		.wp-block-post-terms {
+			padding-bottom: 0;
+
+			a {
+				color: var(--wp--preset--color--grey-400);
+				padding-bottom: 0;
+				text-transform: none;
+
+				&:hover,
+				&:focus {
+					color: var(--wp--preset--color--primary-500);
+				}
+			}
+		}
+
+		.wp-block-post-title {
+			margin: 0;
+
+			a {
+				color: var(--wp--preset--color--black);
+				font-size: var(--wp--preset--font-size--l);
+				line-height: 1.3;
+
+				&:hover,
+				&:focus {
+					color: var(--wp--preset--color--primary-500);
+				}
+			}
+		}
+
+		hr {
+			border-top: 10px;
+			margin: 0;
+		}
+
+		.wp-block-post-excerpt {
+			color: var(--wp--preset--color--grey-500);
+			margin-top: 0;
+			padding: 0 0 1.25rem 0;
+		}
+
+		.wp-block-read-more {
+			color: var(--wp--preset--color--primary-500);
+			font-size: var(--wp--preset--font-size--xxs);
+			font-weight: 300;
+			margin-bottom: 0.75rem;
+			margin-top: 0.75rem;
+			text-decoration: underline;
+
+			&:hover,
+			&:focus {
+				color: var(--wp--preset--color--primary-300);
+			}
+		}
+	}
+}

composer.json

@@ -22,12 +22,12 @@
 		"sort-packages": true
 	},
 	"require": {
-		"composer/installers": "^2.2.0"
+		"composer/installers": "^2.3.0"
 	},
 	"require-dev": {
-		"php": ">=8.0",
+		"php": ">=8.2",
 		"dealerdirect/phpcodesniffer-composer-installer": "^1.0.0",
-		"phpcompatibility/phpcompatibility-wp": "^2.1.4",
+		"phpcompatibility/phpcompatibility-wp": "^2.1.5",
 		"squizlabs/php_codesniffer": "^3.10.1",
 		"wp-cli/wp-cli-bundle": "^2.10.0",
 		"wp-coding-standards/wpcs": "^3.1.0"