1. Upoznavanje sa 4D okolišem
Ovaj dio treba obuhvatiti osnovnu pripremu za rad u razvoju blokova.
1.1 Priprema za izradu blokova
Za početak, trebate postaviti sljedeće tehnologije:
•	Virtualna mašina / Linux: Trebat će vam Linux-based VM.
•	WordPress: WordPress treba biti instaliran i pokrenut, jer će se blokovi integrirati unutar njega.
•	MySQL: Instalirajte i konfigurirajte MySQL za potrebe baze podataka.
•	NGINX: NGINX kao web server za posluživanje vaše aplikacije.
•	PHP – PHP Memcached: Instalirajte PHP i potrebne PHP module, uključujući Memcached za keširanje.
•	Code Editor: Postavite editor koda poput VS Code-a za lakše kodiranje.
•	Github: Osigurajte da ste upoznati s korištenjem Git-a za verzioniranje vašeg koda i pohranjivanje na GitHubu.
1.2 Dokumentacija i 4D varijable
•	Obavezne klase: Koje klase morate koristiti u vašem codebase-u? Ako možete podijeliti te klase, mogu ih detaljnije objasniti.
•	W4D klase: Ako su u pitanju apstraktne ili osnovne klase koje čine temelj za prilagođene blokove, potrebno je objasniti kako se koriste.
•	Smjernice i željena struktura blokova: Ako imate specifične smjernice o strukturi blokova, to će pomoći u daljnjem razvoju.
1.3 Upoznavanje s dizajnom blokova i dizajn setova
•	Figma: Ako ste već koristili Figma za dizajn, mogu vam pomoći u povezivanju dizajna s kodom.
•	Upute i opća pravila: Ako postoje pravila ili smjernice o dizajnu, molim vas podijelite ih kako bi se vodilo prema tim principima.
•	Česta pitanja: Ako imate najčešće postavljana pitanja vezana uz razvoj blokova, slobodno ih podijelite, a ja ću ih obraditi.
1.4 Korisni linkovi i literatura
•	Imenovanje blokova i dokumenata: Ako imate specifične konvencije za imenovanje blokova, datoteka, i sl., podijelite ih sa mnom.
•	Imenovanje klasa i datoteka: Imenovanje klasa i datoteka važno je za čitljivost i održavanje koda. Ako imate smjernice za ovo, navedite ih.
•	BEM Konvencija: Ako slijedite BEM (Block Element Modifier) konvenciju za CSS, objasnit ćemo kako ju implementirati.
________________________________________
2. Proces izrade bloka
Ovaj dio treba obuhvatiti proces od početne ideje do implementacije bloka.
2.1 Definiranje specifikacija bloka
Prvo, potrebno je definirati što blok treba raditi:
•	Je li to statički ili dinamički blok?
•	Koji su parametri potrebni za blok (npr. tekst, slike)?
•	Hoće li blok komunicirati s bazom podataka? Ako da, kakve upite trebate?
Ako možete podijeliti primjere specifikacija blokova, mogu biti precizniji.
2.2 Razrada i plan izrade bloka
Ovdje ćete razraditi cijeli proces razvoja bloka:
•	Prototipiranje i mockupovi: Postoji li faza prototipa?
•	Radni tijek razvoja: Kako tim radi na blokovima? Razvija li se frontend prvo, pa backend?
________________________________________
3. Korak 1: Izrada front-end izgleda bloka
Ovdje ćemo opisati kako se razvija front-end za blok.
3.1 Izrada statičnog elementa HTML
Objasnite osnovnu strukturu HTML-a koju koristite za blok.
•	Koje HTML oznake se koriste?
•	Koristite li neki templating engine (npr. Twig)?
3.2 Stilizacija statičnog elementa SCSS
Objasnite kako stilizirate blok koristeći SCSS.
•	Kako primjenjujete stilove na blok?
•	Imate li ponovljivih komponenti ili klasa?
3.3 Optimizacija responzivnosti za manje uređaje
Kako osigurati da blok bude responzivan?
•	Koristite li media queries?
•	Koje korake poduzimate da testirate responzivnost?
________________________________________
Korak 2: Parametrizacija
Inicijalizacija
•	Dodavanje novog bloka u listu blokova: Kako registrirati blok u WordPress sustavu?
•	Dodavanje datoteke bloka u dokumentaciju plugina/teme: Kako povezati datoteke blokova u dokumentaciji plugin-a ili teme?
Parametrizacija jednostavnog bloka
•	Izrada dokumenta za setiranje bloka: Kako postaviti parametre za blok?
•	Izrada dokumenta za prikaz bloka: Kako će blok biti prikazan na stranici?
•	Composer: Ako koristite Composer za upravljanje ovisnostima, objasnit ćemo kako to raditi.
•	Testiranje: Kako testirati blokove u različitim uvjetima?
Parametrizacija složenog bloka
Za složene blokove trebate:
•	Views: Kako strukturirati prikaze blokova?
•	Forms: Ako blok uključuje forme, kako ih implementirati?
•	ForEach pristup: Kako iterirati kroz podatke u bloku?
•	Limitiranje broja renderanih elemenata: Kako kontrolirati broj elemenata koji se prikazuju?
________________________________________
Što mi treba od vas
Za detaljniji vodič, trebam sljedeće:
1.	Primjeri koda: Ako imate specifičan kod za jednostavne ili složene blokove, podijelite ga.
2.	Struktura WordPress-a: Kako registrirate blokove i koji su osnovni dijelovi vaše teme ili plugina?
3.	PHP ili JavaScript klase: Ako koristite određene klase za logiku blokova, podijelite ih.
4.	Dizajn ili mockupovi: Ako imate dizajne u Figmi ili neki drugi alat, mogu vam pomoći s njihovom implementacijom u kod.
5.	Testiranje: Kako testirate blokove? Imate li specifične alate za testiranje?
________________________________________
Neka vas ovo vodi u pravom smjeru. Slobodno mi se javite s detaljima koji su vam potrebni, i mogu vam pomoći s konkretnim primjerima i kodom!


