Flynt Component Data Access and Custom Component in WP Edit Page

[rajpatel2435]

Hi everyone,
@timohubois @aaronmeder
I have a couple of questions regarding Flynt and WordPress custom components:

1. Accessing Data Value Inside functions.php Directly in script.js

I'm working with a Flynt component and I need to pass a data value from the functions.php file directly into the script.js file of the same component. What would be the best way to achieve this? Any examples or best practices would be greatly appreciated.

2. Using Custom Component Inside WordPress Edit Page

I have created a custom component in Flynt and I want to use this component inside the WordPress edit page. How can I achieve this? Are there any specific hooks or functions I should be aware of to make this work seamlessly?

Thank you for your help!

Best regards,
Raj

[timohubois]

@rajpatel2435

1. Accessing Data Value Inside functions.php Directly in script.js

To passing data you can take a look at the ”SliderImages“ component. The data is prepared inside the functions.php, will rendered as json inside the index.twig and then used inside the script.js file.

---

2. Using Custom Component Inside WordPress Edit Page

What is exactly the purpose? Do you want to render an other component or do you want some like a static component?

[rajpatel2435]

Hi @timohubois

Actually I have made component called latestNews and I want to add this component just like another inbuilt component in page

is there any way we can do that?

Another Question:

I want to render partials file inside from component in page or post? is there ay way I can access that?

Thanks

one more question I am having performance issue on mobile for this site?

is there any suggestion from your side?

https://wordpress-1233981-4407119.cloudwaysapps.com/

[timohubois]

@rajpatel2435

Actually I have made component called latestNews and I want to add this component just like another inbuilt component in page

If your “latestNews” component has the same structure as the default components, you can make your component available as flexible layout by adding it to the field groups (inc > fieldGroups) e. g. for pages: https://github.com/flyntwp/flynt/blob/084dabd4221afda28809eb81dbfc0f4d1cacee72/inc/fieldGroups/pageComponents.php

I want to render partials file inside from component in page or post? is there ay way I can access that?

There are several ways to do this. You can for example prepare the data and directly render the partial or you create a wrapper component and render it via the renderComponent function as described inside the Page Templates section.

one more question I am having performance issue on mobile for this site?

I took a quick look and noticed some areas for improvement. First, avoid large network payloads and address the Largest Contentful Paint (LCP) element. For example, optimizing your LCP content can significantly enhance performance.

Lighthouse indicates issues with load delay and load time. These could stem from server problems, such as delays in sending data, which can have multiple causes. Nevertheless, you should examine and optimize your images where possible. Using Pingdom, I found that some images are 0.5 MB or larger, with some reaching 2.4 MB. These should be optimized.

Incorporating the "lazysizes" library (used in Flynt) can help. Alternatively, using HTML markup instead of images to display content can improve performance. However, for hero content and images, I recommend not using lazy loading images.

For preloading, use HTTP headers if possible (though this may not work with caching plugins), or add preload links early in the header element rather than within the component markup. Note that preloading should be used sparingly and only for the most critical assets.

Additionally, lazy loading videos and other assets like external JavaScript should be done just before they are needed by the visitor. I believe @aaronmeder recently wrote about PageSpeed and suggested some changes. Did he?

Hope this helps?

[rajpatel2435]

Hi @timohubois

For example to render the partial on page. How can I do that?

This is the structure of my component.

I want to render the _bonuses.twig file on page /post how can i add that in page.php?

Thanks

[timohubois]

@rajpatel2435 if you want to render your component HomePage inside page.php I would prefer to do it via twig using the renderComponent function, like here:

flynt/templates/index.twig

Line 4 in 084dabd

{{ renderComponent('GridPostsArchive', {posts: posts}) }}

You can also take a look at the Page Templates section of the readme.md from Flynt.

For partial rendering I would suggest to do this inside your HompePage component itself using the twig include tag. An example can be found inside the Navigation Main component.

If you want to render _bonuses.twig only at specific pages, you can do to the checks for this specific page inside the functions.php of your HompePage component and extend its data:

functions.php of your HompePage component:

add_filter('Flynt/addComponentData?name=HompePage', function (array $data): array {
    $data['shouldRenderBonuses'] = true; // Add your condition to render _bonuses.twig here.
    return $data;
});

And then inside the index.twig of your HompePage component:

{% if shouldRenderBonuses %}
  {% include 'Partials/_bonuses.twig' %}
{% endif %}

Notice: This is just one way. Depending on the use case other solutions may also possible.

[rajpatel2435]

Hi @timohubois

