Skip to main content

Migrate to wp-lemon 4

Welcome to version 4.0 of wp-lemon. In this guide we will go over the details to upgrade your current 3.x website to the 4.x.

Before we get started​

Please make sure you have the latest version of your project checked out and have a recent database and media files to check your website locally.

Upgrade steps​

Follow the next steps to upgrade your project to use wp-lemon 4.

Step 1. Set new major version of wp-lemon​

Navigate to your composer.json file in the project root and update it as follows.

-    "satispress/wp-lemon": "^3.0",
+    "satispress/wp-lemon": "^4.0",

Step 2. Update child-theme dependencies​

Navigate to your child theme and open package.json and update the following dependencies to at least these versions.

⚠️ Make sure not to delete/overwrite extra dependencies that you may have included.

"devDependencies": {
    "@wordpress/browserslist-config": "^5.17",
    "basebuilder-config": "^3.3.7",
    "prettier": "^2.8",
    "prettier-plugin-twig-melody": "^0.4.6",
    "stylelint": "^15.6",
    "stylelint-basebuilder": "^2.3"
},
"dependencies": {
    "@popperjs/core": "^2.11.8",
    "aos": "^3.0.0-beta.6",
    "bootstrap": "^5.3",
    "lodash.throttle": "^4.1.1",
    "swiper": "^10.0",
    "vanilla-lazyload": "17.8"
}

Step 3. Move backend() function outside of domReady in editor.js​

move backend() function outside of domReady

import domReady from '@wordpress/dom-ready';
import backend from 'parentThemeScripts/components/functions-backend';

++ backend();
domReady(() => {
    acf.addAction('render_block_preview', function (el, block) {
        -- backend();
    });
});

Step 4. Run update-parent command​

Open a new console in your child theme and run the following command: yarn run update-parent

This will update both PHP and node dependencies to their latest versions.

Step 5. Run production build​

Open a new console in your child theme and run the following command: yarn run production This will create a fresh build with the new dependencies. If the build fails, please try to debug the error or open a new ticket.

Step 6. Change the following in your code:​

PHP Helper functions moved:​

  • search for usage of format_phone_number and use new location
  • search for usage of get_fluent_form and use new location
  • search for usage of log_message and use new location
  • search for usage of get_svg_image and use new location
  • search for usage of post_type_name and use new location
  • search for usage of custom_archive_page and use get_archive_page instead
  • search for usage of language_switcher and use get_language_switcher instead

PHP Query helpers functions moved:​

  • search for latest_items_query and use new location
  • search for other_items_query and use new location
  • search for specific_items_query and use new location
  • search for archive_query and use new location
  • search for get_total_posts and use new location
  • search for adjacent_post_info and use new location
  • search for next_post and use previous_post_info instead

Block migration: acf/testimonial to acf/circle-text​

SearchReplace
acf/testimonialacf/circle-text
field_testimonialfield_circle-text
field_testimonialfield_circle-text

Block migration: acf/faq to acf/accordion​

SearchReplace
acf/faqacf/accordion
acf/faq-itemacf/accordion-item
field_faq-itemfield_accordion-item

Visual/Code check​

Since this is a new major version please check the build locally with the latest database and media files. Check for any visual differences. If you find a major difference please try to debug or open a ticket.

If you've written custom code based on Swiper or Bootstrap, for example created a new block or a slider that involves on of these libraries, please check out the following migration guides.

Deploy​

Please follow the following guide to deploy the update to the production server. Deploy update!