infrastructure/blender-org
5
4
Fork 1
Code Issues 16 Pull Requests Projects Releases Wiki Activity

Blender-org web-assets v2 upgrade #104116

Merged
Márton Lente merged 56 commits from web-assets-v2-upgrade into main 2024-08-13 17:27:59 +02:00
Conversation 4 Commits 56 Files Changed 39 +766 -715
Márton Lente commented 2024-06-24 17:49:24 +02:00
Owner
Copy Link

This pull request upgrades Git submodule Web Assets to v2, resolves post-upgrade issues, and makes the necessary project-specific changes.

Web Assets v2 brings UI fixes, improvements, and new development features to the platform as detailed on the Web Assets v2 guidelines and notes wiki page.

Visual changes are kept to a minimum and will be added later in a dedicate design pass.

Important: Upgrading to Web Assets v2 doesn't end with merging the pull request, as some styling lives in the database. Follow the Web Assets upgrade wiki guide's according section to make the database changes. A helper file part-helper-bwa-wp-search-and-replace.php is also prepared to accelerate the process.

This pull request upgrades Git submodule Web Assets to v2, resolves post-upgrade issues, and makes the necessary project-specific changes. Web Assets v2 brings UI fixes, improvements, and new development features to the platform as detailed on the Web Assets [v2 guidelines and notes](https://projects.blender.org/infrastructure/web-assets/wiki/v2-guidelines-and-notes.md) wiki page. Visual changes are kept to a minimum and will be added later in a dedicate design pass. **Important:** Upgrading to Web Assets v2 doesn't end with merging the pull request, as some styling lives in the database. Follow the Web Assets upgrade wiki guide's [according section](https://projects.blender.org/infrastructure/web-assets/wiki/v2-guidelines-and-notes.md#database-wordpress) to make the database changes. A helper file [part-helper-bwa-wp-search-and-replace.php](https://projects.blender.org/infrastructure/blender-org/src/commit/bfff63772122d00158174ce95da4de2dcf93c6f2/themes/bthree/part-helper-bwa-wp-search-and-replace.php) is also prepared to accelerate the process.
Márton Lente added 32 commits 2024-06-24 17:49:25 +02:00 
Post web-assets v2 upgrade cleanup and simplify Sass imports, by changing
individual partial imports to BWA main.
Run post web-assets v2 upgrade script bash helper for converting sizes
and units to new rem sizing, and implement 4 px based sizing base.
Remove class "cards" from $className to apply "cards" on wrapping element
only once, so that cards layout works as expected.
Add template part to help using Blender Web Assets development utilities for WordPress, if needed.
Adjust font-sizes and spacings after web-assets v2 upgrade to reflect
rem sizing changes, and work with modular scale.
pages
Make WordPress block editor font-sizes displayed correctly, according
to custom rem sizing introduced in Web Assets v2.
Márton Lente commented 2024-06-25 15:07:08 +02:00
Author
Owner
Copy Link

A list of tasklists to change and fix on the theme level, as discussed IRL.

Another list of todos to change and fix on the database level, after the PR has been merged and deployed.

All todos are organized by occurence. Theme-level todos are listed with checkmarks.

General pages
  • Cleanup unintentional changes to compiled, and source files. Partially revert #fa589d1
Releases pages
4.1

  • Create style utility helper .wp-style-global-content-size-100

  • Add section Making waves style inline --wp--style--global--content-size > 100%

  • Recover block in section Audio waveform

4.0

  • Fix PHP fatal error

  • Set .has-text-align-center max-width to 600px

  • Set .wp-block-group width to 100%

  • Set .has-text-align-center and .wp-block-heading width to 100%

  • Set .is-vertical and .wp-block-group style flex-direction to column

  • Check section video-scroll block

  • Fix section DIY tools strong tag

  • Set .typetosearchtext inline style font-size 3rem to 1.6x

3.6 LTS
  • Fix title ZONE</strong
3.5

  • Revert .wp-block-paragraph-plus rule line-height to 1em

  • Add section #hair style inline --wp--style--global--content-size > 100%

3.4
  • Fix PHP fatal error
3.3 LTS
  • Revert .wp-block-paragraph-plus rule line-height to 1em
  • Fix .wp-block-paragraph-plusLight & section light & shadow line-heights
3.0
  • Fix section Ahead of the curve background
2.91
  • Fix PHP fatal error
A list of tasklists to change and fix on the theme level, as discussed IRL. Another list of todos to change and fix on the database level, after the PR has been merged and deployed. All todos are organized by occurence. Theme-level todos are listed with checkmarks. ##### General pages - [x] Cleanup unintentional changes to compiled, and source files. Partially revert #fa589d1 ##### Releases pages ##### 4.1 - [x] Create style utility helper `.wp-style-global-content-size-100` - Add section _Making waves_ style inline `--wp--style--global--content-size` > 100% - Recover block in section _Audio waveform_ ###### 4.0 - [x] Fix PHP fatal error - [ ] ~~Set `.has-text-align-center` max-width to 600px~~ - [ ] ~~Set `.wp-block-group` width to 100%~~ - [ ] ~~Set `.has-text-align-center` and `.wp-block-heading` width to 100%~~ - [ ] ~~Set `.is-vertical` and `.wp-block-group` style `flex-direction` to column~~ - Check section `video-scroll` block - Fix section _DIY tools_ `strong` tag - Set `.typetosearchtext` inline style `font-size` 3rem to 1.6x ###### 3.6 LTS - Fix title _ZONE</strong_ ###### 3.5 - [x] Revert `.wp-block-paragraph-plus` rule `line-height` to 1em - Add section _#hair_ style inline `--wp--style--global--content-size` > 100% ###### 3.4 - [x] Fix PHP fatal error ###### 3.3 LTS - [x] Revert `.wp-block-paragraph-plus` rule `line-height` to 1em - [x] Fix `.wp-block-paragraph-plus`Light & section _light & shadow_ line-heights ###### 3.0 - Fix section _Ahead of the curve_ background ###### 2.91 - [x] Fix PHP fatal error
Márton Lente added 1 commit 2024-06-25 15:30:30 +02:00 
This partially reverts commit fa589d131b
by removing mechnical string replacements by web-assets v2 upgrade script
bash helper in compiled and source files.
Márton Lente added 1 commit 2024-06-25 16:34:16 +02:00 
Add style utility helper wp-style-global-content-size-100 to override
variable --wp--style--global--content-size in blocks if needed.
Márton Lente added 1 commit 2024-06-25 18:28:38 +02:00 
Fix PHP fatal and template syntax errors related to 'js_footer' function
and js media-compare features.
Márton Lente added 1 commit 2024-06-26 17:28:24 +02:00
Márton Lente added 1 commit 2024-06-27 14:31:08 +02:00
Márton Lente added 1 commit 2024-06-27 14:36:45 +02:00
Márton Lente added 1 commit 2024-06-27 14:54:09 +02:00 
Extend box style by overriding web-assets details component to match
blender.org pre v2 upgrade look.
Márton Lente added 1 commit 2024-06-27 15:08:17 +02:00
Márton Lente added 1 commit 2024-06-27 15:11:37 +02:00
Márton Lente added 1 commit 2024-06-27 15:39:26 +02:00
Márton Lente commented 2024-06-27 15:53:39 +02:00
Author
Owner
Copy Link

A further list of todos to change and fix on the database level, after the PR has been merged and deployed.

General pages
Thanks
  • Access with /thanks/?dev=true
  • Fix upgrade cards classes namings
Releases pages
<= 3.4
  • Fix iframes for YouTube embeds
A further list of todos to change and fix on the database level, after the PR has been merged and deployed. ##### General pages ###### Thanks - Access with `/thanks/?dev=true` - Fix upgrade cards classes namings ##### Releases pages ###### <= 3.4 - Fix `iframe`s for YouTube embeds
Márton Lente changed title from WIP: blender-org web-assets v2 upgrade to Blender-org web-assets v2 upgrade 2024-06-27 16:13:28 +02:00
Márton Lente added 1 commit 2024-07-30 16:14:33 +02:00 
Map colour variables to existing colour names.
Márton Lente added 1 commit 2024-08-05 17:27:16 +02:00
Pablo Vazquez requested changes 2024-08-05 18:17:33 +02:00
Dismissed
themes/bthree/blocks/cards.php
@ -30,6 +30,13 @@ if( !empty($block['align']) ) {
$className .= ' float-' . $block['align'];
}
// Remove class "cards" from $className to apply "cards" on child wrapping element only.
Pablo Vazquez commented 2024-08-05 18:15:59 +02:00
Owner
Copy Link

This whole section is about removing "cards" from $className. This gets added in line 15, you could also go there and rename it or not add it in the first place.

This whole section is about removing "cards" from $className. This gets added in line 15, you could also go there and rename it or not add it in the first place.
Márton Lente commented 2024-08-06 12:05:11 +02:00
Author
Owner
Copy Link

The $className is used to render various classes on the parent element within the cards template based on Gutenberg editor settings. I'm not sure we can test all possibilities, but rendering $className on the parent's class attribute seems important to keep. I think removing line 15 $className = $className[1]; would break it, as the latter converts the array to an actual string.

cards is a reserved classname in BWA v2, and mustn't be present on the outer wrapper element that is needed here. Based on these, I think the substring replacement is needed for not to accidentally break some other settings I'm not aware of. 🤔

The `$className` is used to render various classes on the parent element within the `cards` template based on Gutenberg editor settings. I'm not sure we can test all possibilities, but rendering `$className` on the parent's _class_ attribute seems important to keep. I think removing _line 15_ `$className = $className[1];` would break it, as the latter converts the array to an actual string. _cards_ is a reserved classname in BWA v2, and mustn't be present on the outer wrapper element that is needed here. Based on these, I think the substring replacement is needed for not to accidentally break some other settings I'm not aware of. 🤔
themes/bthree/header-static.php Outdated
@ -46,3 +46,3 @@
/*
* - If the page/post has_post_thumbnail, set $header_image_src as background-image url
* - If the page/post has_post_thumbnail, set $header_image_src as background-img url
Pablo Vazquez commented 2024-08-05 17:59:05 +02:00
Owner
Copy Link

I don't think this is an intended rename since it is a CSS property.

I don't think this is an intended rename since it is a CSS property.
martonlente marked this conversation as resolved
themes/bthree/page-release_logs.php
@ -477,21 +477,24 @@ $is_latest = (($version_number >= $current_version_number) ? true : false);
<?php endwhile; // end of the loop. ?>
<?php
// TODO: cleanup function definition and call 'js_footer' if is not needed
Pablo Vazquez commented 2024-08-05 18:17:27 +02:00
Owner
Copy Link

I don't see how this relates to v2? I don't think we change any JavaScript other than renaming some classes.

I don't see how this relates to v2? I don't think we change any JavaScript other than renaming some classes.
Márton Lente commented 2024-08-06 10:59:20 +02:00
Author
Owner
Copy Link

There were some PHP fatal errors happening on the local dev server, likely because of the less permissive PHP error handling, and minor PHP config differences on localhost. (It's just a coincidence that it relates to JavaScript, as the rendered markup broke while calling / working with JS functions.) These changes are related to resolving these issues, which likely exist in production without causing problems. Added todos are for possible JS refactors I noticed while working on the latter.

See #79b158d

There were some PHP fatal errors happening on the local dev server, likely because of the less permissive PHP error handling, and minor PHP config differences on localhost. (It's just a coincidence that it relates to JavaScript, as the rendered markup broke while calling / working with JS functions.) These changes are related to resolving these issues, which likely exist in production without causing problems. Added todos are for possible JS refactors I noticed while working on the latter. See [#79b158d](https://projects.blender.org/infrastructure/blender-org/commit/79b158d8615ff46f08314b5b141bad52d6da7b08)
themes/bthree/src/styles/_base.sass Outdated
@ -2,0 +4,4 @@
+media-sm
--fs-xl: 5.6rem
$page-card-icon-size: 7.8rem
Pablo Vazquez commented 2024-08-05 18:01:13 +02:00
Owner
Copy Link

Can this be a CSS variable instead of Sass?

Can this be a CSS variable instead of Sass?
martonlente marked this conversation as resolved
themes/bthree/src/styles/_base.sass Outdated
@ -417,0 +431,4 @@
font-size: var(--fs-h4)
details
@extend .box
Pablo Vazquez commented 2024-08-05 18:03:53 +02:00
Owner
Copy Link

I don't think we need this anymore? We've got _details.sass in web-assets.

I don't think we need this anymore? We've got _details.sass in web-assets.
Márton Lente commented 2024-08-06 11:28:47 +02:00
Author
Owner
Copy Link

We currently use details on e.g. System Requirements page on blender.org (and on other pages with a similar look). As details blocks are top level blocks that are displayed as other boxes on the page, this is a way to keep current styling on the theme level, without introducing the need for database-level content changes.

Alternatively we can remove style overrides from the theme, and make content changes in the Gutenberg editor (by adding grouping elements with the box class). I'd suggest to keep it like this, and apply content changes and do styles' cleanup in a next iteration.

We currently use `details` on e.g. [System Requirements](https://www.blender.org/download/requirements) page on blender.org (and on other pages with a similar look). As details blocks are top level blocks that are displayed as other boxes on the page, this is a way to keep current styling on the theme level, without introducing the need for database-level content changes. Alternatively we can remove style overrides from the theme, and make content changes in the Gutenberg editor (by adding grouping elements with the `box` class). I'd suggest to keep it like this, and apply content changes and do styles' cleanup in a next iteration.
themes/bthree/src/styles/_editor.sass Outdated
@ -41,3 +41,3 @@
/* In the editor, make text visible in textarea when editing HTML. */
[class$="block-html-textarea"]
[class$="block-htms-textarea"]
Pablo Vazquez commented 2024-08-05 18:07:09 +02:00
Owner
Copy Link

Is this an intended change? html -> htms?

Is this an intended change? `html` -> `htms`?
martonlente marked this conversation as resolved
themes/bthree/src/styles/_release-logs.sass Outdated
@ -7,3 +7,2 @@
$header-background-blursize: 15px
&-background
$header-bg-blursize: 1.8rem
Pablo Vazquez commented 2024-08-05 18:08:14 +02:00
Owner
Copy Link

This could be a CSS variable too.

This could be a CSS variable too.
martonlente marked this conversation as resolved
Márton Lente added 1 commit 2024-08-06 10:43:40 +02:00 
Part of #104116
Márton Lente added 1 commit 2024-08-06 11:08:51 +02:00 
Part of #104116
Márton Lente added 1 commit 2024-08-06 11:32:52 +02:00 
Part of #104116
Márton Lente added 1 commit 2024-08-06 11:34:50 +02:00 
Part of #104116
Márton Lente added 1 commit 2024-08-06 11:46:20 +02:00 
Part of #104116
Márton Lente requested review from Pablo Vazquez 2024-08-06 12:05:21 +02:00
Márton Lente commented 2024-08-06 12:07:05 +02:00
Author
Owner
Copy Link

@pablovazquez thank you for the review!

I made the fixes, and added some comments on items that raised some questions or needed explanation.

@pablovazquez thank you for the review! I made the fixes, and added some comments on items that raised some questions or needed explanation.
Pablo Vazquez approved these changes 2024-08-06 12:21:30 +02:00
Pablo Vazquez left a comment
Owner
Copy Link

Thanks for the fixes! It's hard to test without the proper db so let's go with it and be around to fix whatever comes up :D

Thanks for the fixes! It's hard to test without the proper db so let's go with it and be around to fix whatever comes up :D
❤️ 1
Márton Lente added 1 commit 2024-08-06 14:33:12 +02:00 
Add template page-helper-bwa-v2-upgrade to help with database string replacements in BWA v2 deployment.
Part of  #104116
Márton Lente added 1 commit 2024-08-06 14:34:23 +02:00 
Part of #104116
Márton Lente added 1 commit 2024-08-06 14:35:01 +02:00
Márton Lente added 1 commit 2024-08-06 14:57:33 +02:00 
Add template part helper bwa search and replace query string processing
to optionally passing in drymode when calling wp_search_and_replace.
Part of #104116
Márton Lente added 1 commit 2024-08-09 16:58:02 +02:00 
Extend template part-helper-bwa-wp-search-and-replace to also execute
v2 upgrade search and replace with the following map file for post run fixes:
search-and-replace-map-v2-upgrade-post-wp.txt

Part of #104116
Márton Lente added 1 commit 2024-08-09 17:32:56 +02:00 
Add conditional query sring post to template
part-helper-bwa-wp-search-and-replace, to split base and post
replacements to two calls to prevent timeout.
Part of #104116
Márton Lente added 1 commit 2024-08-13 10:49:06 +02:00
Márton Lente merged commit 9279d2a7dc into main 2024-08-13 17:27:59 +02:00
Pablo Vazquez commented 2024-08-14 10:55:11 +02:00
Owner
Copy Link

Congrats @martonlente on such a massive milestone! 🚀

Congrats @martonlente on such a massive milestone! 🚀
❤️ 1
Sign in to join this conversation.
Reviewers
No reviewers
Pablo Vazquez
Labels
Clear labels   
legacy module
Rendering & Cycles

  
legacy module
User Interface

  
legacy project
Cycles

  
legacy project
Documentation

  
legacy project
Infrastructure: blender.org

  
legacy project
Infrastructure: Blender Web Assets

  
legacy project
Infrastructure: Websites

  
legacy project
User Interface

  
Priority
High

  
Priority
Low

  
Priority
Normal

  
Priority
Unbreak Now!

  
Status
Archived

  
Status
Confirmed

  
Status
Duplicate

  
Status
Needs Triage

  
Status
Resolved

  
Type
Bug

  
Type
Design

  
Type
Known Issue

  
Type
Report

  
Type
To Do

No Label
legacy module
Rendering & Cycles
legacy module
User Interface
legacy project
Cycles
legacy project
Documentation
legacy project
Infrastructure: blender.org
legacy project
Infrastructure: Blender Web Assets
legacy project
Infrastructure: Websites
legacy project
User Interface
Priority
High
Priority
Low
Priority
Normal
Priority
Unbreak Now!
Status
Archived
Status
Confirmed
Status
Duplicate
Status
Needs Triage
Status
Resolved
Type
Bug
Type
Design
Type
Known Issue
Type
Report
Type
To Do
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: infrastructure/blender-org#104116
No description provided.
Delete Branch "web-assets-v2-upgrade"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?