frontity / frontity.org

The Frontity project of the frontity.org site

📣 Frontity Framework is not actively maintained!

Frontity Framework is not under active development anymore. Pull requests and issues are not being actively reviewed. For more details, please see the blog post.

The team is now working on the WordPress Interactivity API. This will unblock the same UX Frontity framework enabled but directly in WordPress Core, fully compatible with the new Site Editor.

If you are interested in becoming a maintainer and continuing the development of the framework please do get in touch with one of the developers or let us know in this community thread.

Thanks!

The React Framework for WordPress

Frontity is the easiest way to create amazing websites using WordPress and React

Get started | Try demo in your browser | Learn Frontity

What is Frontity Framework?

Frontity is a free and open source framework for building WordPress websites based on React. It strips away the complexity that entails connecting both WordPress and React, and gives you a big head start by providing many of the most common queries already built in. In short, you can spend the bulk of your time on the development requirements of the project (e.g. the theme) and less time on setting up the project or worrying about tooling and configuration.

Frontity's unique approach, with its ease of use and extensibility pattern (similar to that of WordPress itself), offers distinct advantages over other similar React frameworks:

» It's 100% focused on WordPress

Each part of the framework has been simplified and optimized to be used with WordPress. This means the number of concepts that you as a developer need to learn are minimal. No complex configuration is necessary to get started, and the queries to the APIs that deliver the content are pre-configured for the things that developers most frequently need.

» It's opinionated

Frontity has its own state manager and CSS-in-JS solution. Thanks to that developers don't have to figure out how to configure these tools, or learn other technologies such as Redux or GraphQL.

» It's extensible like WordPress

Frontity powers a very flexible extensibility pattern similar to that of WordPress itself. To add new functionality or expand the capabilities of Frontity, you can use any of the existing Frontity and npm packages without having to build them from scratch.

Moreover, Frontity packages (including themes) can be activated and deactivated without code changes and are reusable across projects, helping reduce both development and maintenance times.

» It's rendered dynamically

In Frontity the HTML is rendered dynamically by a Node.js server or a serverless service. This means the HTML does not have to be rebuilt each time the content is edited or new content is published.

Because of its dynamic approach, Frontity provides a great power and reliability when it comes to frequent and real-time content updates, making it a great fit for those projects with content that might change rapidly or that is expected to grow over time.

See the About Frontity page in the docs to learn more. 🤓

How does Frontity work?

In a Frontity project, WordPress is used as a headless or decoupled CMS, just for managing the content. Frontity uses data from the WordPress REST API and generates the final HTML that is displayed in the browser using React.

With Frontity you still use your WordPress dashboard to edit and create content in exactly the same way that you are accustomed to. As you make changes content is automatically updated in your Frontity site, just as it is when using a traditional WordPress theme.

Frontity apps require both a Node.js server and a WordPress server (PHP) to run on. And there are two main Frontity Modes (architectures or configurations):

• Decoupled Mode
• Embedded Mode

Why a different Node.js server?

React is a JavaScript library. In order to generate HTML for site visitors or for Google, the server needs to be able to run JavaScript as well.

In theory a PHP server can send an empty HTML file with the JavaScript files included and the visitor will see the page after the JavaScript has loaded. However, this is not a good user experience and it is certainly not recommended if your site needs to be SEO friendly and to rank in search engine listings.

Frontity is prepared to be hosted either in a regular Node.js server or in serverless services. That makes it super cheap and infinitely scalable.

The Architecture page of the docs explains how Frontity works in detail. 🏗

Getting started

You'll need a WordPress installation and Node.js. See the Requirements page for more information.

If you can't wait to see what Frontity can do, head over to the Quick Start Guide.

If you're new to Frontity, we recommend that you check out the step-by-step tutorial, which will guide you through the fundamentals of building and deploying your first Frontity website.

Documentation

The Frontity documentation is distributed across three separate sites:

1. docs.frontity.org is the generic documentation. As well as theoretical information, such as Frontity Architecture and Core Concepts, you can find many practical guides here.
2. api.frontity.org is the API reference. This is where you can find detailed technical descriptions for the CLI, and for the packages and plugins available in Frontity Framework.
3. tutorial.frontity.org is the introductory step-by-step guide. It's designed to provide you with a deep and solid understanding of web development using Frontity.

More learning resources, such as videos and example projects, can be found in the Learn Frontity page. 📚

Community

For general help using Frontity, please refer to the documentation and the available learning resources. If you can't find an answer in these resources you can always check out the Frontity Community Forum, which is packed full of answers and solutions to all sorts of Frontity questions.

The community forum is a great place to ask questions, help fellow users build Frontity apps, and share your projects. It's also where you can keep track of the work done for the framework, join feature discussions, and collaborate on building Frontity itself.

Frontity is dedicated to a positive and inclusive community experience for everyone. Read through this guide to learn more about the forum guidelines, how it is organized, and how to get the most out of it.

Other channels

In addition to the community forum, Frontity has other channels where you can find out more information about the project, join in discussions about it, and also get involved:

• GitHub: for bug reports and code contributions.
• YouTube channel: learn from Frontity videos and playlists.
• Newsletter: designed to inform you about the latest product updates, learning resources and community news surrounding Frontity Framework.
• Twitter and the blog are also pretty good places if you're looking for news, case studies, and other updates.

