← All changes | blocks/section/style.css +173 -26 2.0.2 → 2.0.13 View file →

		@@ -19,10 +19,10 @@
19	19	width: 100%;
20	20	box-sizing: border-box;
21	21	}
22	22
23		-/* Content Width */
24		-.bkbg-section--width-full .bkbg-section__inner {
	23	+/* Content Width (inside section) */
	24	+.bkbg-section--content-full .bkbg-section__inner {
25	25	width: 100%;
26	26	max-width: 100%;
27	27	padding-left: 20px;
28	28	padding-right: 20px;
		@@ -27,9 +27,9 @@
27	27	padding-left: 20px;
28	28	padding-right: 20px;
29	29	}
30	30
31		-.bkbg-section--width-boxed .bkbg-section__inner {
	31	+.bkbg-section--content-boxed .bkbg-section__inner {
32	32	width: 100%;
33	33	max-width: var(--bkbg-section-max-width);
34	34	margin-left: auto;
35	35	margin-right: auto;
		@@ -98,13 +98,75 @@
98	98	flex-direction: column;
99	99	gap: 24px;
100	100	}
101	101
	102	+/* ========================================
	103	+ Section Width (outer section)
	104	+ ======================================== */
	105	+
	106	+/* Full width - break out of container (frontend) */
	107	+.bkbg-section.alignfull,
	108	+.bkbg-section--section-full {
	109	+ width: 100vw;
	110	+ max-width: none;
	111	+ position: relative;
	112	+ left: 50%;
	113	+ transform: translateX(-50%);
	114	+}
	115	+
	116	+/* Support for themes using useRootPaddingAwareAlignments */
	117	+.has-global-padding > .bkbg-section.alignfull,
	118	+.has-global-padding > .bkbg-section--section-full {
	119	+ margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
	120	+ margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
	121	+ width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)) !important;
	122	+ max-width: none !important;
	123	+ left: auto !important;
	124	+ transform: none !important;
	125	+}
	126	+
	127	+/* Wide - centered max width */
	128	+.bkbg-section.alignwide,
	129	+.bkbg-section--section-wide {
	130	+ width: 100%;
	131	+ max-width: var(--wp--style--global--wide-size, 1440px);
	132	+ margin-left: auto;
	133	+ margin-right: auto;
	134	+}
	135	+
	136	+/* Boxed - centered max width */
	137	+.bkbg-section--section-boxed {
	138	+ width: 100%;
	139	+ max-width: var(--bkbg-section-section-max-width, var(--bkbg-section-max-width));
	140	+ margin-left: auto;
	141	+ margin-right: auto;
	142	+}
	143	+
	144	+/* Ensure theme-level max-width rules don't override Section Width modes */
	145	+.wp-block-blockenberg-section.bkbg-section--section-boxed {
	146	+ max-width: var(--bkbg-section-section-max-width, var(--bkbg-section-max-width)) !important;
	147	+ margin-left: auto !important;
	148	+ margin-right: auto !important;
	149	+}
	150	+
	151	+.wp-block-blockenberg-section.bkbg-section--section-wide {
	152	+ max-width: var(--wp--style--global--wide-size, 1440px) !important;
	153	+ margin-left: auto !important;
	154	+ margin-right: auto !important;
	155	+}
	156	+
	157	+.wp-block-blockenberg-section.bkbg-section--section-full {
	158	+ max-width: none !important;
	159	+ width: 100vw !important;
	160	+ position: relative;
	161	+ left: 50%;
	162	+ transform: translateX(-50%);
	163	+}
	164	+
102	165	/* Editor-specific styles */
103	166	.editor-styles-wrapper .bkbg-section {
104	167	min-height: 60px;
105	168	border: 1px dashed transparent;
106		- border-radius: 4px;
107	169	transition: border-color 0.15s ease, box-shadow 0.15s ease;
108	170	}
109	171
110	172	.editor-styles-wrapper .bkbg-section:hover {
		@@ -129,8 +191,11 @@
129	191	}
130	192
131	193	.editor-styles-wrapper .bkbg-section > .bkbg-section__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
132	194	width: 100%;
	195	+ display: flex;
	196	+ flex-direction: column;
	197	+ gap: 24px;
