Added editorconfig and option to set section layout.

.editorconfig

@@ -0,0 +1,23 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[*.json]
+indent_style = tab
+indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false
+

.gitignore

@@ -9,7 +9,3 @@ deploy.sh
 deploy-*.sh
 
 # Custom
-assets/css/**/*.min.css*
-assets/css-old/**/*.min.css*
-components/**/*.min.css*
-config.js

README.md

@@ -2,16 +2,22 @@
 
 Install required modules:
 
-```
+```sh
 npm install
 ```
 
 Run development environment:
 
-```
+```sh
 npm start
 ```
 
+## How it works
+
+The project runs `gulp` and `browsersync` beyond the scenes.  
+Each change in template, styling or script files will reload the page. The idea is to have a comfortable development
+environment.
+
 # Block Structure
 
 You will find all the block files in `/src` folder.
@@ -35,26 +41,31 @@ We have a “blocks system”, means you will have to follow strict rules and us
 
 ## Template Layout & Data
 
-### Handlebars
-
-In this project, [Handlebars](https://handlebarsjs.com/guide/ "What is Handlebars") used as a template engine.
-
-All the template layout must be in a single `*.hbs` file that located in `/src` folder.
-
 ### Data
 
 You will find multiple `*.json` files in `/data` folder after the first run of `npm start`.
 
 These files are used as data sources in layout. By reviewing these files you can understand what parameters you have and
-how the data is stored. Don't change or edit these files - use the data as it is.
+how the data is stored. 
 
 There are multiple data sources since the block can be reused in different situations with different data. We have to
 make sure that the block is always rendered properly.
 
+> Don't change or edit these files - use the data as it is!
+
+### Handlebars
+
+[Handlebars](https://handlebarsjs.com/guide/ "What is Handlebars") used as a template engine in the project.
+
+All the template layout must be in a single `*.hbs` file that located in `/src` folder.
+
+> Use the data that is available in `/data` folder.  
+> Avoid using any kind of "freestyle" input/content. Your template file must contain only HTML tags and Handlebars parameters.
+
 ### Static Media Files
 
-Use the `/src/images` folder in case you need to upload images or video files to the template. These files will be
-available by the next URL: http://localhost:3000/images/${filename}
+Use the `/src/images` folder in case you need to upload images or video files to the template.  
+These files will be available by the next URL: http://localhost:3000/images/${filename}
 
 ### Class Naming Convention
 
@@ -69,10 +80,10 @@ min-width: ...px).
 
 ### CSS Units
 
-Use `rem` units instead of pixels. `1rem = 16pixels`.
-
-No need to use rem in situations of `1px` or `2px`. (usually used for borders width).
+Use `rem` units instead of pixels.  
+For example, `1rem = 16pixels` depends on project.
 
+No need to use rem in situations of `1px`, `2px` or `3px`. (usually used for borders width).  
 It's important to mention that the block is "elastic". By using `rem` units we are able to scale the layout and keep the
 aspect ratio.
 
@@ -81,7 +92,7 @@ aspect ratio.
 The development environment includes CSS rules of the original project. This is including fonts, CSS variables,
 container logic etc...
 
-The CSS file is embedded in served HTML.
+The CSS file is already embedded in served HTML.
 
 # JavaScript
 
@@ -97,6 +108,11 @@ The lib is included in the project and ready for use. Test with `window.Swiper`
 
 Use development toolbar to switch between data sources.
 
+## Hover/Focus States
+
+Make sure all "clickable" elements have `&:hover` & `&:focus` states in CSS rules.  
+This might be related to links, buttons or any other interactive elements.
+
 ## Responsiveness
 
 Make sure the layout is rendered correctly on all standard breakpoint size:
@@ -123,6 +139,5 @@ Compare the final result with provided screenshots.
 You can use
 available [Browser Extensions](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)
 or any other tool/approach that you're familiar with.  
-
 The idea is to have "pretty close" result to requested design.
 

layouts/page-container.hbs → layouts/alignfull.hbs

@@ -7,9 +7,7 @@
 {{> (include_partial "layouts/partials/toolbar") }}
 
 <main>
-    <div class="container">
   {{> (include_block_template) }}
-    </div>
 </main>
 
 {{> (include_partial "layouts/partials/scripts") }}

layouts/page.hbs → layouts/container.hbs

@@ -7,7 +7,9 @@
 {{> (include_partial "layouts/partials/toolbar") }}
 
 <main>
+  <div class="container">
     {{> (include_block_template) }}
+  </div>
 </main>
 
 {{> (include_partial "layouts/partials/scripts") }}

package-template.json

@@ -0,0 +1,10 @@
+{
+  "name": "template-block",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "component-dev"
+  },
+  "devDependencies": {
+    "axe-web-component": "git+https://git.devdevdev.life/roman/axe-web-component.git#master"
+  }
+}

server.js

@@ -18,13 +18,16 @@ import fs from "fs/promises";
  * Constants
  */
 
-const isDev = config.get('mode') === 'development';
+const isDev = config.has('mode') && config.get('mode') === 'development';
 const modulePath = 'node_modules/axe-web-component/';
 const projectDir = isDev ? '' : modulePath;
 console.log('Development Mode:', isDev);
 
 const sass = gulpSass(dartSass);
 
+buildStyleFiles()
+buildScriptFiles()
+
 /**
  * Init server
  */
@@ -68,7 +71,9 @@ app.get('/', async (req, res) => {
     include_block_template: (path) => 'src/' + config.get('blockName') + '.template',
   }
 
-    res.render('page-container', data);
+  const baseView = config.has('baseView') ? config.get('baseView') : 'container';
+
+  res.render(baseView, data);
 });
 
 app.use(express.static('src'));

src/scripts/template.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","Swiper","jQuery"],"mappings":"CAAA,SAAWA,GAEPC,QAAQC,IAAI,UACZD,QAAQC,IAAI,WAAYF,GACxBC,QAAQC,IAAI,WAAYC,OAAOC,QAJnC,CAMGD,OAAOE","file":"template.min.js","sourcesContent":["(function ($) {\n\n    console.log('Ready!');\n    console.log('jQuery =', $);\n    console.log('Swiper =', window.Swiper);\n\n})(window.jQuery);"]}
+{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","Swiper","jQuery"],"mappings":"CAAA,SAAWA,GAETC,QAAQC,IAAI,UACZD,QAAQC,IAAI,WAAYF,GACxBC,QAAQC,IAAI,WAAYC,OAAOC,QAJjC,CAMGD,OAAOE","file":"template.min.js","sourcesContent":["(function ($) {\n\n  console.log('Ready!');\n  console.log('jQuery =', $);\n  console.log('Swiper =', window.Swiper);\n\n})(window.jQuery);\n"]}