Showcase

Want to know who's using Frontity? Need some inspiration for your project? The community is always building amazing projects with Frontity, discover some of them in the Showcase page.

Contributing

There are different ways to support the project and get involved. These are a few things that are always welcome:

• Testing new features
• Creating themes/packages and share them on npm or GitHub
• Creating educational content like blogs, videos, courses
• Improving the documentation
• Helping the community

See the Contributing section of the docs for more information on how to contribute. ✨

License

Frontity is licensed under the terms of the Apache 2.0 license.

frontity.org's Issues

Author links don't work [1pt]

Expected behavior
When you click on an author link in https://frontity.org/blog/, you should navigate to an author page.

Observed behavior

• If you navigate from other page (e.g. from https://frontity.org/blog/, doing clik on an author link) it gets stuck on a loading screen and the author page never appear.

• If you enter directly to an author link (e.g. https://frontity.org/blog/author/reyes/), you will se a 404 page.

Possible solution
The problem appears after setting a custom structure for permalinks in WordPress. It also changes the author links and therefore the author handler is not executed.

A way to fix this would be to add an authorBase option to the wp-source package (here) as described in this FD: https://community.frontity.org/t/add-authorbase-option-to-wp-source-package/1607

Newsletter

Description

We're going to have a reusable block named "Newsletter" that could be placed anywhere in the web. Right now, it's only used in the footer, so we should add it there.

In order to implement this, we are going to reuse the logic of our current newsletter form. Bear in mind:

• The design is different.
• We are not including the role field.
• We have to add the logic for the afterNewsletter as well.

Logic

• In order to connect the newsletter form with services like Vero, Amplitude or Analytics, we are using Google Tag Manager to manage all of them, so we have to make sure to send the proper information there (this is already done in the repo of the current newsletter).

• There will be four different status of the form:

Normal
The status before the user starts interacting with it.

Active
Once the user clicks on the input field, the border color should change and use state.theme.colors.frontity.

Wrong
When the user try to submit something that is not an email, or they haven't check the Privacy Policy, we should standard error like the current frontity.org. Something like this:

Success
When the email has been submitted correctly, we should change the form for a "Thanks message". Something similar to what next.js is doing.

Before submitting:

After submitting:

Possible solution

• For linking the form with Google Tag Manager, we should reuse the logic of the current newsletter.
• We'll need to process the className newsletter and create a new React component with the content found there. This processor would work different than the other ones, as we don't have to keep the content structure. We could use each different element of it to populate the component.

HTML

Our first idea about the Gutenberg HTML of the newsletter group is the following:

• The inner blocks for grouping editable content:

//Name of the editable content
<h6>Placeholder email</h6>

//HTML of the editable content
<p>Enter your email</p>

We could create a grouping div for them if you feel it would be easier. We are using <h6> to specify in the Gutenberg editor which content are we changing in each paragraph, but it should be deleted in the React component. Apart from that, <h6> isn't used in the rest of the web and this way it's clearer that is just for editable content.

• The whole newsletter Gutenberg HTML would be something like this:

<div class="wp-block-group newsletter">
  <div class="wp-block-group__inner-container">
    <h4>Join the Frontity newsletter</h4>
    <p>Stay up-to-date on new releases and features, tutorials, and community news.</p>
    
    <h6>Placeholder email</h6>
    <p>Enter your email</p>

    <h6>Privacy Policy checkbox</h6>
    <p>I agree to the <a href="https://frontity.org/privacy-policy">Privacy Policy</a></p> 
    
    <h6>Thank you message</h6>
    <p>Thank you! You have been subscribed to the Frontity newsletter. You will receive a welcome email shortly.</p>

  </div>
</div>

As said, we should consider if grouping the editable content would be easier.

Where to check

• We can find, and modify if needed, the Gutenberg content at https://wp.frontity.org/wp-admin/post.php?post=5001&action=edit
• We can find the design of the newsletter at the bottom of each page, above the footer.

Frontity flow

Description

This section of the homepage is custom, and it's not enough with the common elements we've built. We refer to this:

There are four different sections (Create, Connect, Style and Deploy), but only one of them is shown depending on which one is selected. In order to select them, we have to differentiate between desktop and mobile:

Desktop

We will select them using the buttons Create, Connect, Style and Deploy.

Mobile

The buttons will disappear and it will be managed with a mobile swipe, showing 4 dots at the bottom to know where are you:

HTML

Our first idea is to get this HTML from Gutenberg: a group with the buttons, and a div grouping each of the possible sections. (Maybe another option could be to use an ordered list <ol> instead of buttons) :

<div class="wp-block-group frontity-flow">
    <div class="wp-block-group__inner-container">

        // The buttons, only for desktop.

        <div class="wp-block-buttons desktop-only aligncenter">
          ...
        </div>

        // All the different items, each one inside a different group.

        <div class="frontity-flow-all-items">
          <div class="frontity-flow-item>...Section for create...</div>
          <div class="frontity-flow-item>...Section for connect...</div>
          <div class="frontity-flow-item>...Section for style...</div>
          <div class="frontity-flow-item>...Section for deploy...</div>
        </div
    </div>
</div>

Logic

The main logic is that it has to be shown just one item at a time. In the desktop version we'll change it clicking in the buttons and in the mobile version we'll change swiping between items.

Desktop

In the desktop version we have to differentiate between the different status of the buttons:

• Active:
  

• Hover:
  

• Normal:
  

Apart from that there will be two different animations:

• The blue background of the buttons should move from left-to-right/right-to-left while changing between them.
• The content of the sections should change with an left-to-right/right-to-left animation, in the opposite direction of the buttons background.

Mobile

We have to include the dots at the bottom of the section and we'll have two animations as well:

• The content moving from left-to-right/right-to-left.
• The dots changing according to the current active section.

Where to check

• We can check the design at Invision -> Homepage -> WordPress and React made easy.
• We can check the Gutenberg part at WordPress pages -> Homepage -> WordPress and React made easy.

Terminal

Description

Inside the web design, a component simulating the terminal is reused. We have to make it configurable from Gutenberg, so we can't use images.

This component will be used for both the terminal and showing pieces of code (like frontity.settings.js for example).

You can check it in the Invision design at the hero or the WP+React made easy section.

HTML

Our initial idea is to create a reusable block which would be a div with the class terminal and an ordered lists where each <li> element would be a different line. It could be something like this:

<div class="wp-block-group terminal">
    <div class="wp-block-group__inner-container">
        <ol>
            <li>npx frontity create</li>
            <li>npx frontity dev</li>
        </ol>
    </div>
</div>

Logic

We should transform that <div> into the design, so we should add some styles and new html elements. For example, adding a new <div> above the list for showing the three dots. Something like this:

<div class="wp-block-group terminal">
    <div class="wp-block-group__inner-container">
        <div class="dots-bar">
            <div class="rounded-dot"></div>
            <div class="rounded-dot"></div>
            <div class="rounded-dot"></div>
        </div>
        <ol>
            <li>npx frontity create</li>
            <li>npx frontity dev</li>
        </ol>
    </div>
</div>

And we'll need to adapt this css to match the design:

.terminal{
    background: voidblu;
    height: 310px;
    width: 400px;
    box-shadow: 0 2px 12px 0 rgba(12,17,43,0.4), 0 1px 4px 0 rgba(12,17,43,0.39);
    border-radius: 8px;
    color: grass;
}
.dots-bar{
    border-bottom: solid 1px rgba(255,255,255,0.08)
}
.rounded-dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    margin: 0 4px;
    background-color: rgba(255,255,255,0.2);
}

Some other things to have in mind:

• The orange and blue colors could be included with classes inside the specific <span>.
• If we add too many lines and the height is higher than 310px, we should allow scrolling, not make the <div> bigger. I guess that by adding something like overflow-y: auto.

Where to check

• Invision Homepage: WP+React made easy section
• /common-styles/ page: Terminal

Header

Description

Once all the common elements have been fetched and the state has been populated as explained at #37, we have to create the <Header /> component with its content, adapt it to the design (desktop and mobile), and add it to the index.js. Some things to consider:

• There is a dropdown submenu when hovering over the GitHub icon.
• The Twitter and GitHub icons change the color on hover. However, WordPress adds svgs as images, so we can't use the fill property. In the initial implementation we could just change the opacity on hover.
• There are going to be two different headers: Common Header, the one showing when a page is loaded, and Fixed Header, showing while scrolling.

You can see an example at current https://frontity.org.

Common header

The content of this header is being fetched from this endpoint, and you should be able to find it in Frontity state. We have to translate that content into a React component, matching Invision design. Apart from the Invision design, we can adapt the content of the header at the WordPress dashboard - Appearance - Template Parts.

• Desktop design:
  We can find it at the page 1/8 of desktop design (homepage) at Invision.
  

• Mobile design (closed):
  We can find it at the page 1/2 of mobile design at Invision.
  

• Mobile design (opened):
  We can find it at the page 2/2 of mobile design at Invision.
  

Fixed header

The content of this header is being fetched from this endpoint, and you should be able to find it in Frontity state. We have to translate that content into a React component, matching Invision design. Apart from the Invision design, we can adapt the content of the header at the WordPress dashboard - Appearance - Template Parts.

• Desktop design:
  We can find it at the page 5/8 (homepage) at Invision.
  

• Mobile design (closed):
  There is not going to be fixed header in the mobile version. Instead we are going to use a scroll-to-top button #61

Processor for adding borders

Description

Inside the web, there are some elements that need some borders, and they should be configurable form the WP editor. Gutenberg blocks don't support this by default, so we are planning on using classes: has-left-border, has-right-border, has-top-border, has-bottom-border and has-all-borders.

It could be applied inside any tag.

Style

Each border we add should have these properties

border: solid 1px rgba(15,28,100,0.12)

Where to check

Inside /common-styles/ page -> Columns with borders
Invision Homepage -> Why WordPress & Why React section

body background keeps showing on scroll

Hi,
I noticed when we scroll down the background body #f6f6f9 keeps showing for a bit the it disappear.. not sure is there any css to fix that!.

to test that set the body background to darker color for ex. #26264a and try scroll down maybe faster scroll will still show the body background.

Horizontal separator

Description

There's a Gutenberg block named Separator that add a line between two blocks. We should adapt it to Frontity theme.

HTML

<hr class="wp-block-separator"/>

How it works

We could process all the elements with the class wp-block-separator and format it:

height: 1px;
background-color: primary;
add opacity 0.12 using the function `addAlpha` at https://github.com/frontity/frontity.org/blob/dev/packages/frontity-org-theme/src/utils/index.ts

Where to check

• Invision Homepage page -> Keep editing your content
• /common-styles/ page -> All the separators have that class

Hero section does not render as expected

The hero section of the deployed website happens to be slightly different from what's on the design.

Current

Expected

Homepage Hero

Description

Once we have added all the styles and the common elements to the web, we'll still need to adapt the animation for the terminal and the video created by the motion designer in the homepage hero.

Note that the different clip-paths don't apply in this issue, they are going to be managed in another one.

Logic

We'll have two different elements in the same group: the terminal (that gets its style from this processor) and the video made from the motion designer, the one in the back. Some things we have to achieve:

• We need to modify slightly the terminal element, and the lines should be filled letter by letter just like Strapi is doing. We could use a library like React Typist. (We still have to define the time between letters and lines with the designer).
• When the commands have finished, the terminal has to go down an hide to show the video in the background.
• There will be a button to show/hide the terminal.

It should look similar to this test, but adapting the styles to the Invision design -> https://www.loom.com/share/3ab07ac6d46749d6a897f575c357eae5

Possible solution

I've linked a draft PR with the code I used to implement the test shown in the previous video, just in case you find it useful. #76

Bear in mind that this solution is hardcoded. We should try to reuse the terminal and image-frame processors and, if possible, get the content from WordPress (if you feel it'd too complicated, there's no problem hardcoding this content).

Processor for background and text colors

Description

Sometimes, we'd want to be able to specify the color of some elements instead of using the default one.

We'll have a color palette both in WP and in the Frontity project with the common colors used in the design, but we should accept custom colors too. Both the WP palette and the frontity.settings should have the same common colors defined.

We have to process both the background colors and the text colors, and it can be used inside any tag.

How it works

• If we select a new background color in Gutenberg, it will add the class has-background-color.

• If we select a new text color in Gutenberg, it will add the class has-text-color.

• If the color selected for the background is inside the WP palette, it will add a new class with the format has-$slug-background-color, that should be process and matched with the frontity.settings.

• If the color selected for the text is inside the WP palette, it will add a new class with the format has-$slug-color, that should be process and matched with the frontity.settings.

• In order to access the $slug color inside frontity.settings, we can find it at state.theme.colors.$slug. The slug inside the class and in frontity.settings must match.

• If we use a custom color code, for both the background and the text, it will be added inside the style attribute.

HTML

Normal paragraph

<p>Some paragraph</p>

Paragraph with palette colors in both background and text

<p class="has-text-color has-background has-frontity-color has-orange-background-color">Some paragraph</p>

Paragraph with custom colors in both background and text

<p class="has-text-color has-background" style="color: rgb(163, 39, 0); background-color: rgb(186, 173, 214);">Some paragraph</p>

Where to check

Inside /common-styles/ page:

• Body with palette colors
• Body with custom colors

Wrong styles on "visited" links?

Browser: Chrome. Versión 81.0.4044.113 (Build oficial) (64 bits)
OS: Mac 10.14.6

Shouldn't the text in this button be white all the time (normal and hover)?

I think this has something to do with the styles in visited links

Adapt margins and clip-paths of the homepage

Description

Right now, the different sections of the homepage are using the default styles for margins and clip-path. However, most of them have custom styles, so we have to process each section to adapt it to the final design (both desktop and mobile).

We have to check three sizes:

• More than 1080px.
• Between 768px and 1080px.
• Less than 768px.

Mobile arrow

Description

In the mobile version of the web, we want to include a small button on the right-bottom corner to let the user go to the top of the page when needed just clicking it. It should be something similar to this:

Where to check

Invision mobile design

Background clip-path

Description

Some sections of the web, instead of having a rectangular background, they will use a parallelogram. We will configure one by default and if some sections need to customize it they'll take care of that themselves.

Logic

Our first approach would be to use a class named has-polygon-background in the <div> tags where we want to apply the clip-path. The default css style added should be something similar to:

clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 calc(100% - 72px));

