Stuck in slider block step in volto-hands-on training

[aryanbodke (ARYAN RAMAKANT BODKE)]

I am doing the volto-hands-on traininghttps://training.plone.org/voltohandson/introtoblocks.html, and am stuck from 9.2 Blocks anatomy step since a long time.

I am following the Volto-hands-on training step by step and I found out the problem is related to the config.js file.(Checked using console.log in config.js and got error in the console after doing inspect .

import { SliderBlockView, SliderBlockEdit } from "./components/";
import heroSVG from "@plone/volto/icons/hero.svg";
config.blocks.blocksConfig.slider = {
  id: "slider",
  title: "Slider",
  icon: heroSVG,
  group: "common",
  view: SliderBlockView,
  edit: SliderBlockEdit,
  restricted: false,
  mostUsed: true,
  sidebarTab: 1,
};

The desired output was to have a slider block option under "common" section

which i don't see in my website

I have done correctly upto edit config and site cleanup ..

How do i resolve the problem caused due to config.js file

[aryanbodke (ARYAN RAMAKANT BODKE)]

Any help would be appreciated.. Or else I can start over again..

[stevepiercy]

This training has not been updated in years and will be archived soon.

Archive PloneConf 2024, prepare for PloneConf 2025

The list of trainings to keep are current.

That said, someone might offer help to resolve this issue.

[kittauri (Thomas Mersch)]

It seems that you put some stuff into the wrong file, i guess ? Because for me its working. Let me show you where i put the stuff in. I am using Plone 6.1 with Volto 18. We will create a Custom Block called "Slider", just like in the Guide.

At the end of this long post, i added a screenshot (Screenshot 5) with all files etc.

I called my Project just "Demo Plone" in cookieplone, so the project files are in /frontend/packages/volto-demo-plone/.

So we need three steps:

• Create the Block
• Prepare import paths for Block-Views
• Register Block in Blocks settings

Create the Block

Note: All files and paths are in /frontend/packages/volto-demo-plone/

Create the Slider-Block

Now we create the View for our Block and also a View for the Edit-Mode. To keep it simple, we just print out a text saying we are in View-Mode or Edit-Mode.

1. Create a folder "Blocks" in /src/components/

2. Create a folder "Slider" /src/components/Blocks/

3. In the new "Slider" folder, you cerate two files with following content:

   • Edit.jsx and
   • View.jsx

   Edit.jsx:

   import React from "react";
   
   const Edit = (props) => {
       return <div>I'm the Slider edit component!</div>;
   };
   
   export default Edit;
   

   View.jsx:

   import React from "react";
   
   const View = (props) => {
       return <div>I'm the Slider view component!</div>;
   };
   
   export default View;
   

Prepare import paths for Block-Views

To keep the paths for importing components clean, we use index files in Volto so that we have a central location from which we can import components into our project without having to enter the full path each time.

1. Create a file called index.js in /src/components/ with follwoing content:

   index.js:

   import SliderBlockEdit from "./Blocks/Slider/Edit";
   import SliderBlockView from "./Blocks/Slider/View";
   
   export { SliderBlockEdit, SliderBlockView };
   

   Note: If we want to import this now, we can just do
   import { SliderBlockView, SliderBlockEdit } from "./components/";
   instead of typing the full path ./components/Blocks/Slider

   Warning: There is also a index.js in /src/ which is a different
   index.js than the one we created! (See Screenshot 1)

   Screenshot 1)

   

Register Block in Blocks settings

We need to configure the project to make it aware of a new block by adding it to the object configuration.

1. Add the imports at the beginning of the index.js in /src/

   import { SliderBlockView, SliderBlockEdit } from "./components/";
   import heroSVG from "@plone/volto/icons/hero.svg";
   

2. Add the Block-Configuration for our new Block in the applyConfig()-fucntion in the index.js in /src/

   config.blocks.blocksConfig.slider = {
       id: "slider",
       title: "Slider",
       icon: heroSVG,
       group: "common",
       view: SliderBlockView,
       edit: SliderBlockEdit,
       restricted: false,
       mostUsed: true,
       sidebarTab: 1,
   };
   

It should now look like Screenshot 2)

Screenshot 2)

So finally we have our new Block You may need to restart the frontend, so the development server detects the new files. Also check if you saved the files.

Screenshot 4) Edit-Mode of our Slider-Block

All-in-one Screenshot

Screenshot 5)

I hope i could help you with this.

[aryanbodke (ARYAN RAMAKANT BODKE)]

Thank you, i will try to follow up with your solution.

[aryanbodke (ARYAN RAMAKANT BODKE)]

It worked, thank you