Merged in feature/from-pantheon (pull request #16)

code from pantheon

* code from pantheon

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss

@@ -0,0 +1,62 @@
+/* stylelint-disable block-closing-brace-newline-after */
+
+// Breakpoints
+// Forked from https://github.com/Automattic/wp-calypso/blob/46ae24d8800fb85da6acf057a640e60dac988a38/assets/stylesheets/shared/mixins/_breakpoints.scss
+
+// Think very carefully before adding a new breakpoint.
+// The list below is based on wp-admin's main breakpoints
+// See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
+$breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
+
+// @todo refactor breakpoints so they use the mixins from Gutenberg
+// https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss
+@mixin breakpoint($sizes...) {
+	@each $size in $sizes {
+		@if type-of($size) == string {
+			$approved-value: 0;
+			@each $breakpoint in $breakpoints {
+				$and-larger: ">" + $breakpoint;
+				$and-smaller: "<" + $breakpoint;
+
+				@if $size == $and-smaller {
+					$approved-value: 1;
+					@media (max-width: $breakpoint) {
+						@content;
+					}
+				} @else {
+					@if $size == $and-larger {
+						$approved-value: 2;
+						@media (min-width: $breakpoint + 1) {
+							@content;
+						}
+					} @else {
+						@each $breakpoint-end in $breakpoints {
+							$range: $breakpoint + "-" + $breakpoint-end;
+							@if $size == $range {
+								$approved-value: 3;
+								@media (min-width: $breakpoint + 1) and (max-width: $breakpoint-end) {
+									@content;
+								}
+							}
+						}
+					}
+				}
+			}
+			@if $approved-value == 0 {
+				$sizes: "";
+				@each $breakpoint in $breakpoints {
+					$sizes: $sizes + " " + $breakpoint;
+				}
+				@warn "ERROR in breakpoint(#{ $size }) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
+			}
+		} @else {
+			$sizes: "";
+			@each $breakpoint in $breakpoints {
+				$sizes: $sizes + " " + $breakpoint;
+			}
+			@error "ERROR in breakpoint(#{ $size }) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
+		}
+	}
+}
+
+/* stylelint-enable */

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/abstracts/_colors.scss

@@ -0,0 +1,22 @@
+@import "node_modules/@wordpress/base-styles/colors";
+@import "node_modules/@automattic/color-studio/dist/color-variables";
+
+// Bright colors
+$discount-color: $alert-green;
+
+$input-border-gray: #50575e;
+$input-border-dark: rgba(255, 255, 255, 0.4);
+$controls-border-dark: rgba(255, 255, 255, 0.6);
+$input-text-active: #2b2d2f;
+$input-placeholder-dark: rgba(255, 255, 255, 0.6);
+$input-text-dark: #fff;
+$input-background-dark: rgba(0, 0, 0, 0.1);
+$select-dropdown-dark: #1e1e1e;
+$select-dropdown-light: #fff;
+$select-item-dark: rgba(0, 0, 0, 0.4);
+$image-placeholder-border-color: #f2f2f2;
+
+// Universal colors for use on the frontend, currently being applied to checkout blocks.
+$universal-border: rgba(17, 17, 17, 0.3); // Used for form step borders.
+$universal-border-light: rgba(17, 17, 17, 0.115); // e7e7e7 on white.
+$universal-body-low-emphasis: rgba(17, 17, 17, 0.5); // Used for low emphasis text such as input labels.

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/abstracts/_mixins.scss

@@ -0,0 +1,311 @@
+$fontSizes: (
+	"smaller": 0.75,
+	"small": 0.875,
+	"regular": 1,
+	"large": 1.25,
+	"larger": 2,
+);
+
+// Maps a named font-size to its predefined size. Units default to em, but can
+// be changed using the multiplier parameter.
+@mixin font-size($sizeName, $multiplier: 1em) {
+	font-size: map.get($fontSizes, $sizeName) * $multiplier;
+}
+
+@keyframes spinner__animation {
+	0% {
+		animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes loading__animation {
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+// Adds animation to placeholder section
+@mixin placeholder($include-border-radius: true) {
+	outline: 0 !important;
+	border: 0 !important;
+	background-color: currentColor !important;
+	color: currentColor !important;
+	width: 100%;
+	@if $include-border-radius == true {
+		border-radius: 0.25rem;
+	}
+	display: block;
+	line-height: 1;
+	position: relative !important;
+	overflow: hidden !important;
+	max-width: 100% !important;
+	pointer-events: none;
+	box-shadow: none;
+	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
+	opacity: 0.15;
+
+	// Forces direct descendants to keep layout but lose visibility.
+	> * {
+		visibility: hidden;
+	}
+
+	&::after {
+		content: " ";
+		display: block;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		height: 100%;
+		background-repeat: no-repeat;
+		background-image: linear-gradient(90deg, currentColor, #f5f5f54d, currentColor);
+		transform: translateX(-100%);
+		animation: loading__animation 1.5s ease-in-out infinite;
+	}
+
+	@media screen and (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
+}
+
+@mixin force-content() {
+	&::before {
+		content: "\00a0";
+	}
+}
+
+// Hide an element from sighted users, but available to screen reader users.
+@mixin visually-hidden() {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	width: 1px;
+	margin: -1px;
+	overflow: hidden;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	overflow-wrap: normal !important;
+	word-wrap: normal !important;
+	padding: 0;
+	position: absolute !important;
+}
+
+@mixin visually-hidden-focus-reveal() {
+	background-color: #fff;
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	clip-path: none;
+	color: $input-text-active;
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 700;
+	height: auto;
+	left: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
+}
+
+@mixin reset-box() {
+	border: 0;
+	border-radius: 0;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+
+@mixin reset-color() {
+	color: inherit;
+}
+
+@mixin reset-typography() {
+	font-family: inherit;
+	font-size: inherit;
+	font-style: inherit;
+	font-weight: inherit;
+	letter-spacing: inherit;
+	line-height: inherit;
+	text-decoration: inherit;
+	text-transform: inherit;
+}
+
+// Reset <h1>, <h2>, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles.
+@mixin text-heading() {
+	@include reset-box();
+	@include reset-color();
+	@include reset-typography();
+	box-shadow: none;
+	display: inline;
+
+	background: transparent;
+}
+
+// Reset <button> style as if it was text. Useful for elements that must be `<button>` for a11y but don't need those styles.
+@mixin text-button() {
+	@include reset-box();
+	@include reset-color();
+	@include reset-typography();
+	background: transparent;
+	box-shadow: none;
+	display: inline;
+	text-shadow: none;
+
+	&:hover,
+	&:focus,
+	&:active {
+		background: transparent;
+	}
+}
+
+// Reset <button> style so we can use link style for action buttons.
+@mixin link-button() {
+	@include text-button();
+	text-decoration: underline;
+}
+
+@mixin hover-effect() {
+	&:hover {
+		text-decoration: none;
+		color: inherit;
+		cursor: pointer;
+	}
+}
+
+// Reset <button> style so we can use link style for action buttons in filter blocks
+@mixin filter-link-button() {
+	@include link-button();
+	@include hover-effect();
+	@include font-size(small);
+	text-decoration: underline;
+	font-weight: normal;
+	color: inherit;
+}
+
+// Makes sure long words are broken if they overflow the container.
+@mixin wrap-break-word() {
+	// This is the current standard, works in most browsers.
+	overflow-wrap: anywhere;
+	// Safari supports word-break.
+	word-break: break-word;
+	// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.
+	-ms-word-break: break-all;
+}
+
+// Add support for content alignment classes
+@mixin with-alignment() {
+	// Apply max-width to floated items that have no intrinsic width
+	&.alignleft,
+	&.alignright {
+		max-width: $content-width * 0.5;
+		width: 100%;
+	}
+
+	// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
+	// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
+	&::after {
+		display: block;
+		content: "";
+		font-size: 0;
+		min-height: inherit;
+
+		// IE doesn't support flex so omit that.
+		@supports (position: sticky) {
+			content: none;
+		}
+	}
+
+	// Aligned cover blocks should not use our global alignment rules
+	&.aligncenter,
+	&.alignleft,
+	&.alignright {
+		display: flex;
+	}
+}
+
+// Shows an semi-transparent overlay
+@mixin with-background-dim($opacity: 0.5) {
+	&.has-background-dim {
+		.background-dim__overlay::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			background: inherit;
+			border-radius: inherit;
+			opacity: $opacity;
+			z-index: 1;
+		}
+	}
+
+	@for $i from 1 through 10 {
+		&.has-background-dim-#{ $i * 10 } .background-dim__overlay::before {
+			opacity: $i * 0.1;
+		}
+	}
+}
+
+// Shows a border with the current color and a custom opacity. That can't be achieved
+// with normal border because `currentColor` doesn't allow tweaking the opacity, and
+// setting the opacity of the entire element would change the children's opacity too.
+@mixin with-translucent-border($border-width: 1px, $opacity: 0.3) {
+	position: relative;
+
+	&::after {
+		border-style: solid;
+		border-width: $border-width;
+		bottom: 0;
+		content: "";
+		display: block;
+		left: 0;
+		opacity: $opacity;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+}
+
+// Wraps the content with a media query specially targeting IE11.
+@mixin ie11() {
+	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+		@content;
+	}
+}
+
+// Positions an element absolutely and stretches it over the container
+@mixin absolute-stretch() {
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+}
+
+// Converts a px unit to em.
+@function em($size, $base: 16px) {
+	@return math.div($size, $base) * 1em;
+}
+
+// Encodes hex colors so they can be used in URL content.
+@function encode-color($color) {
+	@if type-of($color) != "color" or string.index(#{$color}, "#") != 1 {
+		@return $color;
+	}
+
+	$hex: string.slice(color.ie-hex-str($color), 4);
+	@return "%23" + unquote("#{$hex}");
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/abstracts/_variables.scss

@@ -0,0 +1,13 @@
+@import "node_modules/@wordpress/base-styles/variables";
+
+// grid-unit from base-styles is 8px.
+$gap-largest:  6 * $grid-unit;		// 48px
+$gap-larger:   4.5 * $grid-unit;	// 36px
+$gap-large:    3 * $grid-unit;		// 24px
+$gap:          2 * $grid-unit;		// 16px
+$gap-small:    1.5 * $grid-unit;	// 12px
+$gap-smaller:  1 * $grid-unit;		// 8px
+$gap-smallest: 0.5 * $grid-unit;	// 4px
+
+// Standard border radius for forms.
+$universal-border-radius: 4px;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/editor.scss

@@ -0,0 +1,62 @@
+// Remove the list styling, which is added back by core GB styles.
+.editor-styles-wrapper {
+	.wc-block-grid {
+		.wc-block-grid__products {
+			list-style: none;
+			margin: 0 (-$gap * 0.5) $gap;
+			padding: 0;
+
+			.wc-block-grid__product {
+				margin: 0 0 $gap-large 0;
+
+				.wc-block-grid__product-onsale {
+					position: absolute;
+				}
+			}
+		}
+
+		&.components-placeholder {
+			padding: 2em 1em;
+		}
+
+		&.is-loading,
+		&.is-not-found {
+			display: block;
+		}
+	}
+}
+
+// Style inline notices in the inspector.
+.components-base-control {
+	+ .wc-block-base-control-notice {
+		margin: -$gap 0 $gap;
+	}
+
+	+ .wc-block-base-control-notice:last-child {
+		margin: -$gap 0 $gap-small;
+	}
+}
+
+svg.wc-block-editor-components-block-icon--sparkles path {
+	fill: currentColor;
+}
+
+.block-editor-list-view-leaf.is-selected {
+	.block-editor-list-view-block-contents {
+		svg.wc-block-editor-components-block-icon {
+			color: currentColor;
+		}
+	}
+}
+
+.theme-twentytwenty {
+	.wp-block {
+		.wc-block-grid__product-title,
+		.wc-block-active-filters__title,
+		.wc-block-attribute-filter__title,
+		.wc-block-price-filter__title,
+		.wc-block-stock-filter__title {
+			@include font-size(regular);
+		}
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/css/style.scss

@@ -0,0 +1,351 @@
+// These styles are for the server side rendered product grid blocks.
+.wc-block-grid__products .wc-block-grid__product-image {
+	text-decoration: none;
+	display: block;
+	position: relative;
+
+	a {
+		text-decoration: none;
+		border: 0;
+		outline: 0;
+		box-shadow: none;
+	}
+
+	img {
+		height: auto;
+		width: auto;
+		max-width: 100%;
+
+		&[hidden] {
+			display: none;
+		}
+
+		&[alt=""] {
+			border: 1px solid $image-placeholder-border-color;
+		}
+	}
+}
+.edit-post-visual-editor .editor-block-list__block .wc-block-grid__product-title,
+.editor-styles-wrapper .wc-block-grid__product-title,
+.wc-block-grid__product-title {
+	font-family: inherit;
+	line-height: 1.2;
+	font-weight: 700;
+	padding: 0;
+	color: inherit;
+	font-size: inherit;
+	display: block;
+}
+.wc-block-grid__product-price {
+	display: block;
+
+	.wc-block-grid__product-price__regular {
+		margin-right: 0.5em;
+	}
+}
+.wc-block-grid__product-add-to-cart.wp-block-button {
+	word-break: break-word;
+	white-space: normal;
+	.wp-block-button__link {
+		word-break: break-word;
+		white-space: normal;
+		margin-right: auto !important;
+		margin-left: auto !important;
+		display: inline-flex;
+		justify-content: center;
+		text-align: center;
+		// Set button font size so it inherits from parent.
+		font-size: 1em;
+
+		&.loading {
+			opacity: 0.25;
+		}
+
+		&.added::after {
+			font-family: WooCommerce; /* stylelint-disable-line */
+			content: "\e017";
+			margin-left: 0.5em;
+			display: inline-block;
+			width: auto;
+			height: auto;
+		}
+
+		&.loading::after {
+			font-family: WooCommerce; /* stylelint-disable-line */
+			content: "\e031";
+			animation: spin 2s linear infinite;
+			margin-left: 0.5em;
+			display: inline-block;
+			width: auto;
+			height: auto;
+		}
+	}
+}
+// Remove button sugar if unlikely to fit.
+.has-5-columns:not(.alignfull),
+.has-6-columns,
+.has-7-columns,
+.has-8-columns,
+.has-9-columns {
+	.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after {
+		content: "";
+		margin: 0;
+	}
+}
+
+.wc-block-grid__product-rating {
+	display: block;
+
+	.wc-block-grid__product-rating__stars,
+	.star-rating {
+		overflow: hidden;
+		position: relative;
+		width: 5.3em;
+		height: 1.618em;
+		line-height: 1.618;
+		font-size: 1em;
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+		font-family: star;
+		font-weight: 400;
+		margin: 0 auto;
+		text-align: left;
+
+		&::before {
+			content: "\53\53\53\53\53";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			opacity: 0.5;
+			white-space: nowrap;
+		}
+		span {
+			overflow: hidden;
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			padding-top: 1.5em;
+		}
+		span::before {
+			content: "\53\53\53\53\53";
+			color: inherit;
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			white-space: nowrap;
+		}
+	}
+}
+.wc-block-grid__product-image .wc-block-grid__product-onsale,
+.wc-block-grid .wc-block-grid__product-onsale {
+	@include font-size(small);
+	padding: em($gap-smallest) em($gap-small);
+	display: inline-block;
+	width: auto;
+	border: 1px solid #43454b;
+	border-radius: $universal-border-radius;
+	color: #43454b;
+	background: #fff;
+	text-align: center;
+	text-transform: uppercase;
+	font-weight: 600;
+	z-index: 9;
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	left: auto;
+}
+
+// Element spacing.
+.wc-block-grid__product {
+	// Prevent link and image taking the full width unnecessarily, which might cause: https://github.com/woocommerce/woocommerce-blocks/issues/11438
+	.wc-block-grid__product-link,
+	.wc-block-grid__product-image {
+		display: inline-block;
+		position: relative;
+	}
+
+	// Not operator necessary for avoid this problem: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5925/files#r814043454
+	.wc-block-grid__product-image:not(.wc-block-components-product-image),
+	.wc-block-grid__product-title {
+		margin: 0 0 $gap-small;
+	}
+	// If centered when toggling alignment on, use auto margins to prevent flexbox stretching it.
+	.wc-block-grid__product-price,
+	.wc-block-grid__product-rating,
+	.wc-block-grid__product-add-to-cart,
+	.wc-block-grid__product-onsale {
+		margin: 0 auto $gap-small;
+	}
+}
+
+.theme-twentysixteen {
+	.wc-block-grid {
+		// Prevent white theme styles.
+		.price ins {
+			color: #77a464;
+		}
+	}
+}
+
+.theme-twentynineteen {
+	.wc-block-grid__product {
+		font-size: 0.88889em;
+	}
+	// Change the title font to match headings.
+	.wc-block-grid__product-title,
+	.wc-block-grid__product-onsale,
+	.wc-block-components-product-title,
+	.wc-block-components-product-sale-badge {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	}
+	.wc-block-grid__product-title::before {
+		display: none;
+	}
+	.wc-block-grid__product-onsale,
+	.wc-block-components-product-sale-badge {
+		line-height: 1;
+	}
+	.editor-styles-wrapper .wp-block-button .wp-block-button__link:not(.has-text-color) {
+		color: #fff;
+	}
+}
+
+.theme-twentytwenty {
+	$twentytwenty-headings: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, sans-serif;
+	$twentytwenty-highlights-color: #cd2653;
+
+	.wc-block-grid__product-link {
+		color: #000;
+	}
+
+	.wc-block-grid__product-title,
+	.wc-block-components-product-title {
+		font-family: $twentytwenty-headings;
+		color: $twentytwenty-highlights-color;
+		@include font-size(regular);
+	}
+
+	.wp-block-columns .wc-block-components-product-title {
+		margin-top: 0;
+	}
+
+	.wc-block-grid__product-price,
+	.wc-block-components-product-price {
+		&__value,
+		.woocommerce-Price-amount {
+			font-family: $twentytwenty-headings;
+			font-size: 0.9em;
+		}
+
+		del {
+			opacity: 0.5;
+		}
+
+		ins {
+			text-decoration: none;
+		}
+	}
+
+	.wc-block-grid__product-rating,
+	.star-rating {
+		font-size: 0.7em;
+
+		.wc-block-grid__product-rating__stars,
+		.wc-block-components-product-rating__stars {
+			line-height: 1;
+		}
+	}
+
+	.wc-block-grid__product-add-to-cart > .wp-block-button__link,
+	.wc-block-components-product-button > .wp-block-button__link {
+		font-family: $twentytwenty-headings;
+	}
+
+	.wc-block-grid__products .wc-block-grid__product-onsale,
+	.wc-block-components-product-sale-badge {
+		background: $twentytwenty-highlights-color;
+		color: #fff;
+		font-family: $twentytwenty-headings;
+		font-weight: 700;
+		letter-spacing: -0.02em;
+		line-height: 1.2;
+		text-transform: uppercase;
+	}
+
+	// Override style from WC Core that set its position to absolute.
+	// These rulesets can be removed once https://github.com/woocommerce/woocommerce/pull/26516 is released.
+	.wc-block-grid__products .wc-block-components-product-sale-badge {
+		position: static;
+	}
+	.wc-block-grid__products .wc-block-grid__product-image .wc-block-components-product-sale-badge {
+		position: absolute;
+	}
+
+	// These styles are not applied to the All Products atomic block, so it can be positioned normally.
+	.wc-block-grid__products .wc-block-grid__product-onsale:not(.wc-block-components-product-sale-badge) {
+		position: absolute;
+		right: 4px;
+		top: 4px;
+		z-index: 1;
+	}
+
+	.wc-block-active-filters__title,
+	.wc-block-attribute-filter__title,
+	.wc-block-price-filter__title,
+	.wc-block-stock-filter__title {
+		@include font-size(regular);
+	}
+
+	.wc-block-active-filters .wc-block-active-filters__clear-all {
+		@include font-size(smaller);
+	}
+
+	.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
+		@include font-size(smaller);
+	}
+
+	@media only screen and (min-width: 768px) {
+		.wc-block-grid__products .wc-block-grid__product-onsale {
+			@include font-size(small);
+			padding: em($gap-smaller);
+		}
+	}
+
+	@media only screen and (min-width: 1168px) {
+		.wc-block-grid__products .wc-block-grid__product-onsale {
+			@include font-size(small);
+			padding: em($gap-smaller);
+		}
+	}
+}
+
+.theme-twentytwentytwo {
+	.wc-block-grid__product-add-to-cart {
+		.added_to_cart {
+			margin-top: $gap-small;
+			display: block;
+		}
+	}
+
+	.wc-block-components-product-price,
+	.wc-block-grid__product-price {
+		ins {
+			text-decoration: none;
+		}
+	}
+}
+
+// Default screen-reader styles. Included as a fallback for themes that don't have support.
+.screen-reader-text {
+	@include visually-hidden();
+}
+.screen-reader-text:focus {
+	@include visually-hidden-focus-reveal();
+}
+
+.wp-block-group.woocommerce.product .up-sells.upsells.products {
+	max-width: var(--wp--style--global--wide-size);
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/component-init.js

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import { registerBlockComponent } from '@woocommerce/blocks-registry';
+import { lazy } from '@wordpress/element';
+import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings';
+
+// Modify webpack publicPath at runtime based on location of WordPress Plugin.
+// eslint-disable-next-line no-undef,camelcase
+__webpack_public_path__ = WC_BLOCKS_BUILD_URL;
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-price',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-price" */ './product-elements/price/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-image',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-image" */ './product-elements/image/frontend'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-title',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-title" */ './product-elements/title/frontend'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-rating',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-rating" */ './product-elements/rating/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-rating-stars',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-rating-stars" */ './product-elements/rating-stars/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-rating-counter',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-rating-counter" */ './product-elements/rating-counter/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-average-rating',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-average-rating" */ './product-elements/average-rating/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-button',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-button" */ './product-elements/button/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-summary',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-summary" */ './product-elements/summary/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-sale-badge',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-sale-badge" */ './product-elements/sale-badge/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-sku',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-sku" */ './product-elements/sku/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-stock-indicator',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-stock-indicator" */ './product-elements/stock-indicator/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-add-to-cart',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-add-to-cart" */ './product-elements/add-to-cart/frontend'
+		)
+	),
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/index.js

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import './product-elements/title';
+import './product-elements/price';
+import './product-elements/image';
+import './product-elements/rating';
+import './product-elements/rating-stars';
+import './product-elements/rating-counter';
+import './product-elements/average-rating';
+import './product-elements/button';
+import './product-elements/summary';
+import './product-elements/sale-badge';
+import './product-elements/sku';
+import './product-elements/stock-indicator';
+import './product-elements/add-to-cart';
+import './product-elements/add-to-cart-form';
+import './product-elements/product-image-gallery';
+import './product-elements/product-details';
+import './product-elements/product-reviews';
+import './product-elements/related-products';
+import './product-elements/product-meta';

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/block.json

@@ -0,0 +1,18 @@
+{
+	"name": "woocommerce/add-to-cart-form",
+	"version": "1.0.0",
+	"title": "Add to Cart with Options",
+	"description": "Display a button so the customer can add a product to their cart. Options will also be displayed depending on product type. e.g. quantity, variation.",
+	"attributes": {
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"usesContext": ["postId"],
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Disabled, Tooltip } from '@wordpress/components';
+import { Skeleton } from '@woocommerce/base-components/skeleton';
+import { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
+export interface Attributes {
+	className?: string;
+	isDescendentOfSingleProductBlock: boolean;
+}
+
+const Edit = ( props: BlockEditProps< Attributes > ) => {
+	const { setAttributes } = props;
+	const blockProps = useBlockProps( {
+		className: 'wc-block-add-to-cart-form',
+	} );
+	const { isDescendentOfSingleProductBlock } =
+		useIsDescendentOfSingleProductBlock( {
+			blockClientId: blockProps?.id,
+		} );
+
+	useEffect( () => {
+		setAttributes( {
+			isDescendentOfSingleProductBlock,
+		} );
+	}, [ setAttributes, isDescendentOfSingleProductBlock ] );
+
+	return (
+		<div { ...blockProps }>
+			<Tooltip
+				text="Customer will see product add-to-cart options in this space, dependent on the product type. "
+				position="bottom right"
+			>
+				<div className="wc-block-editor-add-to-cart-form-container">
+					<Skeleton numberOfLines={ 3 } />
+					<Disabled>
+						<div className="quantity">
+							<input
+								type={ 'number' }
+								value={ '1' }
+								className={ 'input-text qty text' }
+								readOnly
+							/>
+						</div>
+						<button
+							className={ `single_add_to_cart_button button alt wp-element-button` }
+						>
+							{ __(
+								'Add to cart',
+								'woo-gutenberg-products-block'
+							) }
+						</button>
+					</Disabled>
+				</div>
+			</Tooltip>
+		</div>
+	);
+};
+
+export default Edit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss

@@ -0,0 +1,6 @@
+.wc-block-editor-add-to-cart-form-container {
+	cursor: help;
+	gap: 10px;
+	display: flex;
+	flex-direction: column;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+import { Icon, button } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import './style.scss';
+import './editor.scss';
+
+const blockSettings = {
+	edit,
+	icon: {
+		src: (
+			<Icon
+				icon={ button }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	ancestor: [ 'woocommerce/single-product' ],
+	save() {
+		return null;
+	},
+};
+
+registerBlockSingleProductTemplate( {
+	blockName: metadata.name,
+	blockMetadata: metadata,
+	blockSettings,
+	isAvailableOnPostEditor: true,
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss

@@ -0,0 +1,25 @@
+.wc-block-add-to-cart-form {
+	width: unset;
+	/**
+	* This is a base style for the input text element in WooCommerce that prevents inputs from appearing too small.
+	*
+	* @link https://github.com/woocommerce/woocommerce/blob/95ca53675f2817753d484583c96ca9ab9f725172/plugins/woocommerce/client/legacy/css/woocommerce-blocktheme.scss#L203-L206
+	*/
+	.input-text {
+		font-size: var(--wp--preset--font-size--small);
+		padding: 0.9rem 1.1rem;
+	}
+
+	.quantity {
+		display: inline-block;
+		float: none;
+		margin-right: 4px;
+		vertical-align: middle;
+
+		.qty {
+			margin-right: 0.5rem;
+			width: 3.631em;
+			text-align: center;
+		}
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/attributes.ts

@@ -0,0 +1,12 @@
+export const blockAttributes = {
+	showFormElements: {
+		type: 'boolean',
+		default: false,
+	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/block.tsx

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import {
+	AddToCartFormContextProvider,
+	useAddToCartFormContext,
+} from '@woocommerce/base-context';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import { isEmpty } from '@woocommerce/types';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { AddToCartButton } from './shared';
+import {
+	SimpleProductForm,
+	VariableProductForm,
+	ExternalProductForm,
+	GroupedProductForm,
+} from './product-types';
+
+interface Props {
+	/**
+	 * CSS Class name for the component.
+	 */
+	className?: string;
+	/**
+	 * Whether or not to show form elements.
+	 */
+	showFormElements?: boolean;
+}
+
+/**
+ * Renders the add to cart form using useAddToCartFormContext.
+ */
+const AddToCartForm = () => {
+	const { showFormElements, productType } = useAddToCartFormContext();
+
+	if ( showFormElements ) {
+		if ( productType === 'variable' ) {
+			return <VariableProductForm />;
+		}
+		if ( productType === 'grouped' ) {
+			return <GroupedProductForm />;
+		}
+		if ( productType === 'external' ) {
+			return <ExternalProductForm />;
+		}
+		if ( productType === 'simple' || productType === 'variation' ) {
+			return <SimpleProductForm />;
+		}
+		return null;
+	}
+
+	return <AddToCartButton />;
+};
+
+/**
+ * Product Add to Form Block Component.
+ */
+const Block = ( { className, showFormElements }: Props ) => {
+	const { product } = useProductDataContext();
+	const componentClass = classnames(
+		className,
+		'wc-block-components-product-add-to-cart',
+		{
+			'wc-block-components-product-add-to-cart--placeholder':
+				isEmpty( product ),
+		}
+	);
+
+	return (
+		<AddToCartFormContextProvider
+			product={ product }
+			showFormElements={ showFormElements }
+		>
+			<div className={ componentClass }>
+				<AddToCartForm />
+			</div>
+		</AddToCartFormContextProvider>
+	);
+};
+
+export default withProductDataContext( Block );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/constants.tsx

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cart } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __( 'Add to Cart', 'woo-gutenberg-products-block' );
+export const BLOCK_ICON = (
+	<Icon icon={ cart } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION = __(
+	'Displays an add to cart button. Optionally displays other add to cart form elements.',
+	'woo-gutenberg-products-block'
+);

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/edit.tsx

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import classnames from 'classnames';
+import {
+	Disabled,
+	PanelBody,
+	ToggleControl,
+	Notice,
+} from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { productSupportsAddToCartForm } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+interface EditProps {
+	attributes: {
+		className: string;
+		showFormElements: boolean;
+	};
+	setAttributes: ( attributes: { showFormElements: boolean } ) => void;
+}
+
+const Edit = ( { attributes, setAttributes }: EditProps ) => {
+	const { product } = useProductDataContext();
+	const { className, showFormElements } = attributes;
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-add-to-cart'
+			) }
+		>
+			<EditProductLink productId={ product.id } />
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
+				>
+					{ productSupportsAddToCartForm( product ) ? (
+						<ToggleControl
+							label={ __(
+								'Display form elements',
+								'woo-gutenberg-products-block'
+							) }
+							help={ __(
+								'Depending on product type, allow customers to select a quantity, variations etc.',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ showFormElements }
+							onChange={ () =>
+								setAttributes( {
+									showFormElements: ! showFormElements,
+								} )
+							}
+						/>
+					) : (
+						<Notice
+							className="wc-block-components-product-add-to-cart-notice"
+							isDismissible={ false }
+							status="info"
+						>
+							{ __(
+								'This product does not support the block based add to cart form. A link to the product page will be shown instead.',
+								'woo-gutenberg-products-block'
+							) }
+						</Notice>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its add to cart form.',
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/frontend.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/index.ts

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './edit';
+import attributes from './attributes';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: { src: icon },
+	edit,
+	attributes,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-add-to-cart', {
+	...sharedConfig,
+	...blockConfig,
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/external.tsx

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import AddToCartButton from '../shared/add-to-cart-button';
+
+/**
+ * External Product Add To Cart Form
+ */
+const External = () => {
+	return <AddToCartButton />;
+};
+
+export default External;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped.tsx

@@ -0,0 +1,8 @@
+/**
+ * Grouped Product Add To Cart Form
+ */
+const Grouped = () => (
+	<p>This is a placeholder for the grouped products form element.</p>
+);
+
+export default Grouped;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/index.ts

@@ -0,0 +1,4 @@
+export { default as SimpleProductForm } from './simple';
+export { default as VariableProductForm } from './variable/index';
+export { default as ExternalProductForm } from './external';
+export { default as GroupedProductForm } from './grouped';

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/simple.tsx

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import { AddToCartButton, QuantityInput, ProductUnavailable } from '../shared';
+
+/**
+ * Simple Product Add To Cart Form
+ */
+const Simple = () => {
+	// @todo Add types for `useAddToCartFormContext`
+	const {
+		product,
+		quantity,
+		minQuantity,
+		maxQuantity,
+		multipleOf,
+		dispatchActions,
+		isDisabled,
+	} = useAddToCartFormContext();
+
+	if ( product.id && ! product.is_purchasable ) {
+		return <ProductUnavailable />;
+	}
+
+	if ( product.id && ! product.is_in_stock ) {
+		return (
+			<ProductUnavailable
+				reason={ __(
+					'This product is currently out of stock and cannot be purchased.',
+					'woo-gutenberg-products-block'
+				) }
+			/>
+		);
+	}
+
+	return (
+		<>
+			<QuantityInput
+				value={ quantity }
+				min={ minQuantity }
+				max={ maxQuantity }
+				step={ multipleOf }
+				disabled={ isDisabled }
+				onChange={ dispatchActions.setQuantity }
+			/>
+			<AddToCartButton />
+		</>
+	);
+};
+
+export default Simple;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import {
+	AddToCartButton,
+	QuantityInput,
+	ProductUnavailable,
+} from '../../shared';
+import VariationAttributes from './variation-attributes';
+
+/**
+ * Variable Product Add To Cart Form
+ */
+const Variable = () => {
+	// @todo Add types for `useAddToCartFormContext`
+	const {
+		product,
+		quantity,
+		minQuantity,
+		maxQuantity,
+		multipleOf,
+		dispatchActions,
+		isDisabled,
+	} = useAddToCartFormContext();
+
+	if ( product.id && ! product.is_purchasable ) {
+		return <ProductUnavailable />;
+	}
+
+	if ( product.id && ! product.is_in_stock ) {
+		return (
+			<ProductUnavailable
+				reason={ __(
+					'This product is currently out of stock and cannot be purchased.',
+					'woo-gutenberg-products-block'
+				) }
+			/>
+		);
+	}
+
+	return (
+		<>
+			<VariationAttributes
+				product={ product }
+				dispatchers={ dispatchActions }
+			/>
+			<QuantityInput
+				value={ quantity }
+				min={ minQuantity }
+				max={ maxQuantity }
+				step={ multipleOf }
+				disabled={ isDisabled }
+				onChange={ dispatchActions.setQuantity }
+			/>
+			<AddToCartButton />
+		</>
+	);
+};
+
+export default Variable;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/types.ts

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { Dictionary } from '@woocommerce/types';
+
+export type AttributesMap = Record<
+	string,
+	{ id: number; attributes: Dictionary }
+>;
+
+export interface VariationParam {
+	id: number;
+	variation: {
+		attribute: string;
+		value: string;
+	}[];
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-picker.tsx

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useShallowEqual } from '@woocommerce/base-hooks';
+import type { SelectControl } from '@wordpress/components';
+import { Dictionary, ProductResponseAttributeItem } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import AttributeSelectControl from './attribute-select-control';
+import {
+	getVariationMatchingSelectedAttributes,
+	getActiveSelectControlOptions,
+	getDefaultAttributes,
+} from './utils';
+import { AttributesMap, VariationParam } from '../types';
+
+interface Props {
+	attributes: Record< string, ProductResponseAttributeItem >;
+	setRequestParams: ( param: VariationParam ) => void;
+	variationAttributes: AttributesMap;
+}
+
+/**
+ * AttributePicker component.
+ */
+const AttributePicker = ( {
+	attributes,
+	variationAttributes,
+	setRequestParams,
+}: Props ) => {
+	const currentAttributes = useShallowEqual( attributes );
+	const currentVariationAttributes = useShallowEqual( variationAttributes );
+	const [ variationId, setVariationId ] = useState( 0 );
+	const [ selectedAttributes, setSelectedAttributes ] =
+		useState< Dictionary >( {} );
+	const [ hasSetDefaults, setHasSetDefaults ] = useState( false );
+
+	// Get options for each attribute picker.
+	const filteredAttributeOptions = useMemo( () => {
+		return getActiveSelectControlOptions(
+			currentAttributes,
+			currentVariationAttributes,
+			selectedAttributes
+		);
+	}, [ selectedAttributes, currentAttributes, currentVariationAttributes ] );
+
+	// Set default attributes as selected.
+	useEffect( () => {
+		if ( ! hasSetDefaults ) {
+			const defaultAttributes = getDefaultAttributes( attributes );
+			if ( defaultAttributes ) {
+				setSelectedAttributes( {
+					...defaultAttributes,
+				} );
+			}
+			setHasSetDefaults( true );
+		}
+	}, [ selectedAttributes, attributes, hasSetDefaults ] );
+
+	// Select variations when selections are change.
+	useEffect( () => {
+		const hasSelectedAllAttributes =
+			Object.values( selectedAttributes ).filter(
+				( selected ) => selected !== ''
+			).length === Object.keys( currentAttributes ).length;
+
+		if ( hasSelectedAllAttributes ) {
+			setVariationId(
+				getVariationMatchingSelectedAttributes(
+					currentAttributes,
+					currentVariationAttributes,
+					selectedAttributes
+				)
+			);
+		} else if ( variationId > 0 ) {
+			// Unset variation when form is incomplete.
+			setVariationId( 0 );
+		}
+	}, [
+		selectedAttributes,
+		variationId,
+		currentAttributes,
+		currentVariationAttributes,
+	] );
+
+	// Set requests params as variation ID and data changes.
+	useEffect( () => {
+		setRequestParams( {
+			id: variationId,
+			variation: Object.keys( selectedAttributes ).map(
+				( attributeName ) => {
+					return {
+						attribute: attributeName,
+						value: selectedAttributes[ attributeName ],
+					};
+				}
+			),
+		} );
+	}, [ setRequestParams, variationId, selectedAttributes ] );
+
+	return (
+		<div className="wc-block-components-product-add-to-cart-attribute-picker">
+			{ Object.keys( currentAttributes ).map( ( attributeName ) => (
+				<AttributeSelectControl
+					key={ attributeName }
+					attributeName={ attributeName }
+					options={
+						filteredAttributeOptions[ attributeName ].filter(
+							Boolean
+						) as SelectControl.Option[]
+					}
+					value={ selectedAttributes[ attributeName ] }
+					onChange={ ( selected ) => {
+						setSelectedAttributes( {
+							...selectedAttributes,
+							[ attributeName ]: selected,
+						} );
+					} }
+				/>
+			) ) }
+		</div>
+	);
+};
+
+export default AttributePicker;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.tsx

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { SelectControl } from 'wordpress-components';
+import type { SelectControl as SelectControlType } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
+import classnames from 'classnames';
+import { ValidationInputError } from '@woocommerce/blocks-components';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+interface Props extends SelectControlType.Props< string > {
+	attributeName: string;
+	errorMessage?: string;
+}
+
+// Default option for select boxes.
+const selectAnOption = {
+	value: '',
+	label: __( 'Select an option', 'woo-gutenberg-products-block' ),
+};
+
+/**
+ * VariationAttributeSelect component.
+ */
+const AttributeSelectControl = ( {
+	attributeName,
+	options = [],
+	value = '',
+	onChange = () => void 0,
+	errorMessage = __(
+		'Please select a value.',
+		'woo-gutenberg-products-block'
+	),
+}: Props ) => {
+	const errorId = attributeName;
+
+	const { setValidationErrors, clearValidationError } =
+		useDispatch( VALIDATION_STORE_KEY );
+
+	const { error } = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return {
+			error: store.getValidationError( errorId ) || {},
+		};
+	} );
+
+	useEffect( () => {
+		if ( value ) {
+			clearValidationError( errorId );
+		} else {
+			setValidationErrors( {
+				[ errorId ]: {
+					message: errorMessage,
+					hidden: true,
+				},
+			} );
+		}
+	}, [
+		value,
+		errorId,
+		errorMessage,
+		clearValidationError,
+		setValidationErrors,
+	] );
+
+	// Remove validation errors when unmounted.
+	useEffect(
+		() => () => void clearValidationError( errorId ),
+		[ errorId, clearValidationError ]
+	);
+
+	return (
+		<div className="wc-block-components-product-add-to-cart-attribute-picker__container">
+			<SelectControl
+				label={ decodeEntities( attributeName ) }
+				value={ value || '' }
+				options={ [ selectAnOption, ...options ] }
+				onChange={ onChange }
+				required={ true }
+				className={ classnames(
+					'wc-block-components-product-add-to-cart-attribute-picker__select',
+					{
+						'has-error': error?.message && ! error?.hidden,
+					}
+				) }
+			/>
+			<ValidationInputError
+				propertyName={ errorId }
+				elementId={ errorId }
+			/>
+		</div>
+	);
+};
+
+export default AttributeSelectControl;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { ProductResponseItem } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import AttributePicker from './attribute-picker';
+import { getAttributes, getVariationAttributes } from './utils';
+
+interface Props {
+	dispatchers: { setRequestParams: () => void };
+	product: ProductResponseItem;
+}
+
+/**
+ * VariationAttributes component.
+ */
+const VariationAttributes = ( { dispatchers, product }: Props ) => {
+	const attributes = getAttributes( product.attributes );
+	const variationAttributes = getVariationAttributes( product.variations );
+	if (
+		Object.keys( attributes ).length === 0 ||
+		Object.keys( variationAttributes ).length === 0
+	) {
+		return null;
+	}
+
+	return (
+		<AttributePicker
+			attributes={ attributes }
+			variationAttributes={ variationAttributes }
+			setRequestParams={ dispatchers.setRequestParams }
+		/>
+	);
+};
+
+export default VariationAttributes;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss

@@ -0,0 +1,33 @@
+.wc-block-components-product-add-to-cart-attribute-picker {
+	margin: 0;
+	flex-basis: 100%;
+
+	label {
+		display: block;
+		@include font-size(regular);
+	}
+
+	.wc-block-components-product-add-to-cart-attribute-picker__container {
+		position: relative;
+	}
+
+	.wc-block-components-product-add-to-cart-attribute-picker__select {
+		margin: 0 0 em($gap-small) 0;
+
+		select {
+			min-width: 60%;
+			min-height: 1.75em;
+		}
+
+		&.has-error {
+			margin-bottom: $gap-large;
+
+			select {
+				border-color: $alert-red;
+				&:focus {
+					outline-color: $alert-red;
+				}
+			}
+		}
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/test/index.ts

@@ -0,0 +1,487 @@
+/**
+ * External dependencies
+ */
+import { ProductResponseAttributeItem } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getAttributes,
+	getVariationAttributes,
+	getVariationsMatchingSelectedAttributes,
+	getVariationMatchingSelectedAttributes,
+	getActiveSelectControlOptions,
+	getDefaultAttributes,
+} from '../utils';
+
+const rawAttributeData: ProductResponseAttributeItem[] = [
+	{
+		id: 1,
+		name: 'Color',
+		taxonomy: 'pa_color',
+		has_variations: true,
+		terms: [
+			{
+				id: 22,
+				name: 'Blue',
+				slug: 'blue',
+				default: true,
+			},
+			{
+				id: 23,
+				name: 'Green',
+				slug: 'green',
+				default: false,
+			},
+			{
+				id: 24,
+				name: 'Red',
+				slug: 'red',
+				default: false,
+			},
+		],
+	},
+	{
+		id: 0,
+		name: 'Logo',
+		taxonomy: 'pa_logo',
+		has_variations: true,
+		terms: [
+			{
+				id: 0,
+				name: 'Yes',
+				slug: 'Yes',
+				default: true,
+			},
+			{
+				id: 0,
+				name: 'No',
+				slug: 'No',
+				default: false,
+			},
+		],
+	},
+	{
+		id: 0,
+		name: 'Non-variable attribute',
+		taxonomy: 'pa_non-variable-attribute',
+		has_variations: false,
+		terms: [
+			{
+				id: 0,
+				name: 'Test',
+				slug: 'Test',
+				default: false,
+			},
+			{
+				id: 0,
+				name: 'Test 2',
+				slug: 'Test 2',
+				default: false,
+			},
+		],
+	},
+];
+
+const rawVariations = [
+	{
+		id: 35,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'blue',
+			},
+			{
+				name: 'Logo',
+				value: 'Yes',
+			},
+		],
+	},
+	{
+		id: 28,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'red',
+			},
+			{
+				name: 'Logo',
+				value: 'No',
+			},
+		],
+	},
+	{
+		id: 29,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'green',
+			},
+			{
+				name: 'Logo',
+				value: 'No',
+			},
+		],
+	},
+	{
+		id: 30,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'blue',
+			},
+			{
+				name: 'Logo',
+				value: 'No',
+			},
+		],
+	},
+];
+
+const formattedAttributes = {
+	Color: {
+		id: 1,
+		name: 'Color',
+		taxonomy: 'pa_color',
+		has_variations: true,
+		terms: [
+			{
+				id: 22,
+				name: 'Blue',
+				slug: 'blue',
+				default: true,
+			},
+			{
+				id: 23,
+				name: 'Green',
+				slug: 'green',
+				default: false,
+			},
+			{
+				id: 24,
+				name: 'Red',
+				slug: 'red',
+				default: false,
+			},
+		],
+	},
+	Size: {
+		id: 2,
+		name: 'Size',
+		taxonomy: 'pa_size',
+		has_variations: true,
+		terms: [
+			{
+				id: 25,
+				name: 'Large',
+				slug: 'large',
+				default: false,
+			},
+			{
+				id: 26,
+				name: 'Medium',
+				slug: 'medium',
+				default: true,
+			},
+			{
+				id: 27,
+				name: 'Small',
+				slug: 'small',
+				default: false,
+			},
+		],
+	},
+};
+
+describe( 'Testing utils', () => {
+	describe( 'Testing getAttributes()', () => {
+		it( 'returns empty object if there are no attributes', () => {
+			const attributes = getAttributes( null );
+			expect( attributes ).toStrictEqual( {} );
+		} );
+		it( 'returns list of attributes when given valid data', () => {
+			const attributes = getAttributes( rawAttributeData );
+			expect( attributes ).toStrictEqual( {
+				Color: {
+					id: 1,
+					name: 'Color',
+					taxonomy: 'pa_color',
+					has_variations: true,
+					terms: [
+						{
+							id: 22,
+							name: 'Blue',
+							slug: 'blue',
+							default: true,
+						},
+						{
+							id: 23,
+							name: 'Green',
+							slug: 'green',
+							default: false,
+						},
+						{
+							id: 24,
+							name: 'Red',
+							slug: 'red',
+							default: false,
+						},
+					],
+				},
+				Logo: {
+					id: 0,
+					name: 'Logo',
+					taxonomy: 'pa_logo',
+					has_variations: true,
+					terms: [
+						{
+							id: 0,
+							name: 'Yes',
+							slug: 'Yes',
+							default: true,
+						},
+						{
+							id: 0,
+							name: 'No',
+							slug: 'No',
+							default: false,
+						},
+					],
+				},
+			} );
+		} );
+	} );
+	describe( 'Testing getVariationAttributes()', () => {
+		it( 'returns empty object if there are no variations', () => {
+			const variationAttributes = getVariationAttributes( null );
+			expect( variationAttributes ).toStrictEqual( {} );
+		} );
+		it( 'returns list of attribute names and value pairs when given valid data', () => {
+			const variationAttributes = getVariationAttributes( rawVariations );
+			expect( variationAttributes ).toStrictEqual( {
+				'id:35': {
+					id: 35,
+					attributes: {
+						Color: 'blue',
+						Logo: 'Yes',
+					},
+				},
+				'id:28': {
+					id: 28,
+					attributes: {
+						Color: 'red',
+						Logo: 'No',
+					},
+				},
+				'id:29': {
+					id: 29,
+					attributes: {
+						Color: 'green',
+						Logo: 'No',
+					},
+				},
+				'id:30': {
+					id: 30,
+					attributes: {
+						Color: 'blue',
+						Logo: 'No',
+					},
+				},
+			} );
+		} );
+	} );
+	describe( 'Testing getVariationsMatchingSelectedAttributes()', () => {
+		const attributes = getAttributes( rawAttributeData );
+		const variationAttributes = getVariationAttributes( rawVariations );
+
+		it( 'returns all variations, in the correct order, if no selections have been made yet', () => {
+			const selectedAttributes = {};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [ 35, 28, 29, 30 ] );
+		} );
+
+		it( 'returns correct subset of variations after a selection', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+			};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [ 35, 30 ] );
+		} );
+
+		it( 'returns correct subset of variations after all selections', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+				Logo: 'No',
+			};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [ 30 ] );
+		} );
+
+		it( 'returns no results if selection does not match or is invalid', () => {
+			const selectedAttributes = {
+				Color: 'brown',
+			};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [] );
+		} );
+	} );
+	describe( 'Testing getVariationMatchingSelectedAttributes()', () => {
+		const attributes = getAttributes( rawAttributeData );
+		const variationAttributes = getVariationAttributes( rawVariations );
+
+		it( 'returns first match if no selections have been made yet', () => {
+			const selectedAttributes = {};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 35 );
+		} );
+
+		it( 'returns first match after single selection', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+			};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 35 );
+		} );
+
+		it( 'returns correct match after all selections', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+				Logo: 'No',
+			};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 30 );
+		} );
+
+		it( 'returns no match if invalid', () => {
+			const selectedAttributes = {
+				Color: 'brown',
+			};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 0 );
+		} );
+	} );
+	describe( 'Testing getActiveSelectControlOptions()', () => {
+		const attributes = getAttributes( rawAttributeData );
+		const variationAttributes = getVariationAttributes( rawVariations );
+
+		it( 'returns all possible options if no selections have been made yet', () => {
+			const selectedAttributes = {};
+			const controlOptions = getActiveSelectControlOptions(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( controlOptions ).toStrictEqual( {
+				Color: [
+					{
+						value: 'blue',
+						label: 'Blue',
+					},
+					{
+						value: 'green',
+						label: 'Green',
+					},
+					{
+						value: 'red',
+						label: 'Red',
+					},
+				],
+				Logo: [
+					{
+						value: 'Yes',
+						label: 'Yes',
+					},
+					{
+						value: 'No',
+						label: 'No',
+					},
+				],
+			} );
+		} );
+
+		it( 'returns only valid options if color is selected', () => {
+			const selectedAttributes = {
+				Color: 'green',
+			};
+			const controlOptions = getActiveSelectControlOptions(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( controlOptions ).toStrictEqual( {
+				Color: [
+					{
+						value: 'blue',
+						label: 'Blue',
+					},
+					{
+						value: 'green',
+						label: 'Green',
+					},
+					{
+						value: 'red',
+						label: 'Red',
+					},
+				],
+				Logo: [
+					{
+						value: 'No',
+						label: 'No',
+					},
+				],
+			} );
+		} );
+	} );
+	describe( 'Testing getDefaultAttributes()', () => {
+		const defaultAttributes = getDefaultAttributes( formattedAttributes );
+
+		it( 'should return default attributes in the format that is ready for setting state', () => {
+			expect( defaultAttributes ).toStrictEqual( {
+				Color: 'blue',
+				Size: 'medium',
+			} );
+		} );
+
+		it( 'should return an empty object if given unexpected values', () => {
+			// @ts-expect-error Expected TS Error as we are checking how the function does with *unexpected values*.
+			expect( getDefaultAttributes( [] ) ).toStrictEqual( {} );
+			// @ts-expect-error Ditto above.
+			expect( getDefaultAttributes( null ) ).toStrictEqual( {} );
+			// @ts-expect-error Ditto above.
+			expect( getDefaultAttributes( undefined ) ).toStrictEqual( {} );
+		} );
+	} );
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/utils.ts

@@ -0,0 +1,295 @@
+/**
+ * External dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	Dictionary,
+	isObject,
+	ProductResponseAttributeItem,
+	ProductResponseTermItem,
+	ProductResponseVariationsItem,
+} from '@woocommerce/types';
+import { keyBy } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import { AttributesMap } from '../types';
+
+/**
+ * Key an array of attributes by name,
+ */
+export const getAttributes = (
+	attributes?: ProductResponseAttributeItem[] | null
+) => {
+	return attributes
+		? keyBy(
+				Object.values( attributes ).filter(
+					( { has_variations: hasVariations } ) => hasVariations
+				),
+				'name'
+		  )
+		: {};
+};
+
+/**
+ * Format variations from the API into a map of just the attribute names and values.
+ *
+ * Note, each item is keyed by the variation ID with an id: prefix. This is to prevent the object
+ * being reordered when iterated.
+ */
+export const getVariationAttributes = (
+	/**
+	 * List of Variation objects and attributes keyed by variation ID.
+	 */
+	variations?: ProductResponseVariationsItem[] | null
+) => {
+	if ( ! variations ) {
+		return {};
+	}
+
+	const attributesMap: AttributesMap = {};
+
+	variations.forEach( ( { id, attributes } ) => {
+		attributesMap[ `id:${ id }` ] = {
+			id,
+			attributes: attributes.reduce( ( acc, { name, value } ) => {
+				acc[ name ] = value;
+				return acc;
+			}, {} as Dictionary ),
+		};
+	} );
+
+	return attributesMap;
+};
+
+/**
+ * Given a list of variations and a list of attribute values, return variations which match.
+ *
+ * Allows an attribute to be excluded by name. This is used to filter displayed options for
+ * individual attribute selects.
+ *
+ * @return List of matching variation IDs.
+ */
+export const getVariationsMatchingSelectedAttributes = (
+	/**
+	 * List of attribute names and terms.
+	 *
+	 * As returned from {@link getAttributes()}.
+	 */
+	attributes: Record< string, ProductResponseAttributeItem >,
+	/**
+	 * Attributes for each variation keyed by variation ID.
+	 *
+	 * As returned from {@link getVariationAttributes()}.
+	 */
+	variationAttributes: AttributesMap,
+	/**
+	 * Attribute Name Value pairs of current selections by the user.
+	 */
+	selectedAttributes: Record< string, string | null >
+) => {
+	const variationIds = Object.values( variationAttributes ).map(
+		( { id } ) => id
+	);
+
+	// If nothing is selected yet, just return all variations.
+	if (
+		Object.values( selectedAttributes ).every( ( value ) => value === '' )
+	) {
+		return variationIds;
+	}
+
+	const attributeNames = Object.keys( attributes );
+
+	return variationIds.filter( ( variationId ) =>
+		attributeNames.every( ( attributeName ) => {
+			const selectedAttribute = selectedAttributes[ attributeName ] || '';
+			const variationAttribute =
+				variationAttributes[ 'id:' + variationId ].attributes[
+					attributeName
+				];
+
+			// If there is no selected attribute, consider this a match.
+			if ( selectedAttribute === '' ) {
+				return true;
+			}
+			// If the variation attributes for this attribute are set to null, it matches all values.
+			if ( variationAttribute === null ) {
+				return true;
+			}
+			// Otherwise, only match if the selected values are the same.
+			return variationAttribute === selectedAttribute;
+		} )
+	);
+};
+
+/**
+ * Given a list of variations and a list of attribute values, returns the first matched variation ID.
+ *
+ * @return Variation ID.
+ */
+export const getVariationMatchingSelectedAttributes = (
+	/**
+	 * List of attribute names and terms.
+	 *
+	 * As returned from {@link getAttributes()}.
+	 */
+	attributes: Record< string, ProductResponseAttributeItem >,
+	/**
+	 * Attributes for each variation keyed by variation ID.
+	 *
+	 * As returned from {@link getVariationAttributes()}.
+	 */
+	variationAttributes: AttributesMap,
+	/**
+	 * Attribute Name Value pairs of current selections by the user.
+	 */
+	selectedAttributes: Dictionary
+) => {
+	const matchingVariationIds = getVariationsMatchingSelectedAttributes(
+		attributes,
+		variationAttributes,
+		selectedAttributes
+	);
+	return matchingVariationIds[ 0 ] || 0;
+};
+
+/**
+ * Given a list of terms, filter them and return valid options for the select boxes.
+ *
+ * @see getActiveSelectControlOptions
+ *
+ * @return Value/Label pairs of select box options.
+ */
+const getValidSelectControlOptions = (
+	/**
+	 * List of attribute term objects.
+	 */
+	attributeTerms: ProductResponseTermItem[],
+	/**
+	 * Valid values if selections have been made already.
+	 */
+	validAttributeTerms: Array< string | null > | null = null
+) => {
+	return Object.values( attributeTerms )
+		.map( ( { name, slug } ) => {
+			if (
+				validAttributeTerms === null ||
+				validAttributeTerms.includes( null ) ||
+				validAttributeTerms.includes( slug )
+			) {
+				return {
+					value: slug,
+					label: decodeEntities( name ),
+				};
+			}
+			return null;
+		} )
+		.filter( Boolean );
+};
+
+/**
+ * Given a list of terms, filter them and return active options for the select boxes. This factors in
+ * which options should be hidden due to current selections.
+ *
+ * @return Select box options.
+ */
+export const getActiveSelectControlOptions = (
+	/**
+	 * List of attribute names and terms.
+	 *
+	 * As returned from {@link getAttributes()}.
+	 */
+	attributes: Record< string, ProductResponseAttributeItem >,
+	/**
+	 * Attributes for each variation keyed by variation ID.
+	 *
+	 * As returned from {@link getVariationAttributes()}.
+	 */
+	variationAttributes: AttributesMap,
+	/**
+	 * Attribute Name Value pairs of current selections by the user.
+	 */
+	selectedAttributes: Dictionary
+) => {
+	const options: Record<
+		string,
+		Array< { label: string; value: string } | null >
+	> = {};
+	const attributeNames = Object.keys( attributes );
+	const hasSelectedAttributes =
+		Object.values( selectedAttributes ).filter( Boolean ).length > 0;
+
+	attributeNames.forEach( ( attributeName ) => {
+		const currentAttribute = attributes[ attributeName ];
+		const selectedAttributesExcludingCurrentAttribute = {
+			...selectedAttributes,
+			[ attributeName ]: null,
+		};
+		// This finds matching variations for selected attributes apart from this one. This will be
+		// used to get valid attribute terms of the current attribute narrowed down by those matching
+		// variation IDs. For example, if I had Large Blue Shirts and Medium Red Shirts, I want to only
+		// show Red shirts if Medium is selected.
+		const matchingVariationIds = hasSelectedAttributes
+			? getVariationsMatchingSelectedAttributes(
+					attributes,
+					variationAttributes,
+					selectedAttributesExcludingCurrentAttribute
+			  )
+			: null;
+		// Uses the above matching variation IDs to get the attributes from just those variations.
+		const validAttributeTerms =
+			matchingVariationIds !== null
+				? matchingVariationIds.map(
+						( varId ) =>
+							variationAttributes[ 'id:' + varId ].attributes[
+								attributeName
+							]
+				  )
+				: null;
+		// Intersects attributes with valid attributes.
+		options[ attributeName ] = getValidSelectControlOptions(
+			currentAttribute.terms,
+			validAttributeTerms
+		);
+	} );
+
+	return options;
+};
+
+/**
+ * Return the default values of the given attributes in a format ready to be set in state.
+ *
+ * @return Default attributes.
+ */
+export const getDefaultAttributes = (
+	/**
+	 * List of attribute names and terms.
+	 *
+	 * As returned from {@link getAttributes()}.
+	 */
+	attributes: Record< string, ProductResponseAttributeItem >
+) => {
+	if ( ! isObject( attributes ) ) {
+		return {};
+	}
+
+	const attributeNames = Object.keys( attributes );
+
+	if ( attributeNames.length === 0 ) {
+		return {};
+	}
+
+	const attributesEntries = Object.values( attributes );
+
+	return attributesEntries.reduce( ( acc, curr ) => {
+		const defaultValues = curr.terms.filter( ( term ) => term.default );
+
+		if ( defaultValues.length > 0 ) {
+			acc[ curr.name ] = defaultValues[ 0 ]?.slug;
+		}
+
+		return acc;
+	}, {} as Dictionary );
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.tsx

@@ -0,0 +1,181 @@
+/**
+ * External dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import Button, { ButtonProps } from '@woocommerce/base-components/button';
+import { Icon, check } from '@wordpress/icons';
+import { useState, useEffect } from '@wordpress/element';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+import {
+	useStoreEvents,
+	useStoreAddToCart,
+} from '@woocommerce/base-context/hooks';
+import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
+
+type LinkProps = Pick< ButtonProps, 'className' | 'href' | 'onClick' | 'text' >;
+
+interface ButtonComponentProps
+	extends Pick< ButtonProps, 'className' | 'onClick' > {
+	/**
+	 * Whether the button is disabled or not.
+	 */
+	isDisabled: boolean;
+	/**
+	 * Whether processing is done.
+	 */
+	isDone: boolean;
+	/**
+	 * Whether processing action is occurring.
+	 */
+	isProcessing: ButtonProps[ 'showSpinner' ];
+	/**
+	 * Quantity of said item currently in the cart.
+	 */
+	quantityInCart: number;
+}
+
+/**
+ * Button component for non-purchasable products.
+ */
+const LinkComponent = ( { className, href, text, onClick }: LinkProps ) => {
+	return (
+		<Button
+			className={ className }
+			href={ href }
+			onClick={ onClick }
+			rel="nofollow"
+		>
+			{ text }
+		</Button>
+	);
+};
+
+/**
+ * Button for purchasable products.
+ */
+const ButtonComponent = ( {
+	className,
+	quantityInCart,
+	isProcessing,
+	isDisabled,
+	isDone,
+	onClick,
+}: ButtonComponentProps ) => {
+	return (
+		<Button
+			className={ className }
+			disabled={ isDisabled }
+			showSpinner={ isProcessing }
+			onClick={ onClick }
+		>
+			{ isDone && quantityInCart > 0
+				? sprintf(
+						/* translators: %s number of products in cart. */
+						_n(
+							'%d in cart',
+							'%d in cart',
+							quantityInCart,
+							'woo-gutenberg-products-block'
+						),
+						quantityInCart
+				  )
+				: __( 'Add to cart', 'woo-gutenberg-products-block' ) }
+			{ !! isDone && <Icon icon={ check } /> }
+		</Button>
+	);
+};
+
+/**
+ * Add to Cart Form Button Component.
+ */
+const AddToCartButton = () => {
+	// @todo Add types for `useAddToCartFormContext`
+	const {
+		showFormElements,
+		productIsPurchasable,
+		productHasOptions,
+		product,
+		productType,
+		isDisabled,
+		isProcessing,
+		eventRegistration,
+		hasError,
+		dispatchActions,
+	} = useAddToCartFormContext();
+	const { parentName } = useInnerBlockLayoutContext();
+	const { dispatchStoreEvent } = useStoreEvents();
+	const { cartQuantity } = useStoreAddToCart( product.id || 0 );
+	const [ addedToCart, setAddedToCart ] = useState( false );
+	const addToCartButtonData = product.add_to_cart || {
+		url: '',
+		text: '',
+	};
+
+	// Subscribe to emitter for after processing.
+	useEffect( () => {
+		const onSuccess = () => {
+			if ( ! hasError ) {
+				setAddedToCart( true );
+			}
+			return true;
+		};
+		const unsubscribeProcessing =
+			eventRegistration.onAddToCartAfterProcessingWithSuccess(
+				onSuccess,
+				0
+			);
+		return () => {
+			unsubscribeProcessing();
+		};
+	}, [ eventRegistration, hasError ] );
+
+	/**
+	 * We can show a real button if we are:
+	 *
+	 *  	a) Showing a full add to cart form.
+	 * 		b) The product doesn't have options and can therefore be added directly to the cart.
+	 * 		c) The product is purchasable.
+	 *
+	 * Otherwise we show a link instead.
+	 */
+	const showButton =
+		( showFormElements ||
+			( ! productHasOptions && productType === 'simple' ) ) &&
+		productIsPurchasable;
+
+	return showButton ? (
+		<ButtonComponent
+			className="wc-block-components-product-add-to-cart-button"
+			quantityInCart={ cartQuantity }
+			isDisabled={ isDisabled }
+			isProcessing={ isProcessing }
+			isDone={ addedToCart }
+			onClick={ () => {
+				dispatchActions.submitForm(
+					`woocommerce/single-product/${ product?.id || 0 }`
+				);
+				dispatchStoreEvent( 'cart-add-item', {
+					product,
+					listName: parentName,
+				} );
+			} }
+		/>
+	) : (
+		<LinkComponent
+			className="wc-block-components-product-add-to-cart-button"
+			href={ addToCartButtonData.url }
+			text={
+				addToCartButtonData.text ||
+				__( 'View Product', 'woo-gutenberg-products-block' )
+			}
+			onClick={ () => {
+				dispatchStoreEvent( 'product-view-link', {
+					product,
+					listName: parentName,
+				} );
+			} }
+		/>
+	);
+};
+
+export default AddToCartButton;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/index.ts

@@ -0,0 +1,3 @@
+export { default as AddToCartButton } from './add-to-cart-button';
+export { default as QuantityInput } from './quantity-input';
+export { default as ProductUnavailable } from './product-unavailable';

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/product-unavailable.tsx

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const ProductUnavailable = ( {
+	reason = __(
+		'Sorry, this product cannot be purchased.',
+		'woo-gutenberg-products-block'
+	),
+} ) => {
+	return (
+		<div className="wc-block-components-product-add-to-cart-unavailable">
+			{ reason }
+		</div>
+	);
+};
+
+export default ProductUnavailable;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.tsx

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import { useDebouncedCallback } from 'use-debounce';
+
+type JSXInputProps = JSX.IntrinsicElements[ 'input' ];
+
+interface QuantityInputProps extends Omit< JSXInputProps, 'onChange' > {
+	max: number;
+	min: number;
+	onChange: ( val: number | string ) => void;
+	step: number;
+}
+
+/**
+ * Quantity Input Component.
+ */
+const QuantityInput = ( {
+	disabled,
+	min,
+	max,
+	step = 1,
+	value,
+	onChange,
+}: QuantityInputProps ) => {
+	const hasMaximum = typeof max !== 'undefined';
+
+	/**
+	 * The goal of this function is to normalize what was inserted,
+	 * but after the customer has stopped typing.
+	 *
+	 * It's important to wait before normalizing or we end up with
+	 * a frustrating experience, for example, if the minimum is 2 and
+	 * the customer is trying to type "10", premature normalizing would
+	 * always kick in at "1" and turn that into 2.
+	 *
+	 * Copied from <QuantitySelector>
+	 */
+	const normalizeQuantity = useDebouncedCallback< ( val: number ) => void >(
+		( initialValue ) => {
+			// We copy the starting value.
+			let newValue = initialValue;
+
+			// We check if we have a maximum value, and select the lowest between what was inserted and the maximum.
+			if ( hasMaximum ) {
+				newValue = Math.min(
+					newValue,
+					// the maximum possible value in step increments.
+					Math.floor( max / step ) * step
+				);
+			}
+
+			// Select the biggest between what's inserted, the the minimum value in steps.
+			newValue = Math.max( newValue, Math.ceil( min / step ) * step );
+
+			// We round off the value to our steps.
+			newValue = Math.floor( newValue / step ) * step;
+
+			// Only commit if the value has changed
+			if ( newValue !== initialValue ) {
+				onChange?.( newValue );
+			}
+		},
+		300
+	);
+
+	return (
+		<input
+			className="wc-block-components-product-add-to-cart-quantity"
+			type="number"
+			value={ value }
+			min={ min }
+			max={ max }
+			step={ step }
+			hidden={ max === 1 }
+			disabled={ disabled }
+			onChange={ ( e ) => {
+				onChange?.( e.target.value );
+				normalizeQuantity( Number( e.target.value ) );
+			} }
+		/>
+	);
+};
+
+export default QuantityInput;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/style.scss

@@ -0,0 +1,49 @@
+.wc-block-components-product-add-to-cart {
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+
+	.wc-block-components-product-add-to-cart-button {
+		margin: 0 0 em($gap-small) 0;
+
+		.wc-block-components-button__text {
+			display: block;
+
+			> svg {
+				fill: currentColor;
+				vertical-align: top;
+				width: 1.5em;
+				height: 1.5em;
+				margin: -0.25em 0 -0.25em 0.5em;
+			}
+		}
+	}
+
+	.wc-block-components-product-add-to-cart-quantity {
+		margin: 0 1em em($gap-small) 0;
+		flex-basis: 5em;
+		padding: 0.618em;
+		background: $white;
+		border: 1px solid #ccc;
+		border-radius: $universal-border-radius;
+		color: #43454b;
+		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
+		text-align: center;
+	}
+}
+
+.is-loading .wc-block-components-product-add-to-cart,
+.wc-block-components-product-add-to-cart--placeholder {
+	.wc-block-components-product-add-to-cart-quantity,
+	.wc-block-components-product-add-to-cart-button {
+		@include placeholder();
+	}
+}
+
+.wc-block-grid .wc-block-components-product-add-to-cart {
+	justify-content: center;
+}
+
+.wc-block-components-product-add-to-cart-notice {
+	margin: 0;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/product-average-rating",
+	"version": "1.0.0",
+	"title": "Product Average Rating (Beta)",
+	"description": "Display the average rating of a product",
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"ancestor": [ "woocommerce/single-product" ],
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/block.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { __ } from '@wordpress/i18n';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+type ProductAverageRatingProps = {
+	className?: string;
+	textAlign?: string;
+};
+
+export const Block = ( props: ProductAverageRatingProps ): JSX.Element => {
+	const { textAlign } = props;
+	const styleProps = useStyleProps( props );
+	const { product } = useProductDataContext();
+
+	const className = classnames(
+		styleProps.className,
+		'wc-block-components-product-average-rating',
+		{
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		}
+	);
+
+	return (
+		<div className={ className } style={ styleProps.style }>
+			{ Number( product.average_rating ) > 0
+				? product.average_rating
+				: __( 'No ratings', 'woo-gutenberg-products-block' ) }
+		</div>
+	);
+};
+
+export default withProductDataContext( Block );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/edit.tsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import type { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export interface BlockAttributes {
+	textAlign: string;
+}
+
+const Edit = ( props: BlockEditProps< BlockAttributes > ): JSX.Element => {
+	const { attributes, setAttributes } = props;
+	const blockProps = useBlockProps( {
+		className: 'wp-block-woocommerce-product-average-rating',
+	} );
+
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ attributes.textAlign }
+					onChange={ ( newAlign ) => {
+						setAttributes( { textAlign: newAlign || '' } );
+					} }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>
+				<Block { ...attributes } />
+			</div>
+		</>
+	);
+};
+
+export default Edit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { Icon, starHalf } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import { supports } from './support';
+
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ starHalf }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	supports,
+	edit,
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/support.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: true,
+			__experimentalSkipSerialization: true,
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalSkipSerialization: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalFontWeight: true,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalSelector: '.wc-block-components-product-average-rating',
+	} ),
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.json