Where to check

• Invision About Us -> Our mission.
• /common-styles/ page -> Section with polygon background.

Links and buttons

Description

We are using different types of links and buttons in the website design. Buttons are treated like links in Gutenberg, and they share some properties with common links, so it makes sense to process them together.

Types

1. Common links

These are the common links used along the web, they aren't buttons. They are usually used inline text. Here you can see an example:

HTML

<a rel="noreferrer noopener" aria-label="Learn more (opens in a new tab)" href="https://frontity.org" target="_blank">Learn more</a>

Design / Logic

Normal status:

• Default color frontity. //Get it from state.theme.colors

Hover status:

• Nothing special, just change the pointer.

Active status:

• Nothing special

2. Regular buttons

Most of the buttons will be the same, they may change its colors, but that should be processed by other processors. Here we have an example:

Add the default-button CSS class

HTML

Gutenberg returns this HTML with the button component, always with the same classes:

<div class="wp-block-button default-button">
	<a class="wp-block-button__link">Get Started</a>
</div>

Design / Logic

The css added is not valid, it's just to have a clearer picture of the logic

Hover status

Although the colors and css may be different, the hover effect should be something similar to this:
https://www.loom.com/share/6635463172824187ab69257583ec11ab

We can find this at frontity.org (the smooth transition is not implemented there).

