Skip to content

fix: allow align-items to be adjusted #3739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Arukuen wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix: allow align-items to be adjusted #3739

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/block/hero/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@

.stk-block-hero__content > .stk-inner-blocks.stk--column-flex:not(.stk--block-horizontal-flex) {
justify-content: center;
align-items: center;
align-items: var(--stk-alignment-justify-content, center);

@coderabbitai coderabbitai Bot Aug 13, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -eu

printf '%s\n' '--- src/block/hero/style.scss ---'
cat -n src/block/hero/style.scss | sed -n '1,40p'

printf '%s\n' '--- src/styles/block.scss ---'
cat -n src/styles/block.scss | sed -n '330,400p'

printf '%s\n' '--- alignment variable references ---'
rg -n --glob '*.scss' --glob '*.css' --glob '*.js' --glob '*.ts' \
  -- '--stk-alignment-justify-content|align-items|justify-content' src | head -250

printf '%s\n' '--- static contract check ---'
python3 - <<'PY'
from pathlib import Path
import re

hero = Path("src/block/hero/style.scss").read_text()
shared = Path("src/styles/block.scss").read_text()

decl = re.search(r"align-items\s*:\s*var\(\s*--stk-alignment-justify-content\s*,\s*([^)]*)\)", hero)
values = sorted(set(re.findall(r"--stk-alignment-justify-content[^;]*?([a-z-]+)", shared)))
invalid_for_align_items = {"space-between", "space-around", "space-evenly"}
print("hero_declaration:", decl.group(0) if decl else None)
print("shared_variable_values:", values)
print("distribution_values_invalid_for_align_items:",
      sorted(invalid_for_align_items.intersection(values)))
PY

Repository: gambitph/Stackable

Length of output: 21024

🏁 Script executed:

#!/bin/bash
set -eu

printf '%s\n' '--- Hero styles and editor styles ---'
cat -n src/block/hero/style.scss
cat -n src/block/hero/editor.scss | sed -n '1,80p'

printf '%s\n' '--- alignment mixin call sites ---'
rg -n -C 4 --glob '*.scss' \
  '`@include` (align-(center|left|right|space-between|space-around|space-evenly)-styles)|align-(center|left|right|space-between|space-around|space-evenly)-styles' \
  src/styles src/block src/components | head -300

printf '%s\n' '--- selectors around shared alignment rules ---'
cat -n src/styles/block.scss | sed -n '70,180p'
cat -n src/styles/block.scss | sed -n '430,500p'

printf '%s\n' '--- Hero references and alignment-related implementation ---'
rg -n -C 5 --glob '*.{js,jsx,ts,tsx,scss}' \
  'stk-block-hero|align-space-between|align-space-around|align-space-evenly|has-text-align|alignment' \
  src/block/hero src | head -400

Repository: gambitph/Stackable

Length of output: 34440

🏁 Script executed:

#!/bin/bash
set -eu

printf '%s\n' '--- alignment helper definitions ---'
rg -n -C 8 --glob '*.{js,jsx,ts,tsx}' \
  'function getAlignmentClasses|const getAlignmentClasses|function getContentAlignmentClasses|const getContentAlignmentClasses|getContentAlignmentClasses|getAlignmentClasses' \
  src | head -300

printf '%s\n' '--- complete Hero class construction ---'
cat -n src/block/hero/edit.js | sed -n '55,125p'
cat -n src/block/hero/save.js | sed -n '25,75p'

printf '%s\n' '--- alignment attributes and class values ---'
rg -n -C 5 --glob '*.{js,jsx,ts,tsx}' \
  'textAlign|textAlignTablet|textAlignMobile|has-text-align-space|contentAlign' \
  src/components src/higher-order src/block | head -350

printf '%s\n' '--- exact selector/property contract ---'
python3 - <<'PY'
from pathlib import Path
import re

hero = Path("src/block/hero/style.scss").read_text()
shared = Path("src/styles/block.scss").read_text()
edit = Path("src/block/hero/edit.js").read_text()
save = Path("src/block/hero/save.js").read_text()

selector = re.search(r"(\.stk-block-hero__content\s*>\s*\.stk-inner-blocks[^{}]+)\s*\{", hero)
decl = re.search(r"align-items\s*:\s*var\(\s*--stk-alignment-justify-content\s*,\s*center\s*\)", hero)
distribution_classes = re.findall(
    r"\.has-text-align-(space-(?:between|around|evenly))\s*\{", shared
)
print("hero_selector:", selector.group(1) if selector else None)
print("hero_align_items_uses_shared_variable:", bool(decl))
print("distribution_classes_defined:", distribution_classes)
print("edit_attaches_content_alignment_classes:",
      "getContentAlignmentClasses( props.attributes )" in edit)
print("save_attaches_content_alignment_classes:",
      "getContentAlignmentClasses( attributes )" in save)
PY

Repository: gambitph/Stackable

Length of output: 47587

Do not pass distribution values to align-items.

--stk-alignment-justify-content can resolve to space-between, space-around, or space-evenly. These values are invalid for align-items, so Hero distribution alignment has no effect. Use a dedicated cross-axis variable or map distribution modes to justify-content. Add regression coverage for all alignment modes.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/block/hero/style.scss` at line 5, Update the Hero alignment styling
around the align-items declaration so it no longer consumes
--stk-alignment-justify-content distribution values; use the appropriate
cross-axis variable for align-items or apply distribution values through
justify-content. Preserve all supported alignment modes and add regression
coverage covering each mode.

}
Loading