This is the text you gave me yesterday as guides for a new employe who should do the new block task 
what code or information do you need to finalise this into a multi page document so even someone who doesn't know how to code can understand how blocks are made 

I will explain the process of making a block

First you start on your custom page and make the php file
mine is template-landing.php and it contains all the blocks that i am making (the static frontend part first) here is the file <?php

/**
 * Template Name: Landing page
 *
 * @package Web4D
 * @subpackage Theme
 * @since 1.0
 */

get_template_part( 'template-parts/layout/announcement-bar');

get_header(); ?>

<main>
<section>
        <div class="fluid-media">
            <div class="fluid-media__container fluid-media__container--video">
                <div class="fluid-media__video">
                    <iframe frameborder="0" height="100%" width="100%"
                        src="https://www.youtube.com/embed/LXb3EKWsInQ?autoplay=1&mute=1&loop=1&controls=0&showinfo=0&playlist=UU-DZ3A6Z3Y">
                    </iframe>

                </div>
                <div class="fluid-media__content fluid-media__content--dark">
                    <h2 class="spesh spesh--xl">Et voluptate repellat cum aspernatur consequatur</h2>
                    <p class="spesh spesh--xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus augue, varius et ante a, varius feugiat turpis. Sed dictum orci nec libero placerat, ullamcorper aliquet orci condimentum.</p>
                    <div class="fluid-media__cta">
                        <a href="#" class="btn btn__primary btn--big">Pogledajte ponudu</a>
                        <a href="#" class="btn btn__secondary btn--big">Pogledajte ponudu</a>
                    </div>
                </div>
            </div>
        </div>
    </section>






<section>
        <div class="fluid-media">
            <div class="fluid-media__container" style="background-image: url( <?php echo W4D_TEMPLATEURL; ?>/resources/assets/images/pexels-ekaterinabelinskaya-4744761.jpg)">
                <div class="fluid-media__content">
                    <h2 class="spesh spesh--xl">Et voluptate repellat cum aspernatur consequatur</h1>
                        <p class="spesh spesh--xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus augue, varius et ante a, varius feugiat turpis. Sed dictum orci nec libero placerat, ullamcorper aliquet orci condimentum.</h3>
                        <div class="fluid-media__cta">
                            <a href="#" class="btn btn__primary btn--big">Pogledajte ponudu</a>
                            <a href="#" class="btn btn__secondary btn--big">Pogledajte ponudu</a>
                        </div>
                </div>
            </div>
        </div>
    </section>


