feat(PageBuilder): Section IDs

Set IDs on sections so that you can link to them using anchor tags

frappe/templates/includes/navbar/navbar_items.html

@@ -33,14 +33,16 @@
 {% else %}
 
 {% if parent %}
+{% set url = item.url or '' %}
+{% set url = url if url.startswith('#') else url | abs_url %}
 <li class="nav-item">
-	<a class="nav-link" href="{{ (item.url or '')|abs_url }}"
+	<a class="nav-link" href="{{ url }}"
 		{% if item.open_in_new_tab %} target="_blank" {% endif %}>
 		{{ _(item.label) }}
 	</a>
 </li>
 {% else %}
-<a class="dropdown-item" href="{{ (item.url or '') | abs_url }}"
+<a class="dropdown-item" href="{{ url }}"
 	{% if item.open_in_new_tab %} target="_blank" {% endif %}>
 	{{ _(item.label) }}
 </a>

frappe/templates/includes/web_block.html

@@ -11,7 +11,9 @@
 
 {%- if web_template_type == 'Section' -%}
 {%- if not web_block.hide_block -%}
-<section class="section {{ classes }}" data-section-idx="{{ web_block.idx | e }}"
+<section class="section {{ classes }}"
+	{% if web_block.section_id %} id="{{ web_block.section_id }}" {% endif %}
+	data-section-idx="{{ web_block.idx | e }}"
 	data-section-template="{{ web_block.web_template | e }}"
 	{% if web_block.add_background_image -%}
 		style="background: url({{ web_block.background_image}}) no-repeat center center; background-size: cover;"

frappe/website/doctype/web_page_block/web_page_block.json

@@ -9,6 +9,7 @@
   "edit_values",
   "web_template_values",
   "css_class",
+  "section_id",
   "column_break_5",
   "add_container",
   "add_top_padding",
@@ -103,11 +104,17 @@
    "fieldname": "background_image",
    "fieldtype": "Attach Image",
    "label": "Background Image"
+  },
+  {
+   "description": "IDs must contain only alphanumeric characters, not contain spaces, and should be unique.",
+   "fieldname": "section_id",
+   "fieldtype": "Data",
+   "label": "Section ID"
   }
  ],
  "istable": 1,
  "links": [],
- "modified": "2022-03-21 14:23:32.665108",
+ "modified": "2022-06-21 20:00:17.025272",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Web Page Block",