@@ -0,0 +1,66 @@
+{
+	"name": "woocommerce/product-button",
+	"version": "1.0.0",
+	"title": "Add to Cart Button",
+	"description": "Display a call to action button which either adds the product to the cart, or links to the product page.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"usesContext": [ "query", "queryId", "postId" ],
+	"textdomain": "woocommerce",
+	"attributes": {
+		"productId": {
+			"type": "number",
+			"default": 0
+		},
+		"textAlign": {
+			"type": "string",
+			"default": ""
+		},
+		"width": {
+			"type": "number"
+		},
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		},
+		"isDescendentOfQueryLoop": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"color": {
+			"background": false,
+			"link": true
+		},
+		"interactivity": true,
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
+	},
+	"ancestor": [
+		"woocommerce/all-products",
+		"woocommerce/single-product",
+		"core/post-template",
+		"woocommerce/product-template"
+	],
+	"styles": [
+		{
+			"name": "fill",
+			"label": "Fill",
+			"isDefault": true
+		},
+		{
+			"name": "outline",
+			"label": "Outline"
+		}
+	],
+	"viewScript": [
+		"wc-product-button-interactivity-frontend"
+	],
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.tsx

@@ -0,0 +1,172 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	useStoreEvents,
+	useStoreAddToCart,
+} from '@woocommerce/base-context/hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { decodeEntities } from '@wordpress/html-entities';
+import { CART_URL } from '@woocommerce/block-settings';
+import { getSetting } from '@woocommerce/settings';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import type {
+	BlockAttributes,
+	AddToCartButtonAttributes,
+	AddToCartButtonPlaceholderAttributes,
+} from './types';
+
+const AddToCartButton = ( {
+	product,
+	className,
+	style,
+}: AddToCartButtonAttributes ): JSX.Element => {
+	const {
+		id,
+		permalink,
+		add_to_cart: productCartDetails,
+		has_options: hasOptions,
+		is_purchasable: isPurchasable,
+		is_in_stock: isInStock,
+	} = product;
+	const { dispatchStoreEvent } = useStoreEvents();
+	const { cartQuantity, addingToCart, addToCart } = useStoreAddToCart( id );
+
+	const addedToCart = Number.isFinite( cartQuantity ) && cartQuantity > 0;
+	const allowAddToCart = ! hasOptions && isPurchasable && isInStock;
+	const buttonAriaLabel = decodeEntities(
+		productCartDetails?.description || ''
+	);
+	const buttonText = addedToCart
+		? sprintf(
+				/* translators: %s number of products in cart. */
+				_n(
+					'%d in cart',
+					'%d in cart',
+					cartQuantity,
+					'woo-gutenberg-products-block'
+				),
+				cartQuantity
+		  )
+		: decodeEntities(
+				productCartDetails?.text ||
+					__( 'Add to cart', 'woo-gutenberg-products-block' )
+		  );
+
+	const ButtonTag = allowAddToCart ? 'button' : 'a';
+	const buttonProps = {} as HTMLAnchorElement & { onClick: () => void };
+
+	if ( ! allowAddToCart ) {
+		buttonProps.href = permalink;
+		buttonProps.rel = 'nofollow';
+		buttonProps.onClick = () => {
+			dispatchStoreEvent( 'product-view-link', {
+				product,
+			} );
+		};
+	} else {
+		buttonProps.onClick = async () => {
+			await addToCart();
+			dispatchStoreEvent( 'cart-add-item', {
+				product,
+			} );
+			// redirect to cart if the setting to redirect to the cart page
+			// on cart add item is enabled
+			const { cartRedirectAfterAdd }: { cartRedirectAfterAdd: boolean } =
+				getSetting( 'productsSettings' );
+			if ( cartRedirectAfterAdd ) {
+				window.location.href = CART_URL;
+			}
+		};
+	}
+
+	return (
+		<ButtonTag
+			{ ...buttonProps }
+			aria-label={ buttonAriaLabel }
+			disabled={ addingToCart }
+			className={ classnames(
+				className,
+				'wp-block-button__link',
+				'wp-element-button',
+				'add_to_cart_button',
+				'wc-block-components-product-button__button',
+				{
+					loading: addingToCart,
+					added: addedToCart,
+				}
+			) }
+			style={ style }
+		>
+			{ buttonText }
+		</ButtonTag>
+	);
+};
+
+const AddToCartButtonPlaceholder = ( {
+	className,
+	style,
+}: AddToCartButtonPlaceholderAttributes ): JSX.Element => {
+	return (
+		<button
+			className={ classnames(
+				'wp-block-button__link',
+				'wp-element-button',
+				'add_to_cart_button',
+				'wc-block-components-product-button__button',
+				'wc-block-components-product-button__button--placeholder',
+				className
+			) }
+			style={ style }
+			disabled={ true }
+		/>
+	);
+};
+
+export const Block = ( props: BlockAttributes ): JSX.Element => {
+	const { className, textAlign } = props;
+	const styleProps = useStyleProps( props );
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wp-block-button',
+				'wc-block-components-product-button',
+				{
+					[ `${ parentClassName }__product-add-to-cart` ]:
+						parentClassName,
+					[ `align-${ textAlign }` ]: textAlign,
+				}
+			) }
+		>
+			{ product.id ? (
+				<AddToCartButton
+					product={ product }
+					style={ styleProps.style }
+					className={ styleProps.className }
+				/>
+			) : (
+				<AddToCartButtonPlaceholder
+					style={ styleProps.style }
+					className={ styleProps.className }
+				/>
+			) }
+		</div>
+	);
+};
+
+export default withProductDataContext( Block );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx

@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import {
+	Disabled,
+	Button,
+	ButtonGroup,
+	PanelBody,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { useEffect } from '@wordpress/element';
+import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { BlockAttributes } from './types';
+
+function WidthPanel( {
+	selectedWidth,
+	setAttributes,
+}: {
+	selectedWidth: number | undefined;
+	setAttributes: ( attributes: BlockAttributes ) => void;
+} ) {
+	function handleChange( newWidth: number ) {
+		// Check if we are toggling the width off
+		const width = selectedWidth === newWidth ? undefined : newWidth;
+
+		// Update attributes.
+		setAttributes( { width } );
+	}
+
+	return (
+		<PanelBody
+			title={ __( 'Width settings', 'woo-gutenberg-products-block' ) }
+		>
+			<ButtonGroup
+				aria-label={ __(
+					'Button width',
+					'woo-gutenberg-products-block'
+				) }
+			>
+				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
+					return (
+						<Button
+							key={ widthValue }
+							isSmall
+							variant={
+								widthValue === selectedWidth
+									? 'primary'
+									: undefined
+							}
+							onClick={ () => handleChange( widthValue ) }
+						>
+							{ widthValue }%
+						</Button>
+					);
+				} ) }
+			</ButtonGroup>
+		</PanelBody>
+	);
+}
+
+const Edit = ( {
+	attributes,
+	setAttributes,
+	context,
+}: BlockEditProps< BlockAttributes > & {
+	context?: Context | undefined;
+} ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const isDescendentOfQueryLoop = Number.isFinite( context?.queryId );
+	const { width } = attributes;
+
+	useEffect(
+		() => setAttributes( { isDescendentOfQueryLoop } ),
+		[ setAttributes, isDescendentOfQueryLoop ]
+	);
+	return (
+		<>
+			<BlockControls>
+				{ isDescendentOfQueryLoop && (
+					<AlignmentToolbar
+						value={ attributes.textAlign }
+						onChange={ ( newAlign ) => {
+							setAttributes( { textAlign: newAlign || '' } );
+						} }
+					/>
+				) }
+			</BlockControls>
+			<InspectorControls>
+				<WidthPanel
+					selectedWidth={ width }
+					setAttributes={ setAttributes }
+				/>
+			</InspectorControls>
+			<div { ...blockProps }>
+				<Disabled>
+					<Block
+						{ ...{ ...attributes, ...context } }
+						className={ classnames( attributes.className, {
+							[ `has-custom-width wp-block-button__width-${ width }` ]:
+								width,
+						} ) }
+					/>
+				</Disabled>
+			</div>
+		</>
+	);
+};
+
+export default Edit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/frontend.tsx