<section class= "section-padding hero-single--bg">
        <div class="container hero-single">
                <div class="hero-single__wrapper">
                    <div class="hero-single__lead">
                        <h2 class="spesh spesh--lg">Suspendisse eget velit venenatis, porta magna id, lobortis neque</h2>
                        <p class="spesh spesh--lg clr-base-80">Duis sollicitudin, quam in vulputate scelerisque, diam ipsum varius elit, pharetra laoreet ligula justo eget diam</p>
                        <a href="" class="btn btn__primary btn--big center">Pogledajte ponudu</a>
                    </div>

                <div class="hero-single__media">
                    <img class="hero-single__img" src="<?php echo W4D_TEMPLATEURL; ?>/resources/assets/images/lan_B/pexels-photo-6571678.jpg" alt="hero image">
                </div>

                </div>
                <div class="hero-single__elipse1"></div>
                <div class="hero-single__elipse2"></div>
            </div>
</section>


    <section class="section-padding">
        <div class="glide js-hero-carousel hero-carousel">
            <div class="glide__track" data-glide-el="track">
                <ul class="glide__slides">
                    <li class="glide__slide">
                        <div class="hero-carousel__bkg">
                            <picture>
                                <source media="(min-width:450px)" srcset="<?php echo W4D_TEMPLATEURL; ?>/resources/assets/images/slider-bkg.png">
                                <img src="<?php echo W4D_TEMPLATEURL; ?>/resources/assets/images/slider-bkg-xs.png" alt="">
                            </picture>
                        </div>
                        <div class="hero-carousel__content-wrapper">
                            <div class="container hero-carousel__content">
                                <span>veliko sniženje cijena</span>

                                <h2 class="special">Sofa i kutnih garnitura</h2>

                                <a href="#" class="btn btn__secondary btn--big">Pogledajte ponudu</a>
                            </div>
                        </div>

                    </li>
                    <!--<li class="glide__slide">
                        <div class="hero-carousel__bkg">
                            <picture>
                                <source media="(min-width:450px)" srcset="<?php /*echo W4D_TEMPLATEURL; */?>/resources/assets/images/slider-bkg.png">
                                <img src="<?php /*echo W4D_TEMPLATEURL; */?>/resources/assets/images/slider-bkg-xs.png" alt="">
                            </picture>
                        </div>
                        <div class="container">
                            <div class="hero-carousel__content">
                                <span>veliko sniženje cijena</span>
    
                                <h2 class="special">Sofa i kutnih garnitura</h2>
    
                                <a href="#" class="btn btn__secondary btn--big">Pogledajte ponudu</a>
                            </div>
                        </div>
                    </li>
                    <li class="glide__slide">
                        <div class="hero-carousel__bkg">
                            <picture>
                                <source media="(min-width:450px)" srcset="<?php /*echo W4D_TEMPLATEURL; */?>/resources/assets/images/slider-bkg.png">
                                <img src="<?php /*echo W4D_TEMPLATEURL; */?>/resources/assets/images/slider-bkg-xs.png" alt="">
                            </picture>
                        </div>
                        <div class="container">
                            <div class="hero-carousel__content">
                                <span>veliko sniženje cijena</span>
    
                                <h2 class="special">Sofa i kutnih garnitura</h2>
    
                                <a href="#" class="btn btn__secondary btn--big">Pogledajte ponudu</a>
                            </div>
                        </div>
                    </li>-->
                </ul>
            </div>

            <div class="glide__arrows" data-glide-el="controls">
                <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><?php esc_html_e('prev', 'web-4d-theme') ?></button>
                <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><?php esc_html_e('next', 'web-4d-theme') ?></button>
            </div>

            <div class="glide__bullets" data-glide-el="controls[nav]">
                <button class="glide__bullet" data-glide-dir="=0"></button>
                <button class="glide__bullet" data-glide-dir="=1"></button>
                <button class="glide__bullet" data-glide-dir="=2"></button>
            </div>
        </div>
    </section>
