Dynamische CSS-Attribute über Funktionen

Für jeden selbst erstellten Gutenberg-Block sollen individuelle Margins und Paddings vergeben werden.

Hierzu erstellen wir eine ACF-Feldgruppe mit den um dynamische CSS-Attribute festlegen zu können. In meinem Beispiel sind es z.B. Margin-Top (globel_margin_top) und Padding-Top (global_padding_top).
Ich nutze für die einzelnen Felder Nummernfelder. So kann ich pixelgenau die jeweiligen Werte eingeben.

Die erstellte Feldgruppe (z.B. Global: Margin-Padding) weise ich allen Blöcken zu, damit diese im Backend bei allen Blöcken angezeigt werden.

Nun erstelle ich eine Funktion, die die entsprechenden Werte abruft und verarbeitet:

<?php

/**
 * Integriert Global Margin/Padding in jedem Block
 * @return string
 */
function hbdev_global_margin() {
	$style = '';

	// Margin Werte
	$gmargin_top = get_field('global_margin_top');
	if ($gmargin_top !== null && $gmargin_top !== '') {
		$style .= '--margin-top: ' . esc_attr($gmargin_top) . 'px; ';
	}

	$gmargin_bottom = get_field('global_margin_bottom');
	if ($gmargin_bottom !== null && $gmargin_bottom !== '') {
		$style .= '--margin-bottom: ' . esc_attr($gmargin_bottom) . 'px; ';
	}

	$gmargin_left = get_field('global_margin_left');
	if ($gmargin_left !== null && $gmargin_left !== '') {
		$style .= '--margin-left: ' . esc_attr($gmargin_left) . 'px; ';
	}

	$gmargin_right = get_field('global_margin_right');
	if ($gmargin_right !== null && $gmargin_right !== '') {
		$style .= '--margin-right: ' . esc_attr($gmargin_right) . 'px; ';
	}

	// Padding Werte
	$gpadding_top = get_field('global_padding_top');
	if ($gpadding_top !== null && $gpadding_top !== '') {
		$style .= '--padding-top: ' . esc_attr($gpadding_top) . 'px; ';
	}

	$gpadding_bottom = get_field('global_padding_bottom');
	if ($gpadding_bottom !== null && $gpadding_bottom !== '') {
		$style .= '--padding-bottom: ' . esc_attr($gpadding_bottom) . 'px; ';
	}

	$gpadding_left = get_field('global_padding_left');
	if ($gpadding_left !== null && $gpadding_left !== '') {
		$style .= '--padding-left: ' . esc_attr($gpadding_left) . 'px; ';
	}

	$gpadding_right = get_field('global_padding_right');
	if ($gpadding_right !== null && $gpadding_right !== '') {
		$style .= '--padding-right: ' . esc_attr($gpadding_right) . 'px; ';
	}

	return $style;
}

Ich habe entsprechende Prüfungen integriert, damit später keine Null-Werte übergeben werden. Das sorgt für einen lesbareren HTML-Code

Hier definiere ich die notwendigen CSS-Variablen. In diesem Fall als Beispiel auch für Bildschirmbreiten unter 480px.

.section-margin-padding {
  margin-top: var(--margin-top);
  margin-right: var(--margin-right);
  margin-bottom: var(--margin-bottom);
  margin-left: var(--margin-left);
  padding-top: var(--padding-top);
  padding-right: var(--padding-right);
  padding-bottom: var(--padding-bottom);
  padding-left: var(--padding-left);
}

@media (max-width: 480px) {
  .section-margin-padding {
    margin-top: calc(var(--margin-top) * 0.5);
    margin-right: calc(var(--margin-right) * 0.5);
    margin-bottom: calc(var(--margin-bottom) * 0.5);
    margin-left: calc(var(--margin-left) * 0.5);
    padding-top: calc(var(--padding-top) * 0.5);
    padding-right: calc(var(--padding-right) * 0.5);
    padding-bottom: calc(var(--padding-bottom) * 0.5);
    padding-left: calc(var(--padding-left) * 0.5);
  }
}

Die im Backend festgelegten Margin- und Padding-Werte werden, für Bildschirme unter 480px Breite, halbiert.

Hier wird die Funktion in der block.php aufgerufen:

<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> section-margin-padding" style="<?php echo esc_attr(function_exists('hbdev_global_margin') ? hbdev_global_margin() : ''); ?>">

In diesem Beispiel statten wir eine Section mit dynamischen Margin- und Padding-Werten aus. Für den Fall, dass wir mehrere Sections auf einer Seite dynamisieren möchten, rufen wir die Funktion direkt im Style-Tag auf. So werden für jeden einzelnen Block die richtigen Werte zurückgegeben und zugeordnet.

Zuerst vergeben wir die Klasse „section-margin-padding“, damit nur die Bereiche dynamisiert werden, die wir explizit angeben.
Das Style-Attribut
– ruft die Funktion auf
– übergibt die Werte dieses Blockes, die im Backend festgelegt wurden
– empfängt die verarbeiteten Style-Werte
– und fügt diese für den HTML-Code der Seite ein

Im Frontend erschein dann folgender HTML-Code:

<section id="wysiwyg-block_9eea47954c5dcc9bc5d683656edc94f6" class="wysiwyg section-margin-padding" style="--margin-top: 99px; --padding-top: 11px; ">

Für dieses Beispiel habe ich im Backend nur Margin- und Padding-Top festgelegt. Die leeren Werte werden nicht berücksichtigt, was den Code lesbarer gestaltet.

Wir können nun also im Backend für jeden einzelnen Block Margin und Padding zuweisen. Gerade wenn man mit Hintergrundfarben oder SVG-Maps arbeitet, benötigt man immer wieder unterschiedliche Abstände zum direkten Nachbarblock oder auch variable Paddings für diesen eigenen Block.