gutenberg/packages/block-editor/src/components/button-block-appender/content.scss at 9d3d8ac350a9589003b5c1fa0cacd66406926d4a · vipul0425/gutenberg · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
.block-editor-button-block-appender {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	color: $gray-900;
	box-shadow: inset 0 0 0 $border-width $gray-900;

	.is-dark-theme & {
		color: $light-gray-placeholder;
		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
	}

	&:hover {
		color: var(--wp-admin-theme-color);
		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
	}

	&:focus {
		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
	}

	&:active {
		color: $black;
	}
}


// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
.block-list-appender:only-child {
	// One level of nesting
	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
	// Legacy groups have an inner container so need to be targeted separately
	.block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > &,
	.block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > & {
		pointer-events: none;

		&::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			pointer-events: none;
			border: $border-width dashed currentColor;
		}

		.block-editor-inserter {
			opacity: 0;

			&:focus-within {
				opacity: 1;
			}
		}

		&.is-drag-over {
			&::after {
				border: none;
			}

			.block-editor-inserter {
				visibility: visible;
			}
		}
	}

	// Hide the dashed outline in 2-level nested cases, so for example the dashed
	// empty column is only shown when the columns block is selected.
	.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > &::after {
		border: none;
	}

	// Drop zone.
	&.is-drag-over .block-editor-button-block-appender {
		background-color: var(--wp-admin-theme-color);
		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
		color: $light-gray-placeholder;
		transition: background-color 0.2s ease-in-out;

		@media ( prefers-reduced-motion: reduce ) {
			transition: none;
		}
	}
}