Thank you so much for your response.

If you don't mind, I have another query for this page

I am redering the image in blockImage as first component of page but instead of displaying in first section of image it is displaying in the bottom of page. AM I missing something ?
https://wordpress-1233981-4407119.cloudwaysapps.com/reviews/

Could you please help me with this?

Thanks

[timohubois]

@rajpatel2435 I can't find any ”Block: Image“ at the the url: https://wordpress-1233981-4407119.cloudwaysapps.com/reviews/

If its a normal page and you have not changed any the file page.twig from the templates folder should be used for rendering.

Inside this file you find a loop for rendering the components:

flynt/templates/page.twig

Line 4 in 084dabd

{% for component in post.meta('pageComponents') %}

The order of the components should 1:1 the same as inside the backend.

[rajpatel2435]

Hi @timohubois

Scroll down to page and you will see

and I have the same page.twig structure

[timohubois]

@rajpatel2435 I see the image inside a BlockWysiwyg component and inside a BlockImage. The html source code of the rendered page also does look a little bit uncommon – maybe this is related to some shortcodes (would not suggest to them directly inside BlockWysiwyg components). Have you tried to create a new page with only one BlockImage component?

[rajpatel2435]

Hi @timohubois @aaronmeder

I tried to create single page using image it works but when I use the shortcode inside editor it does not seems work.

is there any way that help me to solve this issue?

Thanks

[timohubois]

@rajpatel2435 thanks for the feedback. As written before I would not suggest to use a shortcode directly inside BlockWysiwyg components. You can try to create wrapper component (BlockShortcode) for shortcodes and then render them inside this component.

However, without knowing what the shortcode does or should do it is really hard to help and from the distance it looks like that the shortcode does some that breaks your page.

[rajpatel2435]

Hi @timohubois

For that BlockShortCode do we have any inbuilt compoent that we can copy paste? or give me idea for wrapper component code looks like means structure for the wrapper index.twig file?

Thanks

[timohubois]

@rajpatel2435 there is no build in component to render a shortcode. At one of our Premium Components (Form: Contact Form 7) we currently render a shortcode.

You can take a look at the timber documentation about shortcodes here: https://timber.github.io/docs/v2/guides/shortcodes/

Or use the shortcodes filter inside your twig file: https://timber.github.io/docs/v2/guides/twig-filters/#shortcodes

[rajpatel2435]

Hi @timohubois @aaronmeder

'

Just to be make sure here I am defining my shortcodes in correct way. could you please check this? because may be this thing vreates problem when it comes to rendering the shortcode in frontend?

function get_all_state_info_logo_text($atts){

$cahaced_data_from = get_transient('get_state_data_full_new_data_');


    // Initialize arrays for each part
    $west = [];
    $midwest = [];
    $north = [];
    $south = [];


foreach($cahaced_data_from as $data){

    $state_id=$data['id'];

   $data['logo'] = get_field('state_logo', $state_id);
  
    $data['review_link']=get_field('review_sb',$state_id);
    $data['state_name']=get_field('state_name',$state_id);
    $data['which_part']=get_field('which_part',$state_id);



    switch ($data['which_part']) {
        case 'west':
            $west[] = $data;
            break;
        case 'midwest':
            $midwest[] = $data;
            break;
        case 'north':
            $north[] = $data;
            break;
        case 'south':
            $south[] = $data;
            break;
    }



};

$html = '<div class="max-w-[1574px] m-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-4 text-[#C4D3DF]">';

// Helper function to generate column content
function generate_column($title, $data) {
    $content = '<div class="col-span-1 p-4"><div class="text-3xl">' . ucfirst($title) . '</div>';
    foreach ($data as $item) {
        $content .= '<div class="flex gap-4 items-center py-3">';
        $content .= '<div><img class="h-10 w-10 rounded-full object-cover" src="' . $item['logo'] . '" /></div>';
        $content .= '<div><a href="' . $item['review_link'] . '" class="text-xl font-extrabold underline" style="text-decoration-line: underline !important;">' . $item['state_name'] . '</a></div>';
        $content .= '</div>';
    }
    $content .= '</div>';
    return $content;
}

// Generate columns
$html .= generate_column('West', $west);
$html .= generate_column('Mid West', $midwest);
$html .= generate_column('North', $north);
$html .= generate_column('South', $south);

// Close HTML string
$html .= '</div>';

// Echo the generated HTML
echo $html;

}

add_shortcode('display_all_state','Flynt\Components\SbHubShortcode\get_all_state_info_logo_text');