</main>

<?php get_footer(); ?>

and then you make an scss file in this directory themes/web-4d-theme/web-4d-theme/resources/sass/w4d/components and name it "_filename.scss" , and you have to forward it in index.scss and in the _filename.scss you need to do use "../abstract" as * like this ".account {
    display: grid;
    grid-template-columns: 1fr 348px;
    gap: 5.625rem;
    margin-bottom: 5rem;

    &-sidebar {

        &__user {
            padding: 1.25rem 1.625rem;
            color: var(--white);
            background-color: var(--base-color-80);
            border-radius: 0.25rem;
            margin-bottom: 1.5rem;

            &-email {
                font-size: 1.25rem;
                font-weight: 700;
                display: block;
                line-height: 2;
            }

            p {
                color: var(--white);
                margin-bottom: 0 !important;
            }
        }

        &__nav {
            margin-bottom: 0.75rem;

            &-link {
                padding: 0.75rem 1.5rem;
                display: block;
                border: 1px solid var(--base-color-40);
                background-color: var(--white);
                transition: 200ms ease-out;

                &--active {
                    color: var(--accent-color);
                    font-weight: 600;
                }

                &:hover {
                    background-color: var(--light-color-10);
                }

                &:not(:first-child) {
                    border-top: unset;
                }

                &:first-child {
                    border-top-left-radius: 0.25rem;
                    border-top-right-radius: 0.25rem;
                }

                &:last-child {
                    border-bottom-left-radius: 0.25rem;
                    border-bottom-right-radius: 0.25rem;
                }
            }
        }

        &__logout {
            padding: 0.75rem 1.5rem;
            color: var(--base-color-60);
            background-color: var(--light-color-10);
            display: block;
            border: 1px solid var(--base-color-40);
            border-radius: 0.25rem;
        }
    }
}"


Then you are done with frontend and you need to parametrize the block

step 1 /var/www/html/wp-content/plugins/4D-WPPlugin/includes/constants/w4d-blocks.php
add block here and add images to plugins/4D-WPPlugin/assets/img/block-screenshots and plugins/4D-WPPlugin/assets/img/block-screenshots

then make file in plugins/4D-WPPlugin/includes/admin/blocks/views 

Like this "<?php

defined('ABSPATH') || exit;

$pages      = W4D_LandingPageHelper::get_pages();
$page_id    = $_GET['id'] ?? 0;
$block_id   = $_GET['block_id'] ?? 0;
$block      = $pages[$page_id]['blocks'][$block_id] ?? [];
$block_name = $block['name'] ?? '';

$empty_text = 'Trenutno nemate postavljenih istaknutih kartica';
$btn_text   = 'Dodaj istaknutu karticu';

W4D_Block_Helper::display_block_header($block_name);
W4D_Block_Helper::display_block_tabs();
W4D_Block_Helper::display_block_tab_panels($block, $empty_text, $btn_text);

/* BLOCK SPECIFIC FUNCTIONS */
function display_table($settings, $url, $add_url, $block_type, $block_name): void {
	echo '
	<div class="table__title-container">
	    <h1 class="mb-0">Postavljanje istaknutih kartica</h1>
	    <a class="btn btn--primary" href="'.$add_url.'">Dodaj karticu <i class="icon-plus"></i></a>
	</div>

	<div id="table__highlight-cards" class="table">
		<div class="table__header">
			<div class="table__header-row">
				<div class="table__data">#</div>
				<div class="table__data">Naslov</div>
				<div class="table__data">Opis</div>
				<div class="table__data">Poveznica</div>
				<div class="table__data">Ikonica</div>
				<div class="table__data">Edit</div>
				<div class="table__data">Del</div>
			</div>
		</div>
		<div class="table__body">';
        foreach ($settings as $id => $row) {
            $title = htmlspecialchars($row['title'] ?? '-');
            $description = htmlspecialchars($row['description'] ?? '-');
            $image_src = wp_upload_dir()['baseurl'] . ($row['icon'] ?? '');
            $link = htmlspecialchars($row['link'] ?? '-');

            echo '
            <div class="table__row" data-index="'.$id.'">
                <div class="table__data">
                    <span class="table__data-number">'.$id.'</span>
                </div>
                <div class="table__data">'.$title.'</div>
                <div class="table__data">'.$description.'</div>
                <div class="table__data">'.$link.'</div>
                <div class="table__data">
                    <img class="table__data-icon-bg" src="'.$image_src.'" alt="Image Description">
                </div>
                <div class="table__data">
                    <a href="'.$url.'&block_setting_action=edit&setting_id='.$id.'"><i class="table__icon icon-pencil"></i></a>
                </div>
                <div class="table__data">
                     <i class="table__icon icon-bin" data-delete-type="setting" data-block-type="'.$block_type.'" data-block-name="'.$block_name.'" data-id="'.$id.'"></i>
                </div>
            </div>';
        }
        echo '
    </div>
</div>';
}

