feat(website builder): page editor UI#5211
Merged
Merged
Conversation
…ls (#5107) Co-authored-by: Bruno Zoric <bruno@webiny.com> Co-authored-by: adrians5j <adrian@webiny.com>
The `@source` directive — which contains an absolute filesystem path — was injected into every CSS file processed by PostCSS. Tailwind v4 removes the directive from CSS files it processes, but `@tailwindcss/postcss` only processes files containing one of its trigger at-rules; for other files (e.g., pre-bundled component CSS imported through JS, like the Lexical editor styles), the injected directive survived into the final bundle, exposing the build machine's home directory in production output. Add a small PostCSS plugin that runs after `@tailwindcss/postcss` and removes any remaining `@source` at-rule from the output, so the leak cannot escape regardless of which files trigger Tailwind processing. Closes #5155
Co-authored-by: webiny-bot <webiny-bot@webiny.com> Co-authored-by: Adrian Smijulj <adrian1358@gmail.com>
Co-authored-by: webiny-bot <webiny-bot@webiny.com> Co-authored-by: Pavel Denisjuk <pavel@webiny.com>
Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
…26-05-13 # Conflicts: # packages/admin-ui/src/SegmentedControl/SegmentedControl.stories.tsx
adrians5j
changed the title
adrians5j
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
This PR significantly improves the Website Builder editor UI. It introduces a new
DragCursorcomponent inadmin-uithat replaces the plain orange circle with a designed pill-shaped drag indicator (dotted border on drag, solid fill when over a drop slot). The Style sidebar receives a major layout overhaul: a newSidebarRowprimitive enforces a fixed-width label column with a vertically aligned control column across all style sections (Layout, Border, Background, Visibility), matching the Figma design. The element overlay label now shows the component icon alongside the name.BooleanInputandVisibilitycontrols are replaced withSegmentedControlfor a more compact inline experience.FileUrlFormatteris introduced as a configurable formatter (default passthrough inapp-admin, real URL transformation inapp-file-manager) registered viaAdminConfig. Severaladmin-uiimprovements ship alongside:SegmentedControl.Tabs,SegmentedControlfull-width mode,ToggleGrouptooltip support, andFileUrlFormatter/FileUrlinterfaces onAdminUiProvider.Posts
https://x.com/WebinyCMS/status/2058070192815497325
https://x.com/WebinyCMS/status/2057497673901416748
Changelog
Website Builder Editor UI Improvements
Replaced the drag preview orange circle with a designed
DragCursorpill component that shows the element name and icon, and changes appearance when hovering over a valid drop slot. Redesigned the Style sidebar to use a consistent label-left / control-right row layout across Layout, Border, Background, and Visibility sections. The element overlay chip now displays the component icon. Boolean and Visibility inputs now use segmented controls instead of switches.FileUrlFormatter — Configurable URL Transformation
Added a
FileUrlFormatterabstraction that allows packages to register a custom URL transformer viaAdminConfig. The default implementation is a passthrough;app-file-managerregisters a formatter that appends?width=Nwhen.width(N)is called, enabling thumbnail-sized image requests from the editor.SegmentedControl Tabs and Full-Width Mode
SegmentedControlnow supports aTabscompound component for tab-panel layouts and afullWidthprop that stretches the control to fill its container with equally-sized buttons.Squash Merge Commit