Merge pull request #860 from plone/rafactor-volto-customization

Overhaul volto customization training

docs/volto_customization/blocks.md

@@ -7,21 +7,21 @@ myst:
     "keywords": "Volto, Training, Extend block"
 ---
 
-# Extend volto blocks
+# Extend Volto blocks
 
 There are various ways of extending Volto blocks.
-Component shadowing (see last chapter) is a very basic to customize components in volto.
+Component shadowing (see last chapter) is a very basic to customize components in Volto.
 But it comes with its own problems like keeping the shadowed component up to date with latest fixes and features of newer Volto versions.
 Instead of shadowing components we can:
 
 - Change the block-config
 - Extend blocks by adding new block-variations
 - Write add schemaEnhancer to modify blocks schema
 
-Let us first change the View of the teaser block which we already have in volto core by changing the block-configuration.
-In our addon `volto-teaser-tutorial` we will step by step extend each component that we have in volto core.
+Let us first change the View of the teaser block which we already have in Volto core by changing the block-configuration.
+In our add-on `volto-teaser-tutorial` we will step by step extend each component that we have in Volto core.
 
-The most simple customization is the View of the Teaser. The volto core teaser block configration (in `omelette/src/config/Blocks.jsx`) looks like:
+The most simple customization is the View of the Teaser. The Volto core teaser block configration (in `/frontend/core/packages/volto/src/config/Blocks.jsx`) looks like:
 
 ```js
   teaser: {
@@ -48,7 +48,7 @@ The most simple customization is the View of the Teaser. The volto core teaser b
 ```
 
 Every block in Volto has Edit and View components.
-You can customize these individually by either shadowing or directly in the confuguration (`index.js` of your addon) like this:
+You can customize these individually by either shadowing or directly in the confuguration (`index.js` of your add-on) like this:
 
 ```js
 import MyTeaserView from "volto-teaser-tutorial/components/Blocks/Teaser/View";
@@ -61,11 +61,10 @@ const applyConfig = (config) => {
 export default applyConfig;
 ```
 
-Of course we need to add our custom `MyTeaserView` component in our addon.
-From the root of the project that is `src/addon/volto-teaser-tutorial/src/components/Blocks/Teaser/View.jsx`:
+Of course we need to add our custom `MyTeaserView` component in our add-on.
+From the root of the project that is `packages/volto-teaser-tutorial/src/components/Blocks/Teaser/View.jsx`:
 
 ```jsx
-import React from "react";
 import TeaserBody from "@plone/volto/components/manage/Blocks/Teaser/Body";
 import { withBlockExtensions } from "@plone/volto/helpers";
 

docs/volto_customization/custom_block.md

@@ -9,9 +9,9 @@ myst:
 
 # Volto Weather Block (custom block)
 
-Let's create a volto block that will display weather information for Eibar. For this we can use <a target="_blank" href="https://open-meteo.com/">Open-Meteo API</a>. Open-Meteo is an open-source weather API and offers free access for non-commercial use. No API key required.
+Let's create a Volto block that will display weather information for Brasilia. For this we can use [Open-Meteo API](https://open-meteo.com/). Open-Meteo is an open-source weather API and offers free access for non-commercial use. No API key required.
 
-Creating a basic block in Volto involves several steps. Below, I'll outline the steps to create a Volto block that displays the weather forecast in Eibar.
+Creating a basic block in Volto involves several steps. Below, I'll outline the steps to create a Volto block that displays the weather forecast in Brasilia.
 
 1. **Setup Your Volto Project:** If you haven't already, set up a Volto project. You can use the instructions presented in [Installation -> Bootstrap a new Volto project](installation.md) section.
 
@@ -47,7 +47,7 @@ export const weatherBlockSchema = (props) => {
       location: {
         title: "Location",
         description:
-          "Enter the name of the location for which you want to display the weather (e.g., Eibar, Basque Country).",
+          "Enter the name of the location for which you want to display the weather (e.g., Brasilia, Brazil).",
         widget: "text",
       },
     },
@@ -65,12 +65,12 @@ import React, { useEffect, useState } from "react";
 
 const View = (props) => {
   const { data = {} } = props;
-  const location = data.location || "Eibar, Basque Country";
+  const location = data.location || "Brasilia, Brazil";
 
   const [weatherData, setWeatherData] = useState(null);
   useEffect(() => {
-    const latitude = data.latitude || "43.1849"; // Default Eibar latitude if no latitude is provided
-    const longitude = data.longitude || "-2.4716"; // Default to longitude if no longitude is provided
+    const latitude = data.latitude || "-15.7797"; // Default latitude if no latitude is provided
+    const longitude = data.longitude || "-47.9297"; // Default to longitude if no longitude is provided
 
     const abortController = new AbortController(); // creating an AbortController
 

docs/volto_customization/data_adapters.md

@@ -70,7 +70,7 @@ We can register our own dataAdapter in place of this by maintaining the same def
 In order for dataAdapters to work make sure the code of your block allows and consumes it in its implementation.
 ```
 
-The above Adapter gets consumed in <a target="_blank" href="https://github.com/plone/volto/blob/9667cf735e5c3e848de852d615941d98193e0a5e/src/components/manage/Blocks/Teaser/Data.jsx#L47">Data</a> component of teaser block.
+The above Adapter gets consumed in [`Data`](https://github.com/plone/volto/blob/9667cf735e5c3e848de852d615941d98193e0a5e/src/components/manage/Blocks/Teaser/Data.jsx#L47) component of teaser block.
 
 Let's register a new `dataAdapter` our config: