Area List Block

With the Area list Gutenberg block (immomakler/single-data-areas) you output the area figures of a property as a two-column definition list with label and value. Unlike the Property Data block, which outputs all key data at once, the Area list is limited to the area fields — and you decide per block instance which of them appear. Its structure and style options match the Price list block.

Area list on the frontend with living area and lot size

Requirements

WordPress with the Gutenberg editor
WP-ImmoMakler (any edition)
A property in context: The block reads the areas of the property currently being viewed. Place it in a Site Editor template for the Property post type or on a template page — see Create Single Page. On an ordinary page without a property, the block stays empty.

Inserting the block

Open a template or template page

Open the template for the Property post type in the Site Editor (requires a block theme) or the template page on which the detail view of your properties is built.
Insert the block

Click the + icon and search for Area list, or navigate to the Widgets category. Insert the block.
Select fields

In the sidebar under Fields, switch off the area fields that should not appear in this list. All fields are enabled by default.
Check the preview and save

In the editor, the block immediately shows a live preview using the data of the preview property. Save the template — the areas of the respective property appear on the actual property page.

Options

In the sidebar (Settings tab) you will find the following panels:

Panel	Option	Default	Description
Settings	Show labeling	Yes	Displays the labels of the area fields in a separate column next to the values. Switched off, the block outputs only the values, one below another.
Fields	one toggle per area field	all Yes	Determines which area fields this block instance may output at all (full list below).
Table cells	“Innenabstand (oben / rechts / unten / links)”	10 / 3 / 3 / 3 px	Padding inside each cell of the list (top / right / bottom / left).
Table cells	Border	None	Divider line between the rows: None, Continuous, Dashed, Dotted, or Double. The following three options only appear once a border has been selected.
Table cells	Border width (px) / Border color	1 px / theme default	Thickness and color of the divider lines.
Table cells	“Trennlinien: Außenabstand (px)”	0	Extends the divider lines outward beyond the block’s padding.
Table cells	“Vertikale Trennlinie zwischen Spalten”	No	Additionally draws a vertical line between the label and value columns, in the style of the selected border.
Labeling	“Spaltenbreite (%)”	55	Width of the label column; the value column takes up the rest.
Labeling	“Schriftgröße (px)” / “Schriftgewicht” / Text color	Theme default	Font size, font weight, and color of the labels.
Values	“Textausrichtung”	Left	Alignment of the values in their column: Left or Right.
Values	“Schriftgröße (px)” / “Schriftgewicht” / Text color	Theme default	Font size, font weight, and color of the values.

In addition, the block supports the standard WordPress options for padding and margin in the Design tab.

Available area fields

The Fields panel lists the area fields in the order in which WP-ImmoMakler also outputs them:

Label	Key
Living area	`wohnflaeche`
Usable area	`nutzflaeche`
Office area	`bueroflaeche`
Total surface area	`gesamtflaeche`
Retail space	`ladenflaeche`
Storage area	`lagerflaeche`
Sales area	`verkaufsflaeche`
Commercial space	`gewerbeflaeche`
Open space	`freiflaeche`
Office space	`bueroteilflaeche`
Administrative space	`verwaltungsflaeche`
Catering area	`gastroflaeche`
Attic space	`dachbodenflaeche`
Cellar area	`kellerflaeche`
“Balkonfläche”	`balkonflaeche`
Terrace area	`terrassenflaeche`
Balcony/Terrace Area	`balkon_terrasse_flaeche`
Yard area	`gartenflaeche`
Other area	`sonstflaeche`
Rentable space	`vermietbare_flaeche`
Heatable area	`beheizbare_flaeche`
“Fläche (Freitext)”	`flaeche_freitext`
“Wohnfläche (Freitext)”	`wohnflaeche_freitext`
“Grundstücksfläche (Freitext)”	`grundstuecksflaeche_freitext`
Area from	`flaechevon`
Area up to	`flaechebis`
Divisible from	`teilbar_ab`
Lot size	`grundstuecksflaeche`
Window facade	`fensterfront`
“Fensterfront (m²)”	`fensterfront_qm`
Property front	`grundstuecksfront`
Height of the hall	`hallenhoehe`
Cubature	`kubatur`
Utilization factor	`ausnuetzungsziffer`
“Grundflächenzahl (GRZ)”	`grz`
“Geschossflächenzahl (GFZ)”	`gfz`
“Baumassenzahl (BMZ)”	`bmz`
“Bruttogrundfläche (BGF)”	`bgf`

Styling via CSS

Every row of the list carries a class following the pattern immomakler-data-{key}, so you can style individual area fields in your theme in a targeted way:

/* List */
.wp-block-immomakler-single-data-areas .immomakler-single-data-areas__list { }

/* Label and value of a specific field */
.wp-block-immomakler-single-data-areas dt.immomakler-data-wohnflaeche { }
.wp-block-immomakler-single-data-areas dd.immomakler-data-wohnflaeche { }