133	198	}
134	199
135	200	/* Section label in editor */
136	201	.editor-styles-wrapper .bkbg-section::before {
		@@ -152,27 +217,17 @@
152	217	.editor-styles-wrapper .bkbg-section.is-selected::before {
153	218	opacity: 1;
154	219	}
155	220
156		-/* Full width alignment - break out of container - only for top-level sections */
157		-.bkbg-section.alignfull:not(.bkbg-column .bkbg-section) {
158		- width: 100vw;
159		- max-width: 100vw;
160		- margin-left: calc(-50vw + 50%);
161		- margin-right: calc(-50vw + 50%);
162		-}
	221	+/* (Alignment rules moved above; keep nested overrides below) */
163	222
164		-.bkbg-section.alignwide:not(.bkbg-column .bkbg-section) {
165		- width: calc(100% + 80px);
166		- max-width: calc(100vw - 40px);
167		- margin-left: -40px;
168		- margin-right: -40px;
169		-}
170		-
171	223	/* Nested sections inside columns should be full width of column */
172	224	.bkbg-column .bkbg-section,
173	225	.bkbg-column .bkbg-section.alignfull,
174		-.bkbg-column .bkbg-section.alignwide {
	226	+.bkbg-column .bkbg-section.alignwide,
	227	+.bkbg-column .bkbg-section--section-full,
	228	+.bkbg-column .bkbg-section--section-wide,
	229	+.bkbg-column .bkbg-section--section-boxed {
175	230	width: 100% !important;
176	231	max-width: 100% !important;
177	232	margin-left: 0 !important;
178	233	margin-right: 0 !important;
		@@ -177,21 +232,63 @@
177	232	margin-left: 0 !important;
178	233	margin-right: 0 !important;
179	234	}
180	235
181		-/* Editor full width support */
182		-.editor-styles-wrapper .bkbg-section.alignfull,
183		-.editor-styles-wrapper [data-type="blockenberg/section"][data-align="full"] > .bkbg-section {
	236	+/* Editor: use margin-based breakout instead of transform (better for editor UI) */
	237	+.editor-styles-wrapper .bkbg-section--section-full {
	238	+ width: auto !important;
	239	+ max-width: none !important;
	240	+
	241	+ /* Break out of the content area */
	242	+ margin-left: calc(50% - 50vw) !important;
	243	+ margin-right: calc(50% - 50vw) !important;
	244	+
	245	+ /* Reset frontend transform/left centering */
	246	+ left: auto !important;
	247	+ transform: none !important;
	248	+}
	249	+
	250	+.editor-styles-wrapper .bkbg-section--section-wide {
184	251	width: 100% !important;
	252	+ max-width: var(--wp--style--global--wide-size, 1440px) !important;
	253	+ margin-left: auto !important;
	254	+ margin-right: auto !important;
	255	+}
	256	+
	257	+.editor-styles-wrapper .bkbg-section--section-boxed {
	258	+ width: 100% !important;
	259	+ max-width: var(--bkbg-section-section-max-width, var(--bkbg-section-max-width)) !important;
	260	+ margin-left: auto !important;
	261	+ margin-right: auto !important;
	262	+}
	263	+
	264	+/* Editor: override generic .wp-block max-width constraints for this block */
	265	+.editor-styles-wrapper .wp-block[data-type="blockenberg/section"].bkbg-section--section-boxed {
	266	+ max-width: var(--bkbg-section-section-max-width, var(--bkbg-section-max-width)) !important;
	267	+ margin-left: auto !important;
	268	+ margin-right: auto !important;
	269	+}
	270	+
	271	+.editor-styles-wrapper .wp-block[data-type="blockenberg/section"].bkbg-section--section-wide {
	272	+ max-width: var(--wp--style--global--wide-size, 1440px) !important;
	273	+ margin-left: auto !important;
	274	+ margin-right: auto !important;
	275	+}
	276	+
	277	+.editor-styles-wrapper .wp-block[data-type="blockenberg/section"].bkbg-section--section-full {
185	278	max-width: none !important;
186		- margin-left: 0 !important;
187		- margin-right: 0 !important;
	279	+ width: auto !important;
	280	+ /* Use margin breakout */
	281	+ margin-left: calc(50% - 50vw) !important;
	282	+ margin-right: calc(50% - 50vw) !important;
	283	+ left: auto !important;
	284	+ transform: none !important;
188	285	}
189	286
190	287	/* Responsive adjustments */
191	288	@media (max-width: 782px) {
192		- .bkbg-section--width-boxed .bkbg-section__inner,
193		- .bkbg-section--width-full .bkbg-section__inner {
	289	+ .bkbg-section--content-boxed .bkbg-section__inner,
	290	+ .bkbg-section--content-full .bkbg-section__inner {
194	291	padding-left: 16px;
195	292	padding-right: 16px;
196	293	}
197	294
		@@ -203,5 +300,55 @@
203	300	.bkbg-section--padding-xl {
204	301	padding-top: 48px;
205	302	padding-bottom: 48px;
206	303	}
	304	+}
	305	+
	306	+/* Inspector: spacing controls */
	307	+.block-editor-page .bkbg-spacing-control,
	308	+.interface-interface-skeleton__editor .bkbg-spacing-control {
	309	+ margin-top: 12px;
	310	+ padding-top: 10px;
	311	+ border-top: 1px solid #e2e8f0;
	312	+}
	313	+
	314	+.block-editor-page .bkbg-spacing-control__title,
	315	+.interface-interface-skeleton__editor .bkbg-spacing-control__title {
	316	+ font-size: 13px;
	317	+ font-weight: 600;
	318	+ color: #1f2937;
	319	+ margin-bottom: 10px;
	320	+}
	321	+
	322	+.block-editor-page .bkbg-spacing-control__grid,
	323	+.interface-interface-skeleton__editor .bkbg-spacing-control__grid {
	324	+ display: grid;
	325	+ grid-template-columns: repeat(2, minmax(0, 1fr));
	326	+ gap: 10px 12px;
	327	+}
	328	+
	329	+.block-editor-page .bkbg-spacing-control__item,
	330	+.interface-interface-skeleton__editor .bkbg-spacing-control__item {
	331	+ min-width: 0;
	332	+}
	333	+
	334	+.block-editor-page .bkbg-spacing-control__label,
	335	+.interface-interface-skeleton__editor .bkbg-spacing-control__label {
	336	+ display: block;
	337	+ font-size: 12px;
	338	+ font-weight: 500;
	339	+ color: #374151;
	340	+ margin-bottom: 4px;
	341	+}
	342	+
	343	+.block-editor-page .bkbg-spacing-control__row,
	344	+.interface-interface-skeleton__editor .bkbg-spacing-control__row {
	345	+ display: grid;
	346	+ grid-template-columns: minmax(0, 1fr) 78px;
	347	+ gap: 6px;
	348	+ align-items: center;
	349	+}
	350	+
	351	+.block-editor-page .bkbg-spacing-control__custom-unit,
	352	+.interface-interface-skeleton__editor .bkbg-spacing-control__custom-unit {
	353	+ margin-top: 6px;
207	354	}