function display_block_general_settings($block): void {
	$block_id         = intval($_GET['block_id'] ?? '');
	$block_type       = $block['type'] ?? '';
	$overline_text    = $block['overline_text'] ?? '';
	$block_title      = $block['title'] ?? '';
	$button_text      = $block['button_text'] ?? '';
	$button_link      = $block['button_link'] ?? '';

	echo '
	<form id="block_settings_form" class="mb-80">';
		W4D_LandingPageHelper::get_global_block_settings_html($block);
		echo '
		<fieldset class="mb-40">
			<h3>Postavke bloka</h3>
			<div class="w4d-setting">
				<div class="w4d-setting__text">
					<p class="w4d-setting__name">Nadnaslov</p>
					<p class="w4d-setting__desc">Mali tekst iznad naslova koji obično sadrži do 4 riječi</p>
				</div>
				<input type="text" name="overline_text" value="' . $overline_text . '">
			</div>
			<div class="w4d-setting">
				<div class="w4d-setting__text">
					<p class="w4d-setting__name">Naslov</p>
					<p class="w4d-setting__description">Isti se prikazuje na vrhu stranice i tablici blokova</p>
				</div>
				<input type="text" name="title" value="'.$block_title.'">
			</div>
			<div class="w4d-setting">
				<div class="w4d-setting__text">
					<p class="w4d-setting__name">Tekst gumba</p>
					<p class="w4d-setting__description">Isti se prikazuje na vrhu stranice i tablici blokova</p>
				</div>
				<input type="text" name="button_text" value="'.$button_text.'">
			</div>
			<div class="w4d-setting">
				<div class="w4d-setting__text">
					<p class="w4d-setting__name">Poveznica</p>
					<p class="w4d-setting__description">Isti se prikazuje na vrhu stranice i tablici blokova</p>
				</div>
				<input type="text" name="button_link" value="'.$button_link.'">
			</div>	
		</fieldset>';
		W4D_LandingPageHelper::display_block_action_buttons($block_type, $block_id);
	echo '</form>';
}"

and then in forms if necessary  plugins/4D-WPPlugin/includes/admin/blocks/forms

<?php

defined('ABSPATH') || exit;

$pages      = W4D_LandingPageHelper::get_pages();
$url        = W4D_GlobalHelper::get_current_url();

$action     = $_GET['block_setting_action'] ?? '';
$page_id    = intval($_GET['id'] ?? '');
$block_id   = intval($_GET['block_id'] ?? '');
$setting_id = intval($_GET['setting_id'] ?? '');

$block      = $pages[$page_id]['blocks'][$block_id] ?? [];
$block_type = $block['type'] ?? '';

$title      = ($action === "add") ? "Dodavanje kartice" : "Uređivanje kartice {$setting_id}";
$settings   = ($action === "add") ? [] : ($pages[$page_id]['blocks'][$block_id]['settings'][$setting_id] ?? []);

$image_types = [
	'icon' => 'Ikonica',
];

echo '
<form id="block_settings_form" enctype="multipart/form-data">';
	W4D_LandingPageHelper::display_block_settings_header($title, $setting_id, $block_type, $action);
	echo '
    <div class="flex g-64">
    	<div class="w-50">';
			display_block_settings($settings, $action, $block_type);
		echo '
		</div>';

		if ($action === "edit" && !empty($settings)) {
			W4D_LandingPageHelper::display_image_previews($settings, $image_types);
		}
		echo '
    </div>
