← All changes | blocks/section/style.css +170 -26 2.0.3 → 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 {
		@@ -155,27 +217,17 @@
155	217	.editor-styles-wrapper .bkbg-section.is-selected::before {
156	218	opacity: 1;
157	219	}
158	220
159		-/* Full width alignment - break out of container - only for top-level sections */
160		-.bkbg-section.alignfull:not(.bkbg-column .bkbg-section) {
161		- width: 100vw;
162		- max-width: 100vw;
163		- margin-left: calc(-50vw + 50%);
164		- margin-right: calc(-50vw + 50%);
165		-}
	221	+/* (Alignment rules moved above; keep nested overrides below) */
166	222
167		-.bkbg-section.alignwide:not(.bkbg-column .bkbg-section) {
168		- width: calc(100% + 80px);
169		- max-width: calc(100vw - 40px);
170		- margin-left: -40px;
171		- margin-right: -40px;
172		-}
173		-
174	223	/* Nested sections inside columns should be full width of column */
175	224	.bkbg-column .bkbg-section,
176	225	.bkbg-column .bkbg-section.alignfull,
177		-.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 {
178	230	width: 100% !important;
179	231	max-width: 100% !important;
180	232	margin-left: 0 !important;
181	233	margin-right: 0 !important;
		@@ -180,21 +232,63 @@
180	232	margin-left: 0 !important;
181	233	margin-right: 0 !important;
182	234	}
183	235
184		-/* Editor full width support */
185		-.editor-styles-wrapper .bkbg-section.alignfull,
186		-.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 {
187	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 {
188	278	max-width: none !important;
189		- margin-left: 0 !important;
190		- 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;
191	285	}
192	286
193	287	/* Responsive adjustments */
194	288	@media (max-width: 782px) {
195		- .bkbg-section--width-boxed .bkbg-section__inner,
196		- .bkbg-section--width-full .bkbg-section__inner {
	289	+ .bkbg-section--content-boxed .bkbg-section__inner,
	290	+ .bkbg-section--content-full .bkbg-section__inner {
197	291	padding-left: 16px;
198	292	padding-right: 16px;
199	293	}
200	294
		@@ -206,5 +300,55 @@
206	300	.bkbg-section--padding-xl {
207	301	padding-top: 48px;
208	302	padding-bottom: 48px;
209	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;
210	354	}