Skip to content
This repository has been archived by the owner on Oct 16, 2023. It is now read-only.

Feature: add focus ring for blocks #211

Merged
merged 10 commits into from
Aug 2, 2023
Merged

Feature: add focus ring for blocks #211

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8276d46
feature: add focus ring for blocks
glaubersilva Jul 7, 2023
aa4e5f2
refactor: change style
glaubersilva Jul 21, 2023
7ae3917
Merge branch 'develop' into feature/block-focus-ring
glaubersilva Jul 21, 2023
e55b7b8
refactor: change padding and border radius
glaubersilva Jul 25, 2023
02b6162
fix: keep original space between popover and selected block
glaubersilva Jul 26, 2023
00706b2
fix: keep popover visible when scroll down
glaubersilva Jul 26, 2023
16759fe
refactor: change const name
glaubersilva Jul 26, 2023
6891731
refactor: popover scroll improvements
glaubersilva Jul 26, 2023
7a679bf
refactor: change skeleton classes to not cut off the popover element
glaubersilva Aug 1, 2023
791bb1b
refactor: remove popover js
glaubersilva Aug 1, 2023
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
24 changes: 23 additions & 1 deletion src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
}

.interface-interface-skeleton__header {
position: fixed;
top: 0;
right: 0;
left: 0;
Expand Down Expand Up @@ -117,6 +116,23 @@
.block-editor-block-list__block {
position: relative;

.wp-block {

&.is-selected:before {
border-style: solid;
border-width: thin;
border-radius: 0.5rem;
border-color: var(--wp-admin-theme-color);
display: block;
content: '';
position: absolute;
width: calc(100% + 1rem);
height: calc(100% + 1rem);
left: calc(-1rem / 2);
top: calc(-1rem / 2);
}
}

&:not(.is-selected) {
.block-list-appender {
display: none;
Expand Down Expand Up @@ -164,8 +180,14 @@
width: 100%;
}

.components-popover.block-editor-block-popover .components-popover__content {
top: -0.5rem;
position: relative;
}

.interface-interface-skeleton {
left: 0 !important;
top: 0;
}

.block-editor-block-list__layout {
Expand Down