diff --git a/resources/scripts/editor.js b/resources/scripts/editor.js
index e7bbb9a6d6..bea0bf995c 100644
--- a/resources/scripts/editor.js
+++ b/resources/scripts/editor.js
@@ -1,17 +1,7 @@
-import domReady from '@roots/sage/client/dom-ready';
-import { registerBlockStyle, unregisterBlockStyle } from '@wordpress/blocks';
-
 /**
- * Editor entrypoint
+ * @see {@link https://bud.js.org/extensions/bud-preset-wordpress/editor-integration/filters}
  */
-domReady(() => {
-  unregisterBlockStyle('core/button', 'outline');
-
-  registerBlockStyle('core/button', {
-    name: 'outline',
-    label: 'Outline',
-  });
-});
+roots.register.filters('@scripts/filters');
 
 /**
  * @see {@link https://webpack.js.org/api/hot-module-replacement/}
diff --git a/resources/scripts/filters/button.filter.js b/resources/scripts/filters/button.filter.js
new file mode 100644
index 0000000000..65a6a1cccb
--- /dev/null
+++ b/resources/scripts/filters/button.filter.js
@@ -0,0 +1,25 @@
+/**
+ * @see {@link https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
+ */
+export const hook = 'blocks.registerBlockType';
+
+/**
+ * Filter handle
+ */
+export const name = 'sage/button';
+
+/**
+ * Filter callback
+ *
+ * @param {object} settings
+ * @param {string} name
+ * @returns modified settings
+ */
+export function callback(settings, name) {
+  if (name !== 'core/button') return settings;
+
+  return {
+    ...settings,
+    styles: [{ label: 'Outline', name: 'outline' }],
+  };
+}