Cookie Notice: "Cannot read properties of null (reading 'style')" on the login page and in the block editor

Open Beginner friendly
  • Is something wrong?
#1,014 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
php, wordpress
Domain
frontend

Research direction

Start with obfx_modules/policy-notice/init.php, especially hooks() around lines 160–162 and the script around lines 238–240; compare when the markup and script are printed. Reproduce on the login page or in the block editor with Cookie Notice enabled, where the bar element is absent. Done when those contexts load without the reported JavaScript error and the bar still works where its markup is present.

Written by the indexing model from the issue text.

Description

Cookie Notice: "Cannot read properties of null (reading 'style')" on the login page and in the block editor

With the Cookie Notice bar enabled, its script also runs on pages where the bar isn't printed, and throws: Uncaught TypeError: Cannot read properties of null (reading 'style'). This happens on the login page (wp-login.php), inside the block editor's canvas, and in the Customizer's login preview. Visitors don't see anything. It shows in the browser console and in any monitoring that records JavaScript errors, and an uncaught error can stop scripts that run after it in the same block.

Seen on Orbit Fox 3.0.12 with WordPress 7.1.3 and 7.1.4.

Try it in Playground: WordPress latest (7.1.4), Neve, Orbit Fox with the Cookie Notice bar on. It opens the login form.

Checked through that link: the login page carries the Cookie Notice script but no #obfx-cookie-bar element. That is exactly the state in which the script throws. (Our local runs on 7.1.3 and 7.1.4 recorded the TypeError on wp-login.php and in the editor canvas on every page load.)

Steps to reproduce
  1. Orbit Fox → General Settings: turn on Cookie Notice, open its Settings, enable the bar, Save.
  2. Open /wp-login.php and open the browser console.
  3. Open any post in the block editor and check the console again.

Expected: no errors.
Actual: Uncaught TypeError: Cannot read properties of null (reading 'style') on both screens.

Cause

obfx_modules/policy-notice/init.php, hooks() (lines 160–162): the bar's markup is printed on wp_footer, but its script and style on wp_print_footer_scripts. That second hook also runs on the login page, in the editor canvas and in other contexts without wp_footer. The script reads document.getElementById('obfx-cookie-bar').style (line 238) and document.getElementById('obfx-accept-cookie-policy') (line 240) without checking they exist.

Possible fix

Print the script from wp_footer together with the markup, or return early in the script when #obfx-cookie-bar is missing. Not tried; a suggestion from the code.

Found while building Orbit Fox's compatibility checks (Codeinwp/qa-compatibility#100), where it is recorded as a known difference: the same on every WordPress version tested.

Dominant language
PHP
Stars
13
Forks
18
Avg merge
1d 12h
Merged PRs (30d)
10

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Codeinwp/themeisle-companion

All issues in Codeinwp/themeisle-companion

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.