Commit 4cbd1c8443 for woocommerce

commit 4cbd1c844375613f4eb163e3f9646d69f4bb6530
Author: Rostislav Wolný <1082140+costasovo@users.noreply.github.com>
Date:   Thu Jan 8 12:22:04 2026 +0100

    Email Editor - fix layout controls initialization for buttons block (#62708)

    * Initialize email flex layout in the correct order

    It needs to be done after block initialization to ensure all blocks
    that declare support for the reduced flex layout have layout attribute.

    It was not causing any issues because the only block that currently
    uses the layout (buttons) has the property by default

    * Initialize configs in editor in useEffect instead of useLayoutEffect

    useLayoutEffect is ok for the first initialization after page load.
    But when the editor is unmounted and remounted for the second time, there
    is a timing issue, and hooks are ignored.

diff --git a/packages/js/email-editor/changelog/wooprd-997-buttons-alignment-control-fix b/packages/js/email-editor/changelog/wooprd-997-buttons-alignment-control-fix
new file mode 100644
index 0000000000..290b6f2b80
--- /dev/null
+++ b/packages/js/email-editor/changelog/wooprd-997-buttons-alignment-control-fix
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix buttons block layout controls initialization
diff --git a/packages/js/email-editor/src/editor.tsx b/packages/js/email-editor/src/editor.tsx
index 3efc295aee..2272827154 100644
--- a/packages/js/email-editor/src/editor.tsx
+++ b/packages/js/email-editor/src/editor.tsx
@@ -6,7 +6,6 @@ import {
 	StrictMode,
 	createRoot,
 	useEffect,
-	useLayoutEffect,
 	useState,
 	useMemo,
 } from '@wordpress/element';
@@ -101,9 +100,9 @@ function onInit() {
 	initDomTracking();
 	createStore();
 	initContentValidationMiddleware();
-	initializeLayout();
 	initBlocks();
 	initTextHooks();
+	initializeLayout();
 }

 export function initialize( elementId: string ) {
@@ -157,7 +156,7 @@ export function ExperimentalEmailEditor( {
 } ) {
 	const [ isInitialized, setIsInitialized ] = useState( false );

-	useLayoutEffect( () => {
+	useEffect( () => {
 		const backupEditorSettings = select( editorStore ).getEditorSettings();
 		// Set configuration to store from window object for backward compatibility
 		const editorConfig = config || getEditorConfigFromWindow();