</form>';

function display_block_settings($settings, $action, $block_type): void {
	$title          = '';
	$description    = '';
	$link           = '';

	if ($action === "edit") {
		$title         = htmlspecialchars($settings['title'] ?? '');
		$description   = htmlspecialchars($settings['description'] ?? '');
		$link          = htmlspecialchars($settings['link'] ?? '');
	}

	echo '
	<h2>Postavke kartice</h2>
	<fieldset class="mb-40" data-block-type="'.$block_type.'">
		<div class="w4d-setting">
			<div class="w4d-setting__text">
				<p class="w4d-setting__name">Naslov</p>
				<p class="w4d-setting__desc">Kratki naslov koji se prikazuje ispod ikonice</p>
			</div>
			<input type="text" name="title" value="' . $title . '" placeholder="Besplatna dostava">
		</div>
		<div class="w4d-setting">
			<div class="w4d-setting__text">
				<p class="w4d-setting__name">Opis</p>
				<p class="w4d-setting__desc">Tekst koji se pojavljuje odmah ispod naslova</p>
			</div>
			<input type="text" name="description" value="' . $description . '" placeholder="Za narudžbe iznad 100 €">
		</div>
		<div class="w4d-setting">
			<div class="w4d-setting__text">
				<p class="w4d-setting__name">Link</p>
				<p class="w4d-setting__desc">Poveznica na koju vodi kartica</p>
			</div>
			<input type="text" name="link" value="' . $link . '" placeholder="https://...">
		</div>
			
		<div class="w4d-setting">
			<div class="w4d-setting__text">
				<p class="w4d-setting__name">Istaknuta slika</p>
				<p class="w4d-setting__desc">Rezolucija</p>
			</div>';
			W4D_LandingPageHelper::display_file_input('icon');
			echo '
		</div>
	</fieldset>';
}

and then display file plugins/4D-WPPlugin/includes/views/blocks
<?php

function w4d_display_highlight_cards($block): void {
	$highlight_cards = $block['settings'];

	if (empty($highlight_cards)) {
		return;
	}

    if(count($highlight_cards) > 4){
		$highlight_cards = array_slice($highlight_cards, 0, 4);
	}

    $overline_text = $block['overline_text'] ?? '';
    $block_title = $block['title'] ?? '';
    $button_text = $block['button_text'] ?? '';
    $button_link = $block['button_link'] ?? '';
    
	echo '
    <section '.W4D_Block_Helper::get_section_class_settings($block).'>
        <div class="container highlight-cards">
            <div class="highlight-cards__upper">';
                if ($overline_text) {
                    echo '<p class="spesh spesh--lg clr-base-80">'. esc_html($overline_text) .'</p>';
                }
                echo '
                <div class="highlight-cards__cta">
                    <h2 class="spesh">'. esc_html($block_title) .'</h2>';
                    if ($button_text) {
                        echo '<a href=' . esc_attr($button_link) . ' class="btn btn__primary btn--big center">' . esc_html($button_text) .'</a>';
                    }
                    echo ' 
                </div>
            </div>
            <div class="highlight-cards__wrapper">';
                foreach ($highlight_cards as $card ) {
                    $title       = $card['title'] ?? '';
                    $desc        = $card['description'] ?? '';
                    $icon_src    = wp_upload_dir()['baseurl'] . ($card['icon'] ?? '');
                    $button_link = $card['link']; 
                    echo '
                    <div class="highlight-cards__card">
                        <img src='. esc_attr($icon_src) .' alt="cart-icon">
                        <div class="highlight-cards__text">
                            <h3 class="spesh">'. esc_html($title) .'</h3>
                            <p class="spesh spesh--lg">' . esc_html($desc) . '</p>
                        </div>
                        <a href="' . esc_attr($button_link) . '"><i class="icon-arrow-right"></i></a>
                    </div>';
                }
                echo '
        </div>
    </section>';
}

and add it to composer.json and run "composer dumpautoload"