move logo 2px right
add a layer with background rgba(255, 255, 255, 0.12)
add a transition to make it smooth -> transition: 0.25s ease

Unhover

Move logo to its position with smooth animation
Remove hover layer

Active status

Remove hover layer
Move whole button 2px down

3. Big Buttons

There are some buttons, that will behave as the common ones, but have a bigger size. We'll add a class big-button, and we can change the size. Here we have an example:

HTML

<div class="wp-block-button big-button">
  <a class="wp-block-button__link">Big Button</a>
</div>

Design/Logic

We have to change:

4. Text Buttons

There will be some buttons, that don't have background and they look similar to just text. In order to differentiate them we can pass a class text-button. Here we have an example:

HTML

<div class="wp-block-button text-button">
  <a class="wp-block-button__link">learn more</a>
</div>

Design / Logic

Hover status:

Fill the underline progressively from left to right

We can find a similar effect here:
https://www.loom.com/share/f98d1b9e93ba4259b16d383b96c77280

Not saying we have to implement it like this, but the example is from this article, in the section "left to right".

Unhover:

Unfill the underline progressively from left to right

Active:

Move it 2px down

The `font-weight` is not applied correctly to headings on safari=<11

Here's a comparison of chrome and safari side-by-side:

Replace embedded asset of the Twenty Twenty theme (performance section) with an image