@@ -0,0 +1,300 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * External dependencies
+ */
+import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
+import { store as interactivityStore } from '@woocommerce/interactivity';
+import { dispatch, select, subscribe } from '@wordpress/data';
+import { Cart } from '@woocommerce/type-defs/cart';
+import { createRoot } from '@wordpress/element';
+import NoticeBanner from '@woocommerce/base-components/notice-banner';
+
+type Context = {
+	woocommerce: {
+		isLoading: boolean;
+		addToCartText: string;
+		productId: number;
+		displayViewCart: boolean;
+		quantityToAdd: number;
+		temporaryNumberOfItems: number;
+		animationStatus: AnimationStatus;
+	};
+};
+
+enum AnimationStatus {
+	IDLE = 'IDLE',
+	SLIDE_OUT = 'SLIDE-OUT',
+	SLIDE_IN = 'SLIDE-IN',
+}
+
+type State = {
+	woocommerce: {
+		cart: Cart | undefined;
+		inTheCartText: string;
+	};
+};
+
+type Store = {
+	state: State;
+	context: Context;
+	selectors: any;
+	ref: HTMLElement;
+};
+
+const storeNoticeClass = '.wc-block-store-notices';
+
+const createNoticeContainer = () => {
+	const noticeContainer = document.createElement( 'div' );
+	noticeContainer.classList.add( storeNoticeClass.replace( '.', '' ) );
+	return noticeContainer;
+};
+
+const injectNotice = ( domNode: Element, errorMessage: string ) => {
+	const root = createRoot( domNode );
+
+	root.render(
+		<NoticeBanner status="error" onRemove={ () => root.unmount() }>
+			{ errorMessage }
+		</NoticeBanner>
+	);
+
+	domNode?.scrollIntoView( {
+		behavior: 'smooth',
+		inline: 'nearest',
+	} );
+};
+
+// RequestIdleCallback is not available in Safari, so we use setTimeout as an alternative.
+const callIdleCallback =
+	window.requestIdleCallback || ( ( cb ) => setTimeout( cb, 100 ) );
+
+const getProductById = ( cartState: Cart | undefined, productId: number ) => {
+	return cartState?.items.find( ( item ) => item.id === productId );
+};
+
+const getTextButton = ( {
+	addToCartText,
+	inTheCartText,
+	numberOfItems,
+}: {
+	addToCartText: string;
+	inTheCartText: string;
+	numberOfItems: number;
+} ) => {
+	if ( numberOfItems === 0 ) {
+		return addToCartText;
+	}
+	return inTheCartText.replace( '###', numberOfItems.toString() );
+};
+
+const productButtonSelectors = {
+	woocommerce: {
+		addToCartText: ( store: Store ) => {
+			const { context, state, selectors } = store;
+
+			// We use the temporary number of items when there's no animation, or the
+			// second part of the animation hasn't started.
+			if (
+				context.woocommerce.animationStatus === AnimationStatus.IDLE ||
+				context.woocommerce.animationStatus ===
+					AnimationStatus.SLIDE_OUT
+			) {
+				return getTextButton( {
+					addToCartText: context.woocommerce.addToCartText,
+					inTheCartText: state.woocommerce.inTheCartText,
+					numberOfItems: context.woocommerce.temporaryNumberOfItems,
+				} );
+			}
+
+			return getTextButton( {
+				addToCartText: context.woocommerce.addToCartText,
+				inTheCartText: state.woocommerce.inTheCartText,
+				numberOfItems:
+					selectors.woocommerce.numberOfItemsInTheCart( store ),
+			} );
+		},
+		displayViewCart: ( store: Store ) => {
+			const { context, selectors } = store;
+			if ( ! context.woocommerce.displayViewCart ) return false;
+			if ( ! selectors.woocommerce.hasCartLoaded( store ) ) {
+				return context.woocommerce.temporaryNumberOfItems > 0;
+			}
+			return selectors.woocommerce.numberOfItemsInTheCart( store ) > 0;
+		},
+		hasCartLoaded: ( { state }: { state: State } ) => {
+			return state.woocommerce.cart !== undefined;
+		},
+		numberOfItemsInTheCart: ( { state, context }: Store ) => {
+			const product = getProductById(
+				state.woocommerce.cart,
+				context.woocommerce.productId
+			);
+			return product?.quantity || 0;
+		},
+		slideOutAnimation: ( { context }: Store ) =>
+			context.woocommerce.animationStatus === AnimationStatus.SLIDE_OUT,
+		slideInAnimation: ( { context }: Store ) =>
+			context.woocommerce.animationStatus === AnimationStatus.SLIDE_IN,
+	},
+};
+
+interactivityStore(
+	// @ts-expect-error: Store function isn't typed.
+	{
+		selectors: productButtonSelectors,
+		actions: {
+			woocommerce: {
+				addToCart: async ( store: Store ) => {
+					const { context, selectors, ref } = store;
+
+					if ( ! ref.classList.contains( 'ajax_add_to_cart' ) ) {
+						return;
+					}
+
+					context.woocommerce.isLoading = true;
+
+					// Allow 3rd parties to validate and quit early.
+					// https://github.com/woocommerce/woocommerce/blob/154dd236499d8a440edf3cde712511b56baa8e45/plugins/woocommerce/client/legacy/js/frontend/add-to-cart.js/#L74-L77
+					const event = new CustomEvent(
+						'should_send_ajax_request.adding_to_cart',
+						{ detail: [ ref ], cancelable: true }
+					);
+					const shouldSendRequest =
+						document.body.dispatchEvent( event );
+
+					if ( shouldSendRequest === false ) {
+						const ajaxNotSentEvent = new CustomEvent(
+							'ajax_request_not_sent.adding_to_cart',
+							{ detail: [ false, false, ref ] }
+						);
+						document.body.dispatchEvent( ajaxNotSentEvent );
+						return true;
+					}
+
+					try {
+						await dispatch( storeKey ).addItemToCart(
+							context.woocommerce.productId,
+							context.woocommerce.quantityToAdd
+						);
+
+						// After the cart has been updated, sync the temporary number of
+						// items again.
+						context.woocommerce.temporaryNumberOfItems =
+							selectors.woocommerce.numberOfItemsInTheCart(
+								store
+							);
+					} catch ( error ) {
+						const storeNoticeBlock =
+							document.querySelector( storeNoticeClass );
+
+						if ( ! storeNoticeBlock ) {
+							document
+								.querySelector( '.entry-content' )
+								?.prepend( createNoticeContainer() );
+						}
+
+						const domNode =
+							storeNoticeBlock ??
+							document.querySelector( storeNoticeClass );
+
+						if ( domNode ) {
+							injectNotice( domNode, error.message );
+						}
+
+						// We don't care about errors blocking execution, but will
+						// console.error for troubleshooting.
+						// eslint-disable-next-line no-console
+						console.error( error );
+					} finally {
+						context.woocommerce.displayViewCart = true;
+						context.woocommerce.isLoading = false;
+					}
+				},
+				handleAnimationEnd: (
+					store: Store & { event: AnimationEvent }
+				) => {
+					const { event, context, selectors } = store;
+					if ( event.animationName === 'slideOut' ) {
+						// When the first part of the animation (slide-out) ends, we move
+						// to the second part (slide-in).
+						context.woocommerce.animationStatus =
+							AnimationStatus.SLIDE_IN;
+					} else if ( event.animationName === 'slideIn' ) {
+						// When the second part of the animation ends, we update the
+						// temporary number of items to sync it with the cart and reset the
+						// animation status so it can be triggered again.
+						context.woocommerce.temporaryNumberOfItems =
+							selectors.woocommerce.numberOfItemsInTheCart(
+								store
+							);
+						context.woocommerce.animationStatus =
+							AnimationStatus.IDLE;
+					}
+				},
+			},
+		},
+		init: {
+			woocommerce: {
+				syncTemporaryNumberOfItemsOnLoad: ( store: Store ) => {
+					const { selectors, context } = store;
+					// If the cart has loaded when we instantiate this element, we sync
+					// the temporary number of items with the number of items in the cart
+					// to avoid triggering the animation. We do this only once, but we
+					// use useLayoutEffect to avoid the useEffect flickering.
+					if ( selectors.woocommerce.hasCartLoaded( store ) ) {
+						context.woocommerce.temporaryNumberOfItems =
+							selectors.woocommerce.numberOfItemsInTheCart(
+								store
+							);
+					}
+				},
+			},
+		},
+		effects: {
+			woocommerce: {
+				startAnimation: ( store: Store ) => {
+					const { context, selectors } = store;
+					// We start the animation if the cart has loaded, the temporary number
+					// of items is out of sync with the number of items in the cart, the
+					// button is not loading (because that means the user started the
+					// interaction) and the animation hasn't started yet.
+					if (
+						selectors.woocommerce.hasCartLoaded( store ) &&
+						context.woocommerce.temporaryNumberOfItems !==
+							selectors.woocommerce.numberOfItemsInTheCart(
+								store
+							) &&
+						! context.woocommerce.isLoading &&
+						context.woocommerce.animationStatus ===
+							AnimationStatus.IDLE
+					) {
+						context.woocommerce.animationStatus =
+							AnimationStatus.SLIDE_OUT;
+					}
+				},
+			},
+		},
+	},
+	{
+		afterLoad: ( store: Store ) => {
+			const { state, selectors } = store;
+			// Subscribe to changes in Cart data.
+			subscribe( () => {
+				const cartData = select( storeKey ).getCartData();
+				const isResolutionFinished =
+					select( storeKey ).hasFinishedResolution( 'getCartData' );
+				if ( isResolutionFinished ) {
+					state.woocommerce.cart = cartData;
+				}
+			}, storeKey );
+
+			// This selector triggers a fetch of the Cart data. It is done in a
+			// `requestIdleCallback` to avoid potential performance issues.
+			callIdleCallback( () => {
+				if ( ! selectors.woocommerce.hasCartLoaded( store ) ) {
+					select( storeKey ).getCartData();
+				}
+			} );
+		},
+	}
+);

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/index.tsx

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { Icon, button } from '@wordpress/icons';
+import { registerBlockType } from '@wordpress/blocks';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+const featurePluginSupport = {
+	...metadata.supports,
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: true,
+			link: false,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+		},
+		...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
+			spacing: {
+				margin: true,
+				padding: true,
+				__experimentalSkipSerialization: true,
+			},
+		} ),
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontWeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		__experimentalSelector:
+			'.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button',
+	} ),
+	...( typeof __experimentalGetSpacingClassesAndStyles === 'function' &&
+		! isFeaturePluginBuild() && {
+			spacing: {
+				margin: true,
+			},
+		} ),
+};
+// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ button }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes: {
+		...metadata.attributes,
+	},
+	supports: {
+		...featurePluginSupport,
+	},
+	edit,
+	save,
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/save.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { BlockAttributes } from './types';
+
+type Props = {
+	attributes: BlockAttributes;
+};
+
+const Save = ( { attributes }: Props ): JSX.Element | null => {
+	if (
+		attributes.isDescendentOfQueryLoop ||
+		attributes.isDescendentOfSingleProductBlock
+	) {
+		return null;
+	}
+
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className, {
+					[ `has-custom-width wp-block-button__width-${ attributes.width }` ]:
+						attributes.width,
+				} ),
+			} ) }
+		/>
+	);
+};
+
+export default Save;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/style.scss

