Release/WDSBT v1.0

.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:

.gitignore

@@ -24,6 +24,7 @@ vendor/
 # theme
 build/
 /blocks/
+!assets/blocks/
 
 #tests
 pa11y-ci-report/

.markdownlintignore

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

.prettierignore

@@ -1,4 +1,5 @@
-blocks/
+/blocks/
+!assets/blocks/
 build/
 node_modules/
 vendor/

.stylelintignore

@@ -1,5 +1,6 @@
-build/
 /blocks/
+!assets/blocks/
+/build/
 vendor/
 node_modules/
 !.*.js

README.md

@@ -145,7 +145,7 @@ Meet WDS BT, a stylish block theme, tailored for WordPress, featuring native blo
 				│       │       ├── tag-cloud.scss
 				│       │       ├── verse.scss
 				│       │       └── video.scss
-				│       ├── template-parts 
+				│       ├── template-parts
 				│       │   ├── _index.scss
 				│       │   ├── footer.scss
 				│       │   └── header.scss
@@ -299,7 +299,7 @@ This will process JavaScript, SCSS, optimize images, and generate necessary file
 <details closed>
 <summary><b>Overriding/Customizing Block Styles</b></summary>
 
-1. Navigate to the `assets/scss/blocks/` directory within your theme. If overriding a core block style, use the `core` folder, if overriding a block from a plugin use the `custom` folder.
+1. Navigate to the `assets/scss/blocks/` directory within your theme. If overriding a core block style, use the `core` folder, if overriding a block from a plugin use the `third-party` folder.
 
 2. Create an SCSS file with the exact filename as the block name you want to customize. This file will house your custom styles for that specific block.
 

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,31 +65,41 @@
 		}
 	}
 
-	&.large {
+	&.has-size-m {
 		.wp-block-button__link {
-			border-radius: 6px;
-			border-width: 2px;
-			font-size: 1rem;
-		}
+			font-size: var(--wp--preset--font-size--s);
+			padding: 0.625rem 2.5rem 0.625rem 1.25rem;
 
-		&::after {
-			height: 1.25rem;
-			width: 1.25rem;
+			&::after {
+				height: 1.25rem;
+				width: 1.25rem;
+			}
 		}
 	}
 
-	&.xlarge {
+	&.has-size-l {
 		.wp-block-button__link {
-			border-radius: 6px;
-			border-width: 2px;
-			font-size: var(--wp--preset--font-size--s);
+			font-size: var(--wp--preset--font-size--m);
+			padding: 0.9375rem 3rem 0.9375rem 1.25rem;
 
 			&::after {
 				height: 1.5rem;
 				width: 1.5rem;
 			}
 		}
 	}
+
+	&.has-size-xl {
+		.wp-block-button__link {
+			font-size: var(--wp--preset--font-size--l);
+			padding: 0.9375rem 3rem 0.9375rem 1.25rem;
+
+			&::after {
+				height: 1.75rem;
+				width: 1.75rem;
+			}
+		}
+	}
 }
 
 @include responsive-max(600px) {