Current behavior
I reported this issue with the images on the Twenty Twenty theme a while ago (frontity/frontity#278 (comment)) and it's happening when the theme is displayed on the frontity.org mobile's website (there's too much space between the featured image and the first paragraph).

Possible solution
As Jose already suggested, I think this embedded asset could be removed on the mobile version (apart from this problem with the images, I don't think it provides a good user experience). Instead, we could just share an image of the Twenty Twenty theme and the link to the demo.

The Frontity logo svg placed in the demo iframe isn't loading correctly sometimes

Sometimes on the first load, the logo we are placing next to the demo iframe, appears pixelated like this:

If you Zoom in and out, the problem is solved. And if you reload the page, it is solved as well.

Not sure if this is related to the code implementation or the design of the svg.

Dropdown

Description

For the FAQ section, we need dropdown buttons, so we can make a block reusable for other futures cases. We need a button that, when clicked, opens a <div> below it.

HTML

It could be a group (div) with the class dropdown-item which has inside a button (the question) and another group (the answer).

<div class="wp-block-group dropdown-item">
  <div class="wp-block-group__inner-container">
    <div class="wp-block-buttons">
      <div class="wp-block-button">
        <a class="wp-block-button__link">Question 1</a>
      </div>
    </div>
    <div class="wp-block-group">
      <div class="wp-block-group__inner-container">
        <p>The answer of question 1</p>
      </div>
    </div>
  </div>
</div>

Where to check

• Invision Homepage -> FAQ Section
• /common-styles/ -> Dropdown

Processor for adding border radius

Description

There are some elements that need some border-radius, and they should be configurable form the WP editor. Most commonly used are 8px and 12px.

Gutenberg blocks don't support this by default, so we are planning on using classes like these: has-border-radius-8px or has-border-radius-12px.

It could be used inside any tag.

Style

We just have to add the correct border-radius to the element.

Where to check

Inside /common-styles/ page -> Divs with custom border-radius

Headless flow

Description

In the section "How Frontity works", although most of it is already built with common elements, we still have to add a custom functionality: we have to add a green dot simulating movement between the different elements. We are NOT going to implement the animation, so the dots will be static (at least in this first version of the web).

We have to have in mind that it my be slightly different the desktop and the mobile version.

Desktop

Mobile

Possible solution

We could modify the element with html2react and add a new React component, with position absolute, to handle this.

Frontity default state.source don’t fetch all items once in loop

Frontity default state.source don’t fetch all items inside loop. I am trying to fetch posts from custom api route which return id, link, type, slug in json. When i console.log custom route it returns all 5 items. but when i fetch data with state.source[item.type][item.id] it fetch only first 1 from json output. If i tried to return all posts data in custom route and show post title, post link direct in component and click on link it move to 404 page.

please help, if i can’t solve this issue i can’t run site with frontity

const FrontPage = ({state, actions}) => {

    useEffect(() => {
        actions.source.fetch("getFeaturedPosts");
        FeaturedPostSection.preload();
    }, []);

//   const data = state.source.get(state.router.link);

//   const [firstThreePosts, othersPosts] = splitPosts(state, data.items);

    const data = state.source.get("getFeaturedPosts");

    const [firstThreePosts, othersPosts] = splitPosts(state, data.items);

    return data.isReady ?  (
        <>
            <FrontPageContainer>
                <FeaturedPostSection data={firstThreePosts.map(post => formatPostData(state, post))} />
           </FrontPageContainer>
        </>

    ) : null;
};

export default connect(FrontPage);

export function splitPosts(state, routeData) {
  const firstThreePosts = [];
  const otherPosts = [];
  routeData.forEach((item, idx) => {
    console.log(item.id);
    const itemData = state.source[item.type][item.id];
    if (idx < 3) firstThreePosts.push(itemData);
    else otherPosts.push(itemData);
  });

  return [firstThreePosts, otherPosts];
}

Mobile menu does not close on click

Hi,

Was browsing the site on mobile, and noticed that when i use the menu, it does not close itself after I click a link and the page is opened, so I have to manually close it.

Fetch all the common elements for the pages

Description

There are some elements like the header, footer or the newsletter, that will be included in all the pages. In order to get their data, we have used a Custom Post Type named Template Parts, where all of them are included.

We should fetch this data at https://wp.frontity.org/wp-json/wp/v2/template-parts and populate the state so the content can be used to show them in each page.

Processor for mobile/desktop only

Description

There are some elements that will be shown only in the desktop view, and other ones that will be shown only in mobile. We have to be able to define this from Gutenberg.

We could pass a class desktop-only and mobile-only in order to process this from Frontity.

Where to check

• /common-styles/ page -> Mobile only & Desktop only headings

frontity.org not working in Safari 11.1

Observed behavior
When you visit the frontity.org website in Safari 11.1 the screen goes blank.

Update deploy/lighthouse workflow

The LightHouse tests are failing because /homepage doesn't exist anymore, we need to update that URL in the workflow and json files.

Browser window

Description

In some elements of the web, mainly images, we want to replicate a browser window, so we need to add a top bar to simulate this. If we want an <img> for example to have this, we have to include it inside a Group block (<div> element), and add the specific class to this Group. This way, we will be able to add things like border-radius without breaking it. We use the class has-browser-window for example.

HTML received from Gutenberg

<div class="wp-block-group has-browser-window">
  <div class="wp-block-group__inner-container"> 
    <figure class="wp-block-image>
      <img src="..." />
    </figure>
  </div>
</div>

Possible solution

We could add a new <div> similar to this one at the top of the inner container:

<div class="browser-bar">
  <div class="bar-dot"></div>
  <div class="bar-dot"></div>
  <div class="bar-dot"></div>
</div>

Adding css to adapt it. Something like:

.browser-bar{
  background-color: rgba(12,17,43,0.02);
  box-shadow: 0 -1px 0 0 rgba(12,17,43,0.04);
  height: 32px;
  transform: scaleY(-1);
  padding-left: 12px;
}
.bar-dot{
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    margin: 0.4px;
    background-color: rgba(15,28,100,0.2);
}

Where to check

• Invision Homepage: Need some inspitarion section
• /common-styles/ page: Image with browser window

Images of our blog are redirecting to the wrong URL

Some old images of our blog are redirecting to the wrong URLs.

For example, this image https://blog.frontity.org/wp-content/uploads/2019/07/twenty-nineteen-frontity-theme.png is redirecting to https://frontity.org/blog/wp-content/uploads/2019/07/twenty-nineteen-frontity-theme.png and its returns a 404 page.

It should instead redirect to https://wp.frontity.org/wp-content/uploads/2019/07/twenty-nineteen-frontity-theme.png.

Frontity demo animation

Description

There's a place in the web (just above the Why WP and Why React section) where we are placing and iframe of a deployed web. Although the iframe is already managed by Gutenberg, we still want to add an animated logo that will help users understand that the iframe is interactive.

We have to add (just for desktop) a Frontity logo, moving constantly from left to right (let's try 4px), at the left of the iframe. An animation similar to this one but adapted to our design:
https://www.loom.com/share/19dd21ae72954798b7cbf177e85dc87c

Reduce scripts budget back to 200kbs

Now that @SantosGuillamot has fixed the performance problems in #66 we must reduce the scripts budget size to avoid this problem in the future.

This is the commit that we have to revert: cbe8bf0

Footer

Description

Once all the common elements have been fetched and the state has been populated as explained at #37, we have to create a <Footer /> component with its content, adapt it to the design (both mobile and desktop) if needed, and add it to the index.js.

Fix layout in 404 page

Just discovered that the 404 page is not rendering correctly.

I've made a quick search and seems to be the that the header-styles.ts can be the main cause. Happens on both desktop and mobile.

Tested on:

• macOS 10.15.5

• Safari 13.1.1

• Firefox 77.0.1

• Google Chrome 83.0.4103

Change the font-display to swap instead of block

As explained at this Pull Request regarding the twentytwenty-theme, it looks like embedding fonts in HTML is not a good technique and the performance score of LightHouse is hurt, so we should change that in frontity.org as well.

Once this Pull Request is merged into the core, apart from updating our packages, we'll need to change the font-display to swap instead of block.

Paragraphs

Description

There are different sizes and opacity reused inside the web. In Gutenberg you can select Small/Normal/Large size, and each of them should have a different format according to our design.

HTML

<p class="has-small-font-size">Some paragraph</p>

How it works

There are 3 different cases

• If it has has-small-font-size class:

font-size: 14px;
line-height: 20px;

• If it has has-normal-font-size class:

font-size: 16px;
line-height: 24px;

• If it has has-large-font-size class:

font-size: 20px;
line-height: 32px;

• If it hasn't any font-size class, it could have a custom font size included with style="font-size:25px". (This should work automatically, we just have to check it)

Where to check

• Inside /common-styles/ page -> Body 1, body 2, body 3...

Processor for opacity

Description

We'll want to change the opacity of some elements or paragraphs, and we should be able to do this from Gutenberg.

At this moment, we are planning to do this adding classes to each element, for both the text and the background, and process them from Frontity. Something like has-text-opacity-80 or has-background-opacity-80.

How it works

• If an element has the class has-text-opacity-XX, we should get the opacity number and change the color css property. We should create a function to convert to rgba (adding the opacity) inside the libraries of the theme. We can get the color of the element as explained here or get primary as default one.

• If an element has the class has-background-opacity-XX, we should get the opacity number and change the background-color css property. We can get the background color of the element as explained here.

• We should be able to use this inside React too, without classes. If we want to apply an opacity to one of the state.theme.colors from React, we should be able to do it.

Where to check

• Inside /common-styles/ page -> Div with background and text 60% opacity

Processor for adding shadow

Description

Some elements will need a shadow, and this should be configurable from Gutenberg. We are planning to add a class has-shadow to the elements where we want to apply it.

It could be applied inside any tag.

Style

Each element with has-shadow should have these properties

box-shadow: 0 4px 14px 0 rgba(31,56,197,0.09), 0 2px 4px 0 rgba(31,56,197,0.12);

Where to check

Inside /common-styles/ page -> Div with shadow
Invision Homepage -> FAQ

Background triangles

Description

In most of the pages of the web, there are some triangles in the background for styling them.

While some of the properties like colors or sizes while be the same for all the triangles, there are some that can be different depending on the page:

• position: They can be placed in left, right, both-sides or none.
• top: The position from the top may vary depending the page.
• top-triangle-opacity: The opacity of the triangle on the top level may vary as well.

In order to get these properties for each page, we are planning to pass them using Advanced Custom Fields and the REST API, so in each page we can find a field named acf:

Note that this is our first idea, feel free to modify it if you consider it's better other way.

Possible solution

In the Frontity project, inside the <Page /> component, we could include a new component to handle these background triangles. Apart from that, we should fetch the acf field to get the customizable properties for each page (homepage, about-us, contact-us...).

The component could be something similar to this (adapting it to the Invision real styles and valid React):

Note that this code is not valid (nor the javascript or the css), is just to have an idea of the possible implementation.

const { position, top, top-triangle-opacity } = acf.background-triangles;

const BackgroundTriangles = ( ) => {
  <TrianglesContainer>
        <Triangle1 />
        <Triangle2 />
  </TrianglesContainer>
};
export default connect(BackgroundTriangles);

const TrianglesContainer = styled.div`
  position: absolute;
  top: {$top};
  display: block;
  width: 0px;
  align-items: center;
  transform: rotate(45deg);
`;
const BackgroundTriangle = styled.div`
  position: absolute;
  width: 817px;
  height: 817px;
`;
const Triangle1 = styled(BackgroundTriangle)`
  box-shadow: 0 0 14px 0 rgba(12, 17, 43, 0.03);
  z-index: 1000;
  left: 114px;
  top: -114px;
  background: white;
  opacity: 0.8;
`;
const Triangle2 = styled(BackgroundTriangle)`
  z-index: 2000;
  background: gray;
  opacity: {$opacity}
`;

There is a similar implementation in the footer of the current web at https://frontity.org, it could be useful as well.

Where to check

In order to get the correct styles, we can take a look at Invision, at the homepage and the about-us page.
In order to check if it's working in the Frontity side, we've added different Advanced Custom Fields to the /homepage and the /common-styles/ page.

"Community" link is broken

Clicking on the "Community" link after scrolling down breaks the link

Blog Search is not working

The search in the blog is not working.
It redirects you to → https://frontity.org/?s=react when it should redirect you to https://frontity.org/blog/?s=react

Add redirects to links with campaigns

We have some links on our social channels like this one, https://frontity.org/get-started, redirected to https://frontity.org/?utm_source=twitter&utm_medium=bio&utm_campaign=v1-launch (a link to our website with UTM parameters) The first link it's shorter and more convenient for the social media profiles/descriptions.

Observed behavior
Links like https://frontity.org/get-started show now a 404 page.

Possible solution
@SantosGuillamot suggested this: I guess we'll need to modify the now.json and add some routes to do this until the server extensibility is ready.

CF7 forms does not work

Hi,

Forms do not work on the frontity.org website, because of this connect:

frontity.org/packages/frontity-contact-form-7/src/index.js

Line 139 in 1b3a76e

export default connect(MyForm);

I have made a PR #189 that removes it, and also updates the way the processors are imported.

Refactor frontity.org processors

Once we've released a new version of @frontity/html2react with frontity/frontity#370, we need to adapt processors in the repository to match the new Html2React's TypeScript API:

1. Processor by default receives Element, Text or Comment.

import { Processor } from "@frontity/html2react";

const proc1: Processor = {
  processor: ({ node }) => {
    if (node.type === "element") { /* ... */ }
  },
};

2. Processor with default Element should cover most cases.

import { Processor, Element } from "@frontity/html2react";

const proc2: Processor<Element> = {
  processor: ({ node }) => {
    node.component;
    
    // Emotion's `css` prop
    node.props.css;

    // HTML props
    node.props.id;
    node.props.className;
    node.props.src;
    node.props.srcSet;
    // ...

    return node;
  },
};

3. Element can be extended with custom props.

import { Processor, Element } from "@frontity/html2react";

interface CustomElement extends Element {
  props: Element["props"] & {
    hasCustomProp: true;
  };
}

const proc3: Processor<CustomElement> = {
  processor: ({ node }) => {
    node.props.hasCustomProp;

    return node;
  },
};

4. Element can be extended with custom relatives.

import { Processor, Element } from "@frontity/html2react";

interface MyElementParent extends Element {
  props: Element["props"] & {
    isParent: true;
  };
}

interface MyElement extends Element {
  props: Element["props"] & {
    isChild: true;
  };
  parent: MyElementParent;
  children: [Element, Text, Comment];
}

const proc4: Processor<MyElement> = {
  processor: ({ node }) => {
    node; // is MyElement
    node.props.isChild;

    node.parent; // is MyElementParent
    node.parent.props.isParent;

    node.children[0]; // is Element
    node.children[1]; // is Text
    node.children[2]; // is Comment

    return node;
  },
};

Special icons

Description

Usually, icons are included like common images. However, there is a special type of icon that is reused in the web, and it has a background color. It's used for example for the Frontity features.

We'll differentiate them adding the class special-icon.

HTML

Right now, it has this format:

<div class="wp-block-group has-red-background-color has-background special-icon">
  <div class="wp-block-group__inner-container">
    <figure class="wp-block-image size-large">
      <img src="https://wp.frontity.org/wp-content/uploads/2020/02/demo-icon.svg" alt="" class="wp-image-4384">
    </figure>
  </div>
</div>

How it works

We just have to add some styles if the class special-icon exists:

• If has-background class doesn't exist, add the default background rgba(15,28,100,0.08)
• If has-background class exists, and has-background-opacity-XX doesn't, we should add 0.1 opacity according to #3.
• If has-border-radius-Xpx doesn't exist, add border-radius: 12px.
• In any case, we have to add this css too:

height: 60px;
width: 60px;

Where to check

• In Invision - Design page -> Feature List
• In /common-styles/ page -> Special icons

Horizontal scrolling section in mobile

Description

In order to make the mobile experience better, there are going to be some sections like Frontity flow or Frontity features, that will be navigated through horizontal scrolling instead of showing the whole content.

To understand this better, check in the mobile design the Frontity features section.

HTML

Our first idea here is to include a parent div with the class dots-carrousel or bar-carrousel, and each item included in the swipe would be another div with the class carrousel-item. Here we have an example:

<div class="wp-block-group dots-carrousel">
    <div class="wp-block-group__inner-container">
        <div class="wp-block-group carrousel-item">
            <div class="wp-block-group__inner-container">
                <h4>Element 1</h4>
                <p>Text of element 1</p>
            </div>
        </div>
        <div class="wp-block-group carrousel-item">
            <div class="wp-block-group__inner-container">
                <h4>Element 2</h4>
                <p>Text of element 2</p>
            </div>
        </div>
    </div>
</div>

Where to check

• Invision Homepage (mobile) - WP+React made easy (dots carrousel) and Frontity features (bar carrousel.
• /common-styles/ page - dots carrousel and bar carrousel

Need inspiration images

Description

There's a section in the web with the heading "Need some inspiration?" were we are adding three images of different showcases. However, the layout of these images is not the default one, so we need to adapt it. We have to adapt the sizes, opacity and position of the images for both the desktop and the mobile version.

Note that the clip-path will be handled by another issue.

Checklists

Description

Common lists are defined in the global css, but there are some cases where we'd want to change the marker to a check, instead of the default one.

How it works

For the lists that have the class check-marker-list we should change the marker to this:

list-style-image: url(https://wp.frontity.org/wp-content/uploads/2020/02/check-circle-marker.svg)

Where to check

• Inside Invision Homepage -> Why WP & Why React.
• Inside common-styles page -> Check marker list

Merge dev to master

Hi,

How often do you merge dev to master to get changes live? One of the PR's that I submitted should be published asap, considering none of the CF7 forms you have on the site are working.

Frontity website has layout issues and missing content on MS Edge on Windows

Microsoft EdgeHTML 18.18362
Microdsoft Edge 44.18362.449.0

This is a pretty recent version of Edge so I assume that the page does not work on Edge at all :(

The main problem is that the hero text does not show up:

But also some of the icons are misaligned:

The console (the first line is an error and the following ones are a warning) :

SCRIPT5007: SCRIPT5007: Unable to get property 'addEventListener' of undefined or null reference
frontity.org (3,113)

[Amplitude] WARNING: Property key "utm_campaign" with invalid value type undefined, ignoring

[Amplitude] WARNING: Property key "utm_medium" with invalid value type undefined, ignoring

[Amplitude] WARNING: Property key "utm_source" with invalid value type undefined, ignoring