@@ -0,0 +1,145 @@
+.wp-block-button.wc-block-components-product-button {
+	word-break: break-word;
+	white-space: normal;
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
+	gap: $gap-small;
+
+	.wp-block-button__link {
+		word-break: break-word;
+		white-space: normal;
+		display: inline-flex;
+		justify-content: center;
+		text-align: center;
+		// Set button font size so it inherits from parent.
+		font-size: 1em;
+
+		&.loading {
+			opacity: 0.25;
+		}
+
+		&.loading::after {
+			font-family: WooCommerce; /* stylelint-disable-line */
+			content: "\e031";
+			animation: spin 2s linear infinite;
+			margin-right: 0;
+			margin-left: 0.5em;
+			display: inline-block;
+			width: auto;
+			height: auto;
+		}
+	}
+
+	a[hidden] {
+		display: none;
+	}
+
+	@keyframes slideOut {
+		from {
+			transform: translateY(0);
+		}
+		to {
+			transform: translateY(-100%);
+		}
+	}
+
+	@keyframes slideIn {
+		from {
+			transform: translateY(90%);
+			opacity: 0;
+		}
+		to {
+			transform: translate(0);
+			opacity: 1;
+		}
+	}
+
+	&.align-left {
+		align-items: flex-start;
+	}
+
+	&.align-right {
+		align-items: flex-end;
+	}
+
+	.wc-block-components-product-button__button {
+		border-style: none;
+		display: inline-flex;
+		justify-content: center;
+		white-space: normal;
+		word-break: break-word;
+		overflow: hidden;
+		align-items: center;
+		line-height: inherit;
+
+		span {
+
+			&.wc-block-slide-out {
+				animation: slideOut 0.1s linear 1 normal forwards;
+			}
+			&.wc-block-slide-in {
+				animation: slideIn 0.1s linear 1 normal;
+			}
+		}
+	}
+
+	.wc-block-components-product-button__button--placeholder {
+		@include placeholder();
+		min-width: 8em;
+		min-height: 3em;
+	}
+
+	.wc-block-all-products & {
+		margin-bottom: $gap-small;
+	}
+}
+
+.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button {
+	@include placeholder();
+	min-width: 8em;
+	min-height: 3em;
+}
+
+.theme-twentytwentyone {
+	// Prevent buttons appearing disabled in the editor.
+	.editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link {
+		background-color: var(--button--color-background);
+		color: var(--button--color-text);
+		border-color: var(--button--color-background);
+	}
+}
+
+// Style: Fill & Outline
+.wp-block-button.is-style-outline {
+	.wp-block-button__link {
+		border: 2px solid currentColor;
+
+		&:not(.has-text-color) {
+			color: currentColor;
+		}
+
+		&:not(.has-background) {
+			background-color: transparent;
+			background-image: none;
+		}
+	}
+}
+
+// Width setting
+.wp-block-button {
+	&.has-custom-width {
+		.wp-block-button__link {
+			box-sizing: border-box;
+		}
+	}
+
+	@for $i from 1 through 4 {
+		&.wp-block-button__width-#{$i * 25} {
+			.wp-block-button__link {
+				width: $i * 25%; // 25%, 50%, 75%, 100%
+			}
+		}
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/types.ts

@@ -0,0 +1,37 @@
+interface WithClass {
+	className: string;
+}
+
+interface WithStyle {
+	style: Record< string, unknown >;
+}
+
+export interface BlockAttributes {
+	className?: string | undefined;
+	textAlign?: string | undefined;
+	isDescendentOfQueryLoop?: boolean | undefined;
+	isDescendentOfSingleProductBlock?: boolean | undefined;
+	width?: number | undefined;
+}
+
+export interface AddToCartButtonPlaceholderAttributes {
+	className: string;
+	style: React.CSSProperties;
+}
+
+export interface AddToCartButtonAttributes
+	extends AddToCartButtonPlaceholderAttributes {
+	product: {
+		id: number;
+		permalink: string;
+		add_to_cart: {
+			url: string;
+			description: string;
+			text: string;
+		};
+		has_options: boolean;
+		is_purchasable: boolean;
+		is_in_stock: boolean;
+	};
+	textAlign?: ( WithClass & WithStyle ) | undefined;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/attributes.ts

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import type { BlockAttributes } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { ImageSizing } from './types';
+
+export const blockAttributes: BlockAttributes = {
+	showProductLink: {
+		type: 'boolean',
+		default: true,
+	},
+	showSaleBadge: {
+		type: 'boolean',
+		default: true,
+	},
+	saleBadgeAlign: {
+		type: 'string',
+		default: 'right',
+	},
+	imageSizing: {
+		type: 'string',
+		default: ImageSizing.SINGLE,
+	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+	isDescendentOfQueryLoop: {
+		type: 'boolean',
+		default: false,
+	},
+	isDescendentOfSingleProductBlock: {
+		type: 'boolean',
+		default: false,
+	},
+	width: {
+		type: 'string',
+	},
+	height: {
+		type: 'string',
+	},
+	scale: {
+		type: 'string',
+		default: 'cover',
+	},
+	aspectRatio: {
+		type: 'string',
+	},
+};
+
+export default blockAttributes;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.tsx

@@ -0,0 +1,185 @@
+/**
+ * External dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import classnames from 'classnames';
+import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { useStoreEvents } from '@woocommerce/base-context/hooks';
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import ProductSaleBadge from '../sale-badge/block';
+import './style.scss';
+import { BlockAttributes, ImageSizing } from './types';
+
+const ImagePlaceholder = ( props ): JSX.Element => {
+	return (
+		<img
+			{ ...props }
+			src={ PLACEHOLDER_IMG_SRC }
+			alt=""
+			width={ undefined }
+			height={ undefined }
+		/>
+	);
+};
+
+interface ImageProps {
+	image?: null | {
+		alt?: string | undefined;
+		id: number;
+		name: string;
+		sizes?: string | undefined;
+		src?: string | undefined;
+		srcset?: string | undefined;
+		thumbnail?: string | undefined;
+	};
+	loaded: boolean;
+	showFullSize: boolean;
+	fallbackAlt: string;
+	scale: string;
+	width?: string | undefined;
+	height?: string | undefined;
+	aspectRatio: string | undefined;
+}
+
+const Image = ( {
+	image,
+	loaded,
+	showFullSize,
+	fallbackAlt,
+	width,
+	scale,
+	height,
+	aspectRatio,
+}: ImageProps ): JSX.Element => {
+	const { thumbnail, src, srcset, sizes, alt } = image || {};
+	const imageProps = {
+		alt: alt || fallbackAlt,
+		hidden: ! loaded,
+		src: thumbnail,
+		...( showFullSize && { src, srcSet: srcset, sizes } ),
+	};
+
+	const imageStyles: Record< string, string | undefined > = {
+		height,
+		width,
+		objectFit: scale,
+		aspectRatio,
+	};
+
+	return (
+		<>
+			{ imageProps.src && (
+				/* eslint-disable-next-line jsx-a11y/alt-text */
+				<img
+					style={ imageStyles }
+					data-testid="product-image"
+					{ ...imageProps }
+				/>
+			) }
+			{ ! image && <ImagePlaceholder style={ imageStyles } /> }
+		</>
+	);
+};
+
+type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
+
+export const Block = ( props: Props ): JSX.Element | null => {
+	const {
+		className,
+		imageSizing = ImageSizing.SINGLE,
+		showProductLink = true,
+		showSaleBadge,
+		saleBadgeAlign = 'right',
+		height,
+		width,
+		scale,
+		aspectRatio,
+		...restProps
+	} = props;
+	const styleProps = useStyleProps( props );
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product, isLoading } = useProductDataContext();
+	const { dispatchStoreEvent } = useStoreEvents();
+
+	if ( ! product.id ) {
+		return (
+			<div
+				className={ classnames(
+					className,
+					'wc-block-components-product-image',
+					{
+						[ `${ parentClassName }__product-image` ]:
+							parentClassName,
+					},
+					styleProps.className
+				) }
+				style={ styleProps.style }
+			>
+				<ImagePlaceholder />
+			</div>
+		);
+	}
+	const hasProductImages = !! product.images.length;
+	const image = hasProductImages ? product.images[ 0 ] : null;
+	const ParentComponent = showProductLink ? 'a' : Fragment;
+	const anchorLabel = sprintf(
+		/* translators: %s is referring to the product name */
+		__( 'Link to %s', 'woo-gutenberg-products-block' ),
+		product.name
+	);
+	const anchorProps = {
+		href: product.permalink,
+		...( ! hasProductImages && { 'aria-label': anchorLabel } ),
+		onClick: () => {
+			dispatchStoreEvent( 'product-view-link', {
+				product,
+			} );
+		},
+	};
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-image',
+				{
+					[ `${ parentClassName }__product-image` ]: parentClassName,
+				},
+				styleProps.className
+			) }
+			style={ styleProps.style }
+		>
+			<ParentComponent { ...( showProductLink && anchorProps ) }>
+				{ !! showSaleBadge && (
+					<ProductSaleBadge
+						align={ saleBadgeAlign }
+						{ ...restProps }
+					/>
+				) }
+				<Image
+					fallbackAlt={ product.name }
+					image={ image }
+					loaded={ ! isLoading }
+					showFullSize={ imageSizing !== ImageSizing.THUMBNAIL }
+					width={ width }
+					height={ height }
+					scale={ scale }
+					aspectRatio={ aspectRatio }
+				/>
+			</ParentComponent>
+		</div>
+	);
+};
+
+export default withProductDataContext( Block );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/constants.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { image, Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE: string = __(
+	'Product Image',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON: JSX.Element = (
+	<Icon icon={ image } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION: string = __(
+	'Display the main product image.',
+	'woo-gutenberg-products-block'
+);

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx

@@ -0,0 +1,199 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { createInterpolateElement, useEffect } from '@wordpress/element';
+import { getAdminLink, getSettingWithCoercion } from '@woocommerce/settings';
+import { isBoolean } from '@woocommerce/types';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
+import {
+	Disabled,
+	PanelBody,
+	ToggleControl,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import {
+	BLOCK_TITLE as label,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+import { BlockAttributes, ImageSizing } from './types';
+import { ImageSizeSettings } from './image-size-settings';
+
+type SaleBadgeAlignProps = 'left' | 'center' | 'right';
+
+const Edit = ( {
+	attributes,
+	setAttributes,
+	context,
+}: BlockEditProps< BlockAttributes > & { context: Context } ): JSX.Element => {
+	const {
+		showProductLink,
+		imageSizing,
+		showSaleBadge,
+		saleBadgeAlign,
+		width,
+		height,
+		scale,
+	} = attributes;
+	const blockProps = useBlockProps( { style: { width, height } } );
+	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+	const isBlockThemeEnabled = getSettingWithCoercion(
+		'isBlockThemeEnabled',
+		false,
+		isBoolean
+	);
+
+	useEffect(
+		() => setAttributes( { isDescendentOfQueryLoop } ),
+		[ setAttributes, isDescendentOfQueryLoop ]
+	);
+
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				<ImageSizeSettings
+					scale={ scale }
+					width={ width }
+					height={ height }
+					setAttributes={ setAttributes }
+				/>
+				<PanelBody
+					title={ __( 'Content', 'woo-gutenberg-products-block' ) }
+				>
+					<ToggleControl
+						label={ __(
+							'Link to Product Page',
+							'woo-gutenberg-products-block'
+						) }
+						help={ __(
+							'Links the image to the single product listing.',
+							'woo-gutenberg-products-block'
+						) }
+						checked={ showProductLink }
+						onChange={ () =>
+							setAttributes( {
+								showProductLink: ! showProductLink,
+							} )
+						}
+					/>
+					<ToggleControl
+						label={ __(
+							'Show On-Sale Badge',
+							'woo-gutenberg-products-block'
+						) }
+						help={ __(
+							'Display a “sale” badge if the product is on-sale.',
+							'woo-gutenberg-products-block'
+						) }
+						checked={ showSaleBadge }
+						onChange={ () =>
+							setAttributes( {
+								showSaleBadge: ! showSaleBadge,
+							} )
+						}
+					/>
+					{ showSaleBadge && (
+						<ToggleGroupControl
+							label={ __(
+								'Sale Badge Alignment',
+								'woo-gutenberg-products-block'
+							) }
+							value={ saleBadgeAlign }
+							onChange={ ( value: SaleBadgeAlignProps ) =>
+								setAttributes( { saleBadgeAlign: value } )
+							}
+						>
+							<ToggleGroupControlOption
+								value="left"
+								label={ __(
+									'Left',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="center"
+								label={ __(
+									'Center',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="right"
+								label={ __(
+									'Right',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+						</ToggleGroupControl>
+					) }
+					{ ! isBlockThemeEnabled && (
+						<ToggleGroupControl
+							label={ __(
+								'Image Sizing',
+								'woo-gutenberg-products-block'
+							) }
+							help={ createInterpolateElement(
+								__(
+									'Product image cropping can be modified in the <a>Customizer</a>.',
+									'woo-gutenberg-products-block'
+								),
+								{
+									a: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											href={ `${ getAdminLink(
+												'customize.php'
+											) }?autofocus[panel]=woocommerce&autofocus[section]=woocommerce_product_images` }
+											target="_blank"
+											rel="noopener noreferrer"
+										/>
+									),
+								}
+							) }
+							value={ imageSizing }
+							onChange={ ( value: ImageSizing ) =>
+								setAttributes( { imageSizing: value } )
+							}
+						>
+							<ToggleGroupControlOption
+								value={ ImageSizing.SINGLE }
+								label={ __(
+									'Full Size',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value={ ImageSizing.THUMBNAIL }
+								label={ __(
+									'Cropped',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+						</ToggleGroupControl>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<Disabled>
+				<Block { ...{ ...attributes, ...context } } />
+			</Disabled>
+		</div>
+	);
+};
+
+export default withProductSelector( { icon, label, description } )( Edit );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/frontend.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/image-size-settings.tsx

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { BlockAttributes } from '@wordpress/blocks';
+import {
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToolsPanel as ToolsPanel,
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+
+interface ImageSizeSettingProps {
+	scale: string;
+	width: string | undefined;
+	height: string | undefined;
+	setAttributes: ( attrs: BlockAttributes ) => void;
+}
+
+const scaleHelp: Record< string, string > = {
+	cover: __(
+		'Image is scaled and cropped to fill the entire space without being distorted.',
+		'woo-gutenberg-products-block'
+	),
+	contain: __(
+		'Image is scaled to fill the space without clipping nor distorting.',
+		'woo-gutenberg-products-block'
+	),
+	fill: __(
+		'Image will be stretched and distorted to completely fill the space.',
+		'woo-gutenberg-products-block'
+	),
+};
+
+export const ImageSizeSettings = ( {
+	scale,
+	width,
+	height,
+	setAttributes,
+}: ImageSizeSettingProps ) => {
+	return (
+		<ToolsPanel
+			className="wc-block-product-image__tools-panel"
+			label={ __( 'Image size', 'woo-gutenberg-products-block' ) }
+		>
+			<UnitControl
+				label={ __( 'Height', 'woo-gutenberg-products-block' ) }
+				onChange={ ( value: string ) => {
+					setAttributes( { height: value } );
+				} }
+				value={ height }
+				units={ [
+					{
+						value: 'px',
+						label: 'px',
+					},
+				] }
+			/>
+			<UnitControl
+				label={ __( 'Width', 'woo-gutenberg-products-block' ) }
+				onChange={ ( value: string ) => {
+					setAttributes( { width: value } );
+				} }
+				value={ width }
+				units={ [
+					{
+						value: 'px',
+						label: 'px',
+					},
+				] }
+			/>
+			{ height && (
+				<ToolsPanelItem
+					hasValue={ () => true }
+					label={ __( 'Scale', 'woo-gutenberg-products-block' ) }
+				>
+					<ToggleGroupControl
+						label={ __( 'Scale', 'woo-gutenberg-products-block' ) }
+						value={ scale }
+						help={ scaleHelp[ scale ] }
+						onChange={ ( value: string ) =>
+							setAttributes( {
+								scale: value,
+							} )
+						}
+						isBlock
+					>
+						<>
+							<ToggleGroupControlOption
+								value="cover"
+								label={ __(
+									'Cover',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="contain"
+								label={ __(
+									'Contain',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="fill"
+								label={ __(
+									'Fill',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+						</>
+					</ToggleGroupControl>
+				</ToolsPanelItem>
+			) }
+		</ToolsPanel>
+	);
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.ts

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import type { BlockConfiguration } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+import { supports } from './supports';
+import attributes from './attributes';
+import sharedConfig from '../shared/config';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig: BlockConfiguration = {
+	...sharedConfig,
+	apiVersion: 2,
+	name: 'woocommerce/product-image',
+	title,
+	icon: { src: icon },
+	keywords: [ 'WooCommerce' ],
+	description,
+	usesContext: [ 'query', 'queryId', 'postId' ],
+	ancestor: [
+		'woocommerce/all-products',
+		'woocommerce/single-product',
+		'core/post-template',
+		'woocommerce/product-template',
+	],
+	textdomain: 'woo-gutenberg-products-block',
+	attributes,
+	supports,
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-image', { ...blockConfig } );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/style.scss

@@ -0,0 +1,67 @@
+.editor-styles-wrapper .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image,
+.wc-block-components-product-image {
+	text-decoration: none;
+	display: block;
+	position: relative;
+
+	a {
+		border-radius: inherit;
+		text-decoration: none;
+		border: 0;
+		outline: 0;
+		box-shadow: none;
+	}
+
+	img {
+		border-radius: inherit;
+		vertical-align: middle;
+		width: 100%;
+		height: auto;
+
+		&[hidden] {
+			display: none;
+		}
+	}
+
+	img[alt=""] {
+		border: 1px solid $image-placeholder-border-color;
+	}
+
+	.wc-block-components-product-sale-badge {
+		&--align-left {
+			position: absolute;
+			left: $gap-smaller * 0.5;
+			top: $gap-smaller * 0.5;
+			right: auto;
+			margin: 0;
+		}
+		&--align-center {
+			position: absolute;
+			top: $gap-smaller * 0.5;
+			left: 50%;
+			right: auto;
+			transform: translateX(-50%);
+			margin: 0;
+		}
+		&--align-right {
+			position: absolute;
+			right: $gap-smaller * 0.5;
+			top: $gap-smaller * 0.5;
+			left: auto;
+			margin: 0;
+		}
+	}
+}
+
+.is-loading .wc-block-components-product-image {
+	@include placeholder($include-border-radius: false);
+	width: auto;
+}
+
+.wc-block-components-product-image {
+	margin: 0 0 $gap-small;
+}
+
+.wc-block-product-image__tools-panel .components-input-control {
+	margin-bottom: 8px;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/supports.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+
+export const supports = {
+	html: false,
+	...( isFeaturePluginBuild() && {
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalSkipSerialization: true,
+		},
+		...( typeof getSpacingClassesAndStyles === 'function' && {
+			spacing: {
+				margin: true,
+				padding: true,
+			},
+		} ),
+		__experimentalSelector: '.wc-block-components-product-image',
+	} ),
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/test/block.test.tsx

@@ -0,0 +1,289 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from '@testing-library/react';
+import { ProductDataContextProvider } from '@woocommerce/shared-context';
+import { ProductResponseItem } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import { Block } from '../block';
+import { ImageSizing } from '../types';
+
+jest.mock( '@woocommerce/base-hooks', () => ( {
+	__esModule: true,
+	useStyleProps: jest.fn( () => ( {
+		className: '',
+		style: {},
+	} ) ),
+} ) );
+
+const productWithoutImages: ProductResponseItem = {
+	name: 'Test product',
+	id: 1,
+	permalink: 'http://test.com/product/test-product/',
+	images: [],
+	parent: 0,
+	type: '',
+	variation: '',
+	sku: '',
+	short_description: '',
+	description: '',
+	on_sale: false,
+	prices: {
+		currency_code: 'USD',
+		currency_symbol: '',
+		currency_minor_unit: 0,
+		currency_decimal_separator: '',
+		currency_thousand_separator: '',
+		currency_prefix: '',
+		currency_suffix: '',
+		price: '',
+		regular_price: '',
+		sale_price: '',
+		price_range: null,
+	},
+	price_html: '',
+	average_rating: '',
+	review_count: 0,
+	categories: [],
+	tags: [],
+	attributes: [],
+	variations: [],
+	has_options: false,
+	is_purchasable: false,
+	is_in_stock: false,
+	is_on_backorder: false,
+	low_stock_remaining: null,
+	sold_individually: false,
+	add_to_cart: {
+		text: '',
+		description: '',
+		url: '',
+		minimum: 0,
+		maximum: 0,
+		multiple_of: 0,
+	},
+};
+
+const productWithImages: ProductResponseItem = {
+	name: 'Test product',
+	id: 1,
+	permalink: 'http://test.com/product/test-product/',
+	images: [
+		{
+			id: 56,
+			src: 'logo-1.jpg',
+			thumbnail: 'logo-1-324x324.jpg',
+			srcset: 'logo-1.jpg 800w, logo-1-300x300.jpg 300w, logo-1-150x150.jpg 150w, logo-1-768x767.jpg 768w, logo-1-324x324.jpg 324w, logo-1-416x415.jpg 416w, logo-1-100x100.jpg 100w',
+			sizes: '(max-width: 800px) 100vw, 800px',
+			name: 'logo-1.jpg',
+			alt: '',
+		},
+		{
+			id: 55,
+			src: 'beanie-with-logo-1.jpg',
+			thumbnail: 'beanie-with-logo-1-324x324.jpg',
+			srcset: 'beanie-with-logo-1.jpg 800w, beanie-with-logo-1-300x300.jpg 300w, beanie-with-logo-1-150x150.jpg 150w, beanie-with-logo-1-768x768.jpg 768w, beanie-with-logo-1-324x324.jpg 324w, beanie-with-logo-1-416x416.jpg 416w, beanie-with-logo-1-100x100.jpg 100w',
+			sizes: '(max-width: 800px) 100vw, 800px',
+			name: 'beanie-with-logo-1.jpg',
+			alt: '',
+		},
+	],
+	parent: 0,
+	type: '',
+	variation: '',
+	sku: '',
+	short_description: '',
+	description: '',
+	on_sale: false,
+	prices: {
+		currency_code: 'USD',
+		currency_symbol: '',
+		currency_minor_unit: 0,
+		currency_decimal_separator: '',
+		currency_thousand_separator: '',
+		currency_prefix: '',
+		currency_suffix: '',
+		price: '',
+		regular_price: '',
+		sale_price: '',
+		price_range: null,
+	},
+	price_html: '',
+	average_rating: '',
+	review_count: 0,
+	categories: [],
+	tags: [],
+	attributes: [],
+	variations: [],
+	has_options: false,
+	is_purchasable: false,
+	is_in_stock: false,
+	is_on_backorder: false,
+	low_stock_remaining: null,
+	sold_individually: false,
+	add_to_cart: {
+		text: '',
+		description: '',
+		url: '',
+		minimum: 0,
+		maximum: 0,
+		multiple_of: 0,
+	},
+};
+
+describe( 'Product Image Block', () => {
+	describe( 'with product link', () => {
+		test( 'should render an anchor with the product image', () => {
+			const component = render(
+				<ProductDataContextProvider
+					product={ productWithImages }
+					isLoading={ false }
+				>
+					<Block
+						showProductLink={ true }
+						productId={ productWithImages.id }
+						showSaleBadge={ false }
+						saleBadgeAlign={ 'left' }
+						imageSizing={ ImageSizing.SINGLE }
+						isDescendentOfQueryLoop={ false }
+					/>
+				</ProductDataContextProvider>
+			);
+
+			// use testId as alt is added after image is loaded
+			const image = component.getByTestId( 'product-image' );
+			fireEvent.load( image );
+
+			const productImage = component.getByAltText(
+				productWithImages.name
+			);
+			expect( productImage.getAttribute( 'src' ) ).toBe(
+				productWithImages.images[ 0 ].src
+			);
+
+			const anchor = productImage.closest( 'a' );
+			expect( anchor?.getAttribute( 'href' ) ).toBe(
+				productWithImages.permalink
+			);
+		} );
+
+		test( 'should render an anchor with the placeholder image', () => {
+			const component = render(
+				<ProductDataContextProvider
+					product={ productWithoutImages }
+					isLoading={ false }
+				>
+					<Block
+						showProductLink={ true }
+						productId={ productWithoutImages.id }
+						showSaleBadge={ false }
+						saleBadgeAlign={ 'left' }
+						imageSizing={ ImageSizing.SINGLE }
+						isDescendentOfQueryLoop={ false }
+					/>
+				</ProductDataContextProvider>
+			);
+
+			const placeholderImage = component.getByAltText( '' );
+			expect( placeholderImage.getAttribute( 'src' ) ).toBe(
+				'placeholder.jpg'
+			);
+
+			const anchor = placeholderImage.closest( 'a' );
+			expect( anchor?.getAttribute( 'href' ) ).toBe(
+				productWithoutImages.permalink
+			);
+			expect( anchor?.getAttribute( 'aria-label' ) ).toBe(
+				`Link to ${ productWithoutImages.name }`
+			);
+		} );
+	} );
+
+	describe( 'without product link', () => {
+		test( 'should render the product image without an anchor wrapper', () => {
+			const component = render(
+				<ProductDataContextProvider
+					product={ productWithImages }
+					isLoading={ false }
+				>
+					<Block
+						showProductLink={ false }
+						productId={ productWithImages.id }
+						showSaleBadge={ false }
+						saleBadgeAlign={ 'left' }
+						imageSizing={ ImageSizing.SINGLE }
+						isDescendentOfQueryLoop={ false }
+					/>
+				</ProductDataContextProvider>
+			);
+			const image = component.getByTestId( 'product-image' );
+			fireEvent.load( image );
+
+			const productImage = component.getByAltText(
+				productWithImages.name
+			);
+			expect( productImage.getAttribute( 'src' ) ).toBe(
+				productWithImages.images[ 0 ].src
+			);
+
+			const anchor = productImage.closest( 'a' );
+			expect( anchor ).toBe( null );
+		} );
+
+		test( 'should render the placeholder image without an anchor wrapper', () => {
+			const component = render(
+				<ProductDataContextProvider
+					product={ productWithoutImages }
+					isLoading={ false }
+				>
+					<Block
+						showProductLink={ false }
+						productId={ productWithoutImages.id }
+						showSaleBadge={ false }
+						saleBadgeAlign={ 'left' }
+						imageSizing={ ImageSizing.SINGLE }
+						isDescendentOfQueryLoop={ false }
+					/>
+				</ProductDataContextProvider>
+			);
+
+			const placeholderImage = component.getByAltText( '' );
+			expect( placeholderImage.getAttribute( 'src' ) ).toBe(
+				'placeholder.jpg'
+			);
+
+			const anchor = placeholderImage.closest( 'a' );
+			expect( anchor ).toBe( null );
+		} );
+	} );
+
+	describe( 'without image', () => {
+		test( 'should render the placeholder with no inline width or height attributes', () => {
+			const component = render(
+				<ProductDataContextProvider
+					product={ productWithoutImages }
+					isLoading={ false }
+				>
+					<Block
+						showProductLink={ true }
+						productId={ productWithoutImages.id }
+						showSaleBadge={ false }
+						saleBadgeAlign={ 'left' }
+						imageSizing={ ImageSizing.SINGLE }
+						isDescendentOfQueryLoop={ false }
+					/>
+				</ProductDataContextProvider>
+			);
+
+			const placeholderImage = component.getByAltText( '' );
+			expect( placeholderImage.getAttribute( 'src' ) ).toBe(
+				'placeholder.jpg'
+			);
+			expect( placeholderImage.getAttribute( 'width' ) ).toBe( null );
+			expect( placeholderImage.getAttribute( 'height' ) ).toBe( null );
+		} );
+	} );
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/types.ts

@@ -0,0 +1,29 @@
+export enum ImageSizing {
+	SINGLE = 'single',
+	THUMBNAIL = 'thumbnail',
+}
+
+export interface BlockAttributes {
+	// The product ID.
+	productId: number;
+	// CSS Class name for the component.
+	className?: string | undefined;
+	// Whether or not to display a link to the product page.
+	showProductLink: boolean;
+	// Whether or not to display the on sale badge.
+	showSaleBadge: boolean;
+	// How should the sale badge be aligned if displayed.
+	saleBadgeAlign: 'left' | 'center' | 'right';
+	// Size of image to use.
+	imageSizing: ImageSizing;
+	// Whether or not be a children of Query Loop Block.
+	isDescendentOfQueryLoop: boolean;
+	// Height of the image.
+	height?: string;
+	// Width of the image.
+	width?: string;
+	// Image scaling method.
+	scale: 'cover' | 'contain' | 'fill';
+	// Aspect ratio of the image.
+	aspectRatio: string;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.ts

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { BlockAttributes } from '@wordpress/blocks';
+
+export const blockAttributes: BlockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+	isDescendentOfQueryLoop: {
+		type: 'boolean',
+		default: false,
+	},
+	textAlign: {
+		type: 'string',
+		default: '',
+	},
+	isDescendentOfSingleProductTemplate: {
+		type: 'boolean',
+		default: false,
+	},
+	isDescendentOfSingleProductBlock: {
+		type: 'boolean',
+		default: false,
+	},
+};
+
+export default blockAttributes;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.tsx

@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import ProductPrice from '@woocommerce/base-components/product-price';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { CurrencyCode } from '@woocommerce/type-defs/currency';
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { BlockAttributes } from './types';
+
+type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
+
+interface PriceProps {
+	currency_code: CurrencyCode;
+	currency_symbol: string;
+	currency_minor_unit: number;
+	currency_decimal_separator: string;
+	currency_thousand_separator: string;
+	currency_prefix: string;
+	currency_suffix: string;
+	price: string;
+	regular_price: string;
+	sale_price: string;
+	price_range: null | { min_amount: string; max_amount: string };
+}
+
+export const Block = ( props: Props ): JSX.Element | null => {
+	const { className, textAlign, isDescendentOfSingleProductTemplate } = props;
+	const styleProps = useStyleProps( props );
+	const { parentName, parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	const isDescendentOfAllProductsBlock =
+		parentName === 'woocommerce/all-products';
+
+	const wrapperClassName = classnames(
+		'wc-block-components-product-price',
+		className,
+		styleProps.className,
+		{
+			[ `${ parentClassName }__product-price` ]: parentClassName,
+		}
+	);
+
+	if ( ! product.id && ! isDescendentOfSingleProductTemplate ) {
+		const productPriceComponent = (
+			<ProductPrice align={ textAlign } className={ wrapperClassName } />
+		);
+		if ( isDescendentOfAllProductsBlock ) {
+			return (
+				<div className="wp-block-woocommerce-product-price">
+					{ productPriceComponent }
+				</div>
+			);
+		}
+		return productPriceComponent;
+	}
+
+	const prices: PriceProps = product.prices;
+	const currency = isDescendentOfSingleProductTemplate
+		? getCurrencyFromPriceResponse()
+		: getCurrencyFromPriceResponse( prices );
+
+	const pricePreview = '5000';
+	const isOnSale = prices.price !== prices.regular_price;
+	const priceClassName = classnames( {
+		[ `${ parentClassName }__product-price__value` ]: parentClassName,
+		[ `${ parentClassName }__product-price__value--on-sale` ]: isOnSale,
+	} );
+
+	const productPriceComponent = (
+		<ProductPrice
+			align={ textAlign }
+			className={ wrapperClassName }
+			style={ styleProps.style }
+			regularPriceStyle={ styleProps.style }
+			priceStyle={ styleProps.style }
+			priceClassName={ priceClassName }
+			currency={ currency }
+			price={
+				isDescendentOfSingleProductTemplate
+					? pricePreview
+					: prices.price
+			}
+			// Range price props
+			minPrice={ prices?.price_range?.min_amount }
+			maxPrice={ prices?.price_range?.max_amount }
+			// This is the regular or original price when the `price` value is a sale price.
+			regularPrice={
+				isDescendentOfSingleProductTemplate
+					? pricePreview
+					: prices.regular_price
+			}
+			regularPriceClassName={ classnames( {
+				[ `${ parentClassName }__product-price__regular` ]:
+					parentClassName,
+			} ) }
+		/>
+	);
+	if ( isDescendentOfAllProductsBlock ) {
+		return (
+			<div className="wp-block-woocommerce-product-price">
+				{ productPriceComponent }
+			</div>
+		);
+	}
+	return productPriceComponent;
+};
+
+export default ( props: Props ) => {
+	// It is necessary because this block has to support serveral contexts:
+	// - Inside `All Products Block` -> `withProductDataContext` HOC
+	// - Inside `Products Block` -> Gutenberg Context
+	// - Inside `Single Product Template` -> Gutenberg Context
+	// - Without any parent -> `WithSelector` and `withProductDataContext` HOCs
+	// For more details, check https://github.com/woocommerce/woocommerce-blocks/pull/8609
+	if ( props.isDescendentOfSingleProductTemplate ) {
+		return <Block { ...props } />;
+	}
+	return withProductDataContext( Block )( props );
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/constants.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { currencyDollar, Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE: string = __(
+	'Product Price',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON: JSX.Element = (
+	<Icon
+		icon={ currencyDollar }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
+export const BLOCK_DESCRIPTION: string = __(
+	'Display the price of a product.',
+	'woo-gutenberg-products-block'
+);

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.tsx

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import type { BlockAlignment } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
+
+type UnsupportedAligments = 'wide' | 'full';
+type AllowedAlignments = Exclude< BlockAlignment, UnsupportedAligments >;
+
+interface BlockAttributes {
+	textAlign?: AllowedAlignments;
+}
+
+interface Attributes {
+	textAlign: 'left' | 'center' | 'right';
+	isDescendentOfSingleProduct: boolean;
+	isDescendentOfSingleProductBlock: boolean;
+	productId: number;
+}
+
+interface Context {
+	queryId: number;
+}
+
+interface Props {
+	attributes: Attributes;
+	setAttributes: (
+		attributes: Partial< BlockAttributes > & Record< string, unknown >
+	) => void;
+	context: Context;
+}
+
+const PriceEdit = ( {
+	attributes,
+	setAttributes,
+	context,
+}: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const blockAttrs = {
+		...attributes,
+		...context,
+	};
+	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+
+	let { isDescendentOfSingleProductTemplate } =
+		useIsDescendentOfSingleProductTemplate( { isDescendentOfQueryLoop } );
+
+	if ( isDescendentOfQueryLoop ) {
+		isDescendentOfSingleProductTemplate = false;
+	}
+
+	useEffect(
+		() =>
+			setAttributes( {
+				isDescendentOfQueryLoop,
+				isDescendentOfSingleProductTemplate,
+			} ),
+		[
+			isDescendentOfQueryLoop,
+			isDescendentOfSingleProductTemplate,
+			setAttributes,
+		]
+	);
+
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ attributes.textAlign }
+					onChange={ ( textAlign: AllowedAlignments ) => {
+						setAttributes( { textAlign } );
+					} }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>
+				<Block { ...blockAttrs } />
+			</div>
+		</>
+	);
+};
+
+export default PriceEdit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './edit';
+import attributes from './attributes';
+import { supports } from './supports';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const { ancestor, ...configuration } = sharedConfig;
+
+const blockConfig = {
+	...configuration,
+	apiVersion: 2,
+	title,
+	description,
+	usesContext: [ 'query', 'queryId', 'postId' ],
+	icon: { src: icon },
+	attributes,
+	supports,
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-price', blockConfig );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/supports.ts

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+
+export const supports = {
+	...sharedConfig.supports,
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: true,
+			link: false,
+			__experimentalSkipSerialization: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalSkipSerialization: true,
+			__experimentalLetterSpacing: true,
+		},
+		__experimentalSelector:
+			'.wp-block-woocommerce-product-price .wc-block-components-product-price',
+	} ),
+	...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+	} ),
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/types.ts

@@ -0,0 +1,7 @@
+export interface BlockAttributes {
+	productId?: number;
+	className?: string;
+	textAlign?: 'left' | 'center' | 'right';
+	isDescendentOfQueryLoop?: boolean;
+	isDescendentOfSingleProductTemplate?: boolean;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/block.json

@@ -0,0 +1,18 @@
+{
+	"name": "woocommerce/product-details",
+	"version": "1.0.0",
+	"icon": "info",
+	"title": "Product Details",
+	"description": "Display a product's description, attributes, and reviews.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"align": true,
+		"spacing": {
+			"margin": true
+		}
+	},
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/block.tsx

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+
+interface SingleProductTab {
+	id: string;
+	title: string;
+	active: boolean;
+	content: string | undefined;
+}
+
+const ProductTabTitle = ( {
+	id,
+	title,
+	active,
+}: Pick< SingleProductTab, 'id' | 'title' | 'active' > ) => {
+	return (
+		<li
+			className={ classnames( `${ id }_tab`, {
+				active,
+			} ) }
+			id={ `tab-title-${ id }` }
+			role="tab"
+			aria-controls={ `tab-${ id }` }
+		>
+			<a href={ `#tab-${ id }` }>{ title }</a>
+		</li>
+	);
+};
+
+const ProductTabContent = ( {
+	id,
+	content,
+}: Pick< SingleProductTab, 'id' | 'content' > ) => {
+	return (
+		<div
+			className={ `${ id }_tab` }
+			id={ `tab-title-${ id }` }
+			role="tab"
+			aria-controls={ `tab-${ id }` }
+		>
+			{ content }
+		</div>
+	);
+};
+
+export const SingleProductDetails = () => {
+	const blockProps = useBlockProps();
+	const productTabs = [
+		{
+			id: 'description',
+			title: 'Description',
+			active: true,
+			content: __(
+				'This block lists description, attributes and reviews for a single product.',
+				'woo-gutenberg-products-block'
+			),
+		},
+		{
+			id: 'additional_information',
+			title: 'Additional Information',
+			active: false,
+		},
+		{ id: 'reviews', title: 'Reviews', active: false },
+	];
+	const tabsTitle = productTabs.map( ( { id, title, active } ) => (
+		<ProductTabTitle
+			key={ id }
+			id={ id }
+			title={ title }
+			active={ active }
+		/>
+	) );
+	const tabsContent = productTabs.map( ( { id, content } ) => (
+		<ProductTabContent key={ id } id={ id } content={ content } />
+	) );
+
+	return (
+		<div { ...blockProps }>
+			<ul className="wc-tabs tabs" role="tablist">
+				{ tabsTitle }
+			</ul>
+			{ tabsContent }
+		</div>
+	);
+};
+
+export default SingleProductDetails;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/edit.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+import type { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { Attributes } from './types';
+
+const Edit = ( { attributes }: BlockEditProps< Attributes > ) => {
+	const { className } = attributes;
+	const blockProps = useBlockProps( {
+		className,
+	} );
+
+	return (
+		<>
+			<div { ...blockProps }>
+				<Disabled>
+					<Block />
+				</Disabled>
+			</div>
+		</>
+	);
+};
+
+export default Edit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+import { Icon } from '@wordpress/icons';
+import { productDetails } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import './style.scss';
+
+registerBlockSingleProductTemplate( {
+	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		icon: {
+			src: (
+				<Icon
+					icon={ productDetails }
+					className="wc-block-editor-components-block-icon"
+				/>
+			),
+		},
+		edit,
+	},
+	isAvailableOnPostEditor: false,
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/style.scss

@@ -0,0 +1,38 @@
+.wp-block-woocommerce-product-details {
+	ul.wc-tabs {
+		list-style: none;
+		padding: 0 0 0 1em;
+		margin: 0 0 1.618em;
+		overflow: hidden;
+		position: relative;
+		border-bottom: 1px solid $gray-200;
+
+		li {
+			border: 1px solid $gray-200;
+			display: inline-block;
+			position: relative;
+			z-index: 0;
+			border-radius: $universal-border-radius $universal-border-radius 0 0;
+			margin: 0;
+			padding: 0.5em 1em;
+
+			a {
+				display: inline-block;
+				font-weight: 700;
+				text-decoration: none;
+
+				&:hover {
+					text-decoration: none;
+				}
+			}
+
+			&.active {
+				z-index: 2;
+
+				a {
+					text-shadow: inherit;
+				}
+			}
+		}
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/types.ts

@@ -0,0 +1,3 @@
+export interface Attributes {
+	className?: string;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/product-image-gallery",
+	"version": "1.0.0",
+	"title": "Product Image Gallery",
+	"icon": "gallery",
+	"description": "Display a product's images.",
+	"category": "woocommerce",
+	"supports": {
+		"align": true,
+		"multiple": false
+	},
+	"keywords": [ "WooCommerce" ],
+	"usesContext": [ "postId", "postType", "queryId" ],
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
+import { isEmptyObject } from '@woocommerce/types';
+import { useBlockProps } from '@wordpress/block-editor';
+import { BlockAttributes } from '@wordpress/blocks';
+import { Disabled } from '@wordpress/components';
+import type { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const Placeholder = () => {
+	return (
+		<div className="wc-block-editor-product-gallery">
+			<img
+				src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
+				alt="Placeholder"
+			/>
+			<div className="wc-block-editor-product-gallery__other-images">
+				{ [ ...Array( 4 ).keys() ].map( ( index ) => {
+					return (
+						<img
+							key={ index }
+							src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
+							alt="Placeholder"
+						/>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+};
+
+type Context = {
+	postId: string;
+	postType: string;
+	queryId: string;
+};
+
+interface Props extends BlockEditProps< BlockAttributes > {
+	context: Context;
+}
+
+const Edit = ( { context }: Props ) => {
+	const blockProps = useBlockProps();
+
+	if ( isEmptyObject( context ) ) {
+		return (
+			<div { ...blockProps }>
+				<Disabled>
+					<Placeholder />
+				</Disabled>
+			</div>
+		);
+	}
+	// We have work on this case when we will work on the Single Product block.
+	return <></>;
+};
+
+export default Edit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss

@@ -0,0 +1,14 @@
+.wc-block-editor-product-gallery {
+	img {
+		max-width: 500px;
+		width: 100%;
+		height: auto;
+	}
+	.wc-block-editor-product-gallery__other-images {
+		img {
+			width: 100px;
+			height: 100px;
+			margin: 5px;
+		}
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { gallery as icon } from '@wordpress/icons';
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+import './style.scss';
+
+registerBlockSingleProductTemplate( {
+	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		icon,
+		// @ts-expect-error `edit` can be extended to include other attributes
+		edit,
+	},
+	isAvailableOnPostEditor: false,
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss

@@ -0,0 +1,24 @@
+.woocommerce .wp-block-woocommerce-product-image-gallery {
+	position: relative;
+	// This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container
+	clear: both;
+	max-width: 512px;
+
+	span.onsale {
+		right: unset;
+		z-index: 1;
+		left: -1rem;
+	}
+}
+
+// This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container
+.woocommerce .wp-block-woocommerce-product-image-gallery::after {
+	clear: both;
+	content: "";
+	display: table;
+}
+
+
+.woocommerce .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.images {
+	width: 100%;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-meta/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/product-meta",
+	"version": "1.0.0",
+	"title": "Product Meta",
+	"icon": "product",
+	"description": "Display a product’s SKU, categories, tags, and more.",
+	"category": "woocommerce",
+	"supports": {
+		"align": true,
+		"reusable": false
+	},
+	"keywords": [ "WooCommerce" ],
+	"usesContext": [ "postId", "postType", "queryId" ],
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-meta/edit.tsx

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlockTemplate } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
+
+const Edit = () => {
+	const isDescendentOfSingleProductTemplate =
+		useIsDescendentOfSingleProductTemplate();
+
+	const TEMPLATE: InnerBlockTemplate[] = [
+		[
+			'core/group',
+			{ layout: { type: 'flex', flexWrap: 'nowrap' } },
+			[
+				[
+					'woocommerce/product-sku',
+					{
+						isDescendentOfSingleProductTemplate,
+					},
+				],
+				[
+					'core/post-terms',
+					{
+						prefix: 'Category: ',
+						term: 'product_cat',
+					},
+				],
+				[
+					'core/post-terms',
+					{
+						prefix: 'Tags: ',
+						term: 'product_tag',
+					},
+				],
+			],
+		],
+	];
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks template={ TEMPLATE } />
+		</div>
+	);
+};
+
+export default Edit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-meta/editor.scss

@@ -0,0 +1,4 @@
+.wc-block-editor-related-products__notice {
+	margin: 10px auto;
+	max-width: max-content;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-meta/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+import { Icon } from '@wordpress/icons';
+import { productMeta } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+registerBlockSingleProductTemplate( {
+	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		edit,
+		save,
+		icon: {
+			src: (
+				<Icon
+					icon={ productMeta }
+					className="wc-block-editor-components-block-icon"
+				/>
+			),
+		},
+		ancestor: [ 'woocommerce/single-product' ],
+	},
+	isAvailableOnPostEditor: true,
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-meta/save.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const Save = () => {
+	const blockProps = useBlockProps.save();
+
+	return (
+		<div { ...blockProps }>
+			{ /* @ts-expect-error: `InnerBlocks.Content` is a component that is typed in WordPress core*/ }
+			<InnerBlocks.Content />
+		</div>
+	);
+};
+
+export default Save;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/block.json

@@ -0,0 +1,15 @@
+{
+	"name": "woocommerce/product-reviews",
+	"version": "1.0.0",
+	"icon": "admin-comments",
+	"title": "Product Reviews",
+	"description": "A block that shows the reviews for a product.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {},
+	"attributes": {},
+	"usesContext": [ "postId" ],
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/block.tsx

@@ -0,0 +1,69 @@
+// We are using anchors as mere placeholders to replicate the front-end look.
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+/**
+ * External dependencies
+ */
+import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+import { Notice } from '@wordpress/components';
+
+export const ProductReviews = () => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<Notice
+				className={ 'wc-block-editor-related-products__notice' }
+				status={ 'info' }
+				isDismissible={ false }
+			>
+				<p>
+					{ __(
+						'The products reviews and the form to add a new review will be displayed here according to your theme. The look you see here is not representative of what is going to look like, this is just a placeholder.',
+						'woo-gutenberg-products-block'
+					) }
+				</p>
+			</Notice>
+			<h2>
+				{ __(
+					'3 reviews for this product',
+					'woo-gutenberg-products-block'
+				) }
+			</h2>
+			<img
+				src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-reviews.svg` }
+				alt="Placeholder"
+			/>
+			<h3>{ __( 'Add a review', 'woo-gutenberg-products-block' ) }</h3>
+			<div className="wp-block-woocommerce-product-reviews__editor__form-container">
+				<div className="wp-block-woocommerce-product-reviews__editor__row">
+					<span>
+						{ __(
+							'Your rating *',
+							'woo-gutenberg-products-block'
+						) }
+					</span>
+					<p className="wp-block-woocommerce-product-reviews__editor__stars"></p>
+				</div>
+				<div className="wp-block-woocommerce-product-reviews__editor__row">
+					<span>
+						{ __(
+							'Your review *',
+							'woo-gutenberg-products-block'
+						) }
+					</span>
+					<textarea />
+				</div>
+				<input
+					type="submit"
+					className="submit wp-block-button__link wp-element-button"
+					value={ __( 'Submit', 'woo-gutenberg-products-block' ) }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default ProductReviews;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/edit.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+import type { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { Attributes } from './types';
+
+const Edit = ( { attributes }: BlockEditProps< Attributes > ) => {
+	const { className } = attributes;
+	const blockProps = useBlockProps( {
+		className,
+	} );
+
+	return (
+		<>
+			<div { ...blockProps }>
+				<Disabled>
+					<Block />
+				</Disabled>
+			</div>
+		</>
+	);
+};
+
+export default Edit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import './style.scss';
+
+registerBlockSingleProductTemplate( {
+	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		edit,
+	},
+	isAvailableOnPostEditor: false,
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/style.scss

@@ -0,0 +1,53 @@
+.wp-block-woocommerce-product-reviews {
+	img {
+		max-width: 600px;
+	}
+
+	.submit {
+		margin-top: 2rem;
+	}
+}
+
+.wp-block-woocommerce-product-reviews__editor__row {
+	align-items: center;
+	display: flex;
+	gap: 2rem;
+
+	> span {
+		flex-basis: 20%;
+	}
+
+	textarea,
+	.wp-block-woocommerce-product-reviews__editor__stars {
+		flex-grow: 1;
+		margin-right: 1rem;
+	}
+
+	textarea {
+		flex-grow: 1;
+		height: 8rem;
+	}
+}
+
+.wp-block-woocommerce-product-reviews__editor__stars {
+	display: inline-block;
+	overflow: hidden;
+	position: relative;
+	width: 5.3em;
+	height: 1.618em;
+	line-height: 1.618;
+	font-size: 1em;
+	/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+	font-family: star;
+	font-weight: 400;
+
+	&::before {
+		color: inherit;
+		content: "SSSSS";
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		white-space: nowrap;
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/types.ts

@@ -0,0 +1,3 @@
+export interface Attributes {
+	className?: string;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/block.json

@@ -0,0 +1,38 @@
+{
+	"name": "woocommerce/product-rating-counter",
+	"version": "1.0.0",
+	"title": "Product Rating Counter",
+	"description": "Display the review count of a product",
+	"attributes": {
+		"productId": {
+			"type": "number",
+			"default": 0
+		},
+		"isDescendentOfQueryLoop": {
+			"type": "boolean",
+			"default": false
+		},
+		"textAlign": {
+			"type": "string",
+			"default": ""
+		},
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		},
+		"isDescendentOfSingleProductTemplate": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"usesContext": [ "query", "queryId", "postId" ],
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"align": true
+	},
+	"ancestor": [ "woocommerce/single-product" ],
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/block.tsx

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { isNumber, ProductResponseItem } from '@woocommerce/types';
+import { Disabled } from '@wordpress/components';
+
+const getRatingCount = ( product: ProductResponseItem ) => {
+	const count = isNumber( product.review_count )
+		? product.review_count
+		: parseInt( product.review_count, 10 );
+
+	return Number.isFinite( count ) && count > 0 ? count : 0;
+};
+
+const ReviewsCount = ( props: { reviews: number } ): JSX.Element => {
+	const { reviews } = props;
+
+	const reviewsCount = reviews
+		? sprintf(
+				/* translators: %s is referring to the total of reviews for a product */
+				_n(
+					'(%s customer review)',
+					'(%s customer reviews)',
+					reviews,
+					'woo-gutenberg-products-block'
+				),
+				reviews
+		  )
+		: __( '(X customer reviews)', 'woo-gutenberg-products-block' );
+
+	return (
+		<span className="wc-block-components-product-rating-counter__reviews_count">
+			<Disabled>
+				<a href="/">{ reviewsCount }</a>
+			</Disabled>
+		</span>
+	);
+};
+
+type ProductRatingCounterProps = {
+	className?: string;
+	textAlign?: string;
+	isDescendentOfSingleProductBlock: boolean;
+	isDescendentOfQueryLoop: boolean;
+	postId: number;
+	productId: number;
+	shouldDisplayMockedReviewsWhenProductHasNoReviews: boolean;
+};
+
+export const Block = (
+	props: ProductRatingCounterProps
+): JSX.Element | undefined => {
+	const { textAlign, shouldDisplayMockedReviewsWhenProductHasNoReviews } =
+		props;
+	const styleProps = useStyleProps( props );
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const reviews = getRatingCount( product );
+
+	const className = classnames(
+		styleProps.className,
+		'wc-block-components-product-rating-counter',
+		{
+			[ `${ parentClassName }__product-rating` ]: parentClassName,
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		}
+	);
+
+	if ( reviews || shouldDisplayMockedReviewsWhenProductHasNoReviews ) {
+		return (
+			<div className={ className } style={ styleProps.style }>
+				<div className="wc-block-components-product-rating-counter__container">
+					<ReviewsCount reviews={ reviews } />
+				</div>
+			</div>
+		);
+	}
+};
+
+export default withProductDataContext( Block );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/edit.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { useEffect } from '@wordpress/element';
+import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { BlockAttributes } from './types';
+import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
+
+const Edit = (
+	props: BlockEditProps< BlockAttributes > & { context: Context }
+): JSX.Element => {
+	const { attributes, setAttributes, context } = props;
+	const blockProps = useBlockProps( {
+		className: 'wp-block-woocommerce-product-rating-counter',
+	} );
+	const blockAttrs = {
+		...attributes,
+		...context,
+		shouldDisplayMockedReviewsWhenProductHasNoReviews: true,
+	};
+	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+	const { isDescendentOfSingleProductBlock } =
+		useIsDescendentOfSingleProductBlock( {
+			blockClientId: blockProps?.id,
+		} );
+	let { isDescendentOfSingleProductTemplate } =
+		useIsDescendentOfSingleProductTemplate();
+
+	if ( isDescendentOfQueryLoop || isDescendentOfSingleProductBlock ) {
+		isDescendentOfSingleProductTemplate = false;
+	}
+
+	useEffect( () => {
+		setAttributes( {
+			isDescendentOfQueryLoop,
+			isDescendentOfSingleProductBlock,
+			isDescendentOfSingleProductTemplate,
+		} );
+	}, [
+		setAttributes,
+		isDescendentOfQueryLoop,
+		isDescendentOfSingleProductBlock,
+		isDescendentOfSingleProductTemplate,
+	] );
+
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ attributes.textAlign }
+					onChange={ ( newAlign ) => {
+						setAttributes( { textAlign: newAlign || '' } );
+					} }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>
+				<Block { ...blockAttrs } />
+			</div>
+		</>
+	);
+};
+
+export default Edit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { Icon, starFilled } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import { supports } from './support';
+
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ starFilled }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	supports,
+	edit,
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/support.ts

@@ -0,0 +1,24 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: false,
+			background: false,
+			link: true,
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalSelector: '.wc-block-components-product-rating-counter',
+	} ),
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/types.ts

@@ -0,0 +1,7 @@
+export interface BlockAttributes {
+	productId: number;
+	isDescendentOfQueryLoop: boolean;
+	isDescendentOfSingleProductBlock: boolean;
+	isDescendentOfSingleProductTemplate: boolean;
+	textAlign: string;
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/block.json

@@ -0,0 +1,38 @@
+{
+	"name": "woocommerce/product-rating-stars",
+	"version": "1.0.0",
+	"title": "Product Rating Stars",
+	"description": "Display the average rating of a product with stars",
+	"attributes": {
+		"productId": {
+			"type": "number",
+			"default": 0
+		},
+		"isDescendentOfQueryLoop": {
+			"type": "boolean",
+			"default": false
+		},
+		"textAlign": {
+			"type": "string",
+			"default": ""
+		},
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		},
+		"isDescendentOfSingleProductTemplate": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"usesContext": [ "query", "queryId", "postId" ],
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"align": true
+	},
+	"ancestor": [ "woocommerce/single-product" ],
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/block.tsx

@@ -0,0 +1,158 @@
+/**
+ * External dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { isNumber, ProductResponseItem } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+type RatingProps = {
+	reviews: number;
+	rating: number;
+	parentClassName?: string;
+};
+
+const getAverageRating = (
+	product: Omit< ProductResponseItem, 'average_rating' > & {
+		average_rating: string;
+	}
+) => {
+	const rating = parseFloat( product.average_rating );
+
+	return Number.isFinite( rating ) && rating > 0 ? rating : 0;
+};
+
+const getRatingCount = ( product: ProductResponseItem ) => {
+	const count = isNumber( product.review_count )
+		? product.review_count
+		: parseInt( product.review_count, 10 );
+
+	return Number.isFinite( count ) && count > 0 ? count : 0;
+};
+
+const getStarStyle = ( rating: number ) => ( {
+	width: ( rating / 5 ) * 100 + '%',
+} );
+
+const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
+	const starStyle = getStarStyle( 0 );
+
+	return (
+		<div
+			className={ classnames(
+				'wc-block-components-product-rating-stars__norating-container',
+				`${ parentClassName }-product-rating-stars__norating-container`
+			) }
+		>
+			<div
+				className={
+					'wc-block-components-product-rating-stars__norating'
+				}
+				role="img"
+			>
+				<span style={ starStyle } />
+			</div>
+			<span>{ __( 'No Reviews', 'woo-gutenberg-products-block' ) }</span>
+		</div>
+	);
+};
+
+const Rating = ( props: RatingProps ): JSX.Element => {
+	const { rating, reviews, parentClassName } = props;
+
+	const starStyle = getStarStyle( rating );
+
+	const ratingText = sprintf(
+		/* translators: %f is referring to the average rating value */
+		__( 'Rated %f out of 5', 'woo-gutenberg-products-block' ),
+		rating
+	);
+
+	const ratingHTML = {
+		__html: sprintf(
+			/* translators: %1$s is referring to the average rating value, %2$s is referring to the number of ratings */
+			_n(
+				'Rated %1$s out of 5 based on %2$s customer rating',
+				'Rated %1$s out of 5 based on %2$s customer ratings',
+				reviews,
+				'woo-gutenberg-products-block'
+			),
+			sprintf( '<strong class="rating">%f</strong>', rating ),
+			sprintf( '<span class="rating">%d</span>', reviews )
+		),
+	};
+	return (
+		<div
+			className={ classnames(
+				'wc-block-components-product-rating-stars__stars',
+				`${ parentClassName }__product-rating-stars__stars`
+			) }
+			role="img"
+			aria-label={ ratingText }
+		>
+			<span style={ starStyle } dangerouslySetInnerHTML={ ratingHTML } />
+		</div>
+	);
+};
+
+interface ProductRatingStarsProps {
+	className?: string;
+	textAlign?: string;
+	isDescendentOfSingleProductBlock: boolean;
+	isDescendentOfQueryLoop: boolean;
+	postId: number;
+	productId: number;
+	shouldDisplayMockedReviewsWhenProductHasNoReviews: boolean;
+}
+
+export const Block = ( props: ProductRatingStarsProps ): JSX.Element | null => {
+	const { textAlign, shouldDisplayMockedReviewsWhenProductHasNoReviews } =
+		props;
+	const styleProps = useStyleProps( props );
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const rating = getAverageRating( product );
+	const reviews = getRatingCount( product );
+
+	const className = classnames(
+		styleProps.className,
+		'wc-block-components-product-rating-stars',
+		{
+			[ `${ parentClassName }__product-rating` ]: parentClassName,
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		}
+	);
+	const mockedRatings = shouldDisplayMockedReviewsWhenProductHasNoReviews ? (
+		<NoRating parentClassName={ parentClassName } />
+	) : null;
+
+	const content = reviews ? (
+		<Rating
+			rating={ rating }
+			reviews={ reviews }
+			parentClassName={ parentClassName }
+		/>
+	) : (
+		mockedRatings
+	);
+
+	return (
+		<div className={ className } style={ styleProps.style }>
+			<div className="wc-block-components-product-rating-stars__container">
+				{ content }
+			</div>
+		</div>
+	);
+};
+
+export default withProductDataContext( Block );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/edit.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { useEffect } from '@wordpress/element';
+import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { BlockAttributes } from './types';
+import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
+
+const Edit = (
+	props: BlockEditProps< BlockAttributes > & { context: Context }
+): JSX.Element => {
+	const { attributes, setAttributes, context } = props;
+	const blockProps = useBlockProps( {
+		className: 'wp-block-woocommerce-product-rating',
+	} );
+	const blockAttrs = {
+		...attributes,
+		...context,
+		shouldDisplayMockedReviewsWhenProductHasNoReviews: true,
+	};
+	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+	const { isDescendentOfSingleProductBlock } =
+		useIsDescendentOfSingleProductBlock( {
+			blockClientId: blockProps?.id,
+		} );
+	let { isDescendentOfSingleProductTemplate } =
+		useIsDescendentOfSingleProductTemplate();
+
+	if ( isDescendentOfQueryLoop || isDescendentOfSingleProductBlock ) {
+		isDescendentOfSingleProductTemplate = false;
+	}
+
+	useEffect( () => {
+		setAttributes( {
+			isDescendentOfQueryLoop,
+			isDescendentOfSingleProductBlock,
+			isDescendentOfSingleProductTemplate,
+		} );
+	}, [
+		setAttributes,
+		isDescendentOfQueryLoop,
+		isDescendentOfSingleProductBlock,
+		isDescendentOfSingleProductTemplate,
+	] );
+
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ attributes.textAlign }
+					onChange={ ( newAlign ) => {
+						setAttributes( { textAlign: newAlign || '' } );
+					} }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>
+				<Block { ...blockAttrs } />
+			</div>
+		</>
+	);
+};
+
+export default Edit;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { Icon, starFilled } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import { supports } from './support';
+
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ starFilled }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	supports,
+	edit,
+} );