{"id":581,"date":"2021-06-29T11:00:51","date_gmt":"2021-06-29T18:00:51","guid":{"rendered":"https:\/\/www.mavice.com\/blog\/?p=581"},"modified":"2021-08-10T11:47:03","modified_gmt":"2021-08-10T18:47:03","slug":"extend-a-component","status":"publish","type":"post","link":"https:\/\/www.mavice.com\/blog\/extend-a-component\/","title":{"rendered":"Extend a Component"},"content":{"rendered":"\n

*This article was modeled from the current Adobe React SPA documentation<\/a>.<\/em><\/p>\n\n\n\n

Learn how to extend an existing Core Component to be used with the AEM SPA Editor. Understanding how to extend an existing component is a powerful technique to customize and expand the capabilities of an AEM SPA Editor implementation.<\/p>\n\n\n\n

Objective<\/h2>\n\n\n\n
  1. Extend an existing Core Component with additional properties and content.<\/li>
  2. Understand the basic of Component Inheritance with the use of sling:resourceSuperType<\/code>.<\/li>
  3. Learn how to leverage the Delegation Pattern<\/a> for Sling Models to re-use existing logic and functionality.<\/li><\/ol>\n\n\n\n

    What you will build<\/h2>\n\n\n\n

    This chapter illustrates the additional code needed to add an extra property to a standard Image<\/code> component to fulfill the requirements for a new Banner<\/code> component. The Banner<\/code> component contains all of the same properties as the standard Image<\/code> component but includes an additional property for users to populate the Banner Text<\/strong>.<\/p>\n\n\n\n

    \"Final<\/figure>\n\n\n\n

    Prerequisites<\/h2>\n\n\n\n

    Review the required tooling and instructions for setting up a local development environment<\/a>. It is assumed at this point in the tutorial users have a solid understanding of the AEM SPA Editor feature.<\/p>\n\n\n\n

    Inheritance with Sling Resource Super Type<\/h2>\n\n\n\n

    To extend an existing component set a property named sling:resourceSuperType<\/code> on your component\u2019s definition. sling:resourceSuperType<\/code>is a property<\/a> that can be set on an AEM component\u2019s definition that points to another component. This explicitly sets the component to inherit all functionality of the component identified as the sling:resourceSuperType<\/code>.<\/p>\n\n\n\n

    If we want to extend the Image<\/code> component at wknd-spa-vue\/components\/image<\/code> we need to update the code in the ui.apps<\/code> module.<\/p>\n\n\n\n

    1. Create a new folder beneath the ui.apps<\/code> module for banner<\/code> at ui.apps\/src\/main\/content\/jcr_root\/apps\/wknd-spa-vue\/components\/banner<\/code>.<\/li>
    2. Beneath banner<\/code> create a Component definition (.content.xml<\/code>) like the following:
      <\/li><\/ol>\n\n\n\n
      <?xml version<\/em>=\"1.0\" encoding<\/em>=\"UTF-8\"?>\n<jcr:root xmlns:sling<\/em>=\"http:\/\/sling.apache.org\/jcr\/sling\/1.0\" xmlns:cq<\/em>=\"http:\/\/www.day.com\/jcr\/cq\/1.0\" xmlns:jcr<\/em>=\"http:\/\/www.jcp.org\/jcr\/1.0\"\n          jcr:primaryType<\/em>=\"cq:Component\"\n          jcr:title<\/em>=\"Banner\"\n          sling:resourceSuperType<\/em>=\"wknd-spa-vue\/components\/image\"\n          componentGroup<\/em>=\"WKND SPA Vue - Content\"\/><\/pre>\n\n\n\n
      This sets wknd-spa-vue\/components\/banner<\/code> to inherit all functionality of wknd-spa-vue\/components\/image<\/code>.<\/p>\n\n\n\n
      cq:editConfig<\/h2>\n\n\n\n
      The _cq_editConfig.xml<\/code> file dictates the drag and drop behavior in the AEM authoring UI. When extending the Image component it is important that the resource type matches the component itself.<\/p>\n\n\n\n
      1. In the ui.apps<\/code> module create another file beneath banner<\/code> named _cq_editConfig.xml<\/code>.<\/li>
      2. Populate _cq_editConfig.xml<\/code> with the following XML:
        <\/li><\/ol>\n\n\n\n
        <?xml version<\/em>=\"1.0\" encoding<\/em>=\"UTF-8\"?>\n<jcr:root xmlns:sling<\/em>=\"http:\/\/sling.apache.org\/jcr\/sling\/1.0\" xmlns:cq<\/em>=\"http:\/\/www.day.com\/jcr\/cq\/1.0\" xmlns:jcr<\/em>=\"http:\/\/www.jcp.org\/jcr\/1.0\" xmlns:nt<\/em>=\"http:\/\/www.jcp.org\/jcr\/nt\/1.0\"\n          jcr:primaryType<\/em>=\"cq:EditConfig\">\n    <cq:dropTargets jcr:primaryType<\/em>=\"nt:unstructured\">\n        <image\n                jcr:primaryType<\/em>=\"cq:DropTargetConfig\"\n                accept<\/em>=\"[image\/gif,image\/jpeg,image\/png,image\/webp,image\/tiff,image\/svg\\\\+xml]\"\n                groups<\/em>=\"[media]\"\n                propertyName<\/em>=\".\/fileReference\">\n            <parameters\n                    jcr:primaryType<\/em>=\"nt:unstructured\"\n                    sling:resourceType<\/em>=\"wknd-spa-vue\/components\/banner\"\n                    imageCrop<\/em>=\"\"\n                    imageMap<\/em>=\"\"\n                    imageRotate<\/em>=\"\"\/>\n        <\/image>\n    <\/cq:dropTargets>\n    <cq:inplaceEditing\n            jcr:primaryType<\/em>=\"cq:InplaceEditingConfig\"\n            active<\/em>=\"{Boolean}true\"\n            editorType<\/em>=\"image\">\n        <inplaceEditingConfig jcr:primaryType<\/em>=\"nt:unstructured\">\n            <plugins jcr:primaryType<\/em>=\"nt:unstructured\">\n                <crop\n                        jcr:primaryType<\/em>=\"nt:unstructured\"\n                        supportedMimeTypes<\/em>=\"[image\/jpeg,image\/png,image\/webp,image\/tiff]\"\n                        features<\/em>=\"*\">\n                    <aspectRatios jcr:primaryType<\/em>=\"nt:unstructured\">\n                        <wideLandscape\n                                jcr:primaryType<\/em>=\"nt:unstructured\"\n                                name<\/em>=\"Wide Landscape\"\n                                ratio<\/em>=\"0.6180\"\/>\n                        <landscape\n                                jcr:primaryType<\/em>=\"nt:unstructured\"\n                                name<\/em>=\"Landscape\"\n                                ratio<\/em>=\"0.8284\"\/>\n                        <square\n                                jcr:primaryType<\/em>=\"nt:unstructured\"\n                                name<\/em>=\"Square\"\n                                ratio<\/em>=\"1\"\/>\n                        <portrait\n                                jcr:primaryType<\/em>=\"nt:unstructured\"\n                                name<\/em>=\"Portrait\"\n                                ratio<\/em>=\"1.6180\"\/>\n                    <\/aspectRatios>\n                <\/crop>\n                <flip\n                        jcr:primaryType<\/em>=\"nt:unstructured\"\n                        supportedMimeTypes<\/em>=\"[image\/jpeg,image\/png,image\/webp,image\/tiff]\"\n                        features<\/em>=\"-\"\/>\n                <map\n                        jcr:primaryType<\/em>=\"nt:unstructured\"\n                        supportedMimeTypes<\/em>=\"[image\/jpeg,image\/png,image\/webp,image\/tiff,image\/svg+xml]\"\n                        features<\/em>=\"*\"\/>\n                <rotate\n                        jcr:primaryType<\/em>=\"nt:unstructured\"\n                        supportedMimeTypes<\/em>=\"[image\/jpeg,image\/png,image\/webp,image\/tiff]\"\n                        features<\/em>=\"*\"\/>\n                <zoom\n                        jcr:primaryType<\/em>=\"nt:unstructured\"\n                        supportedMimeTypes<\/em>=\"[image\/jpeg,image\/png,image\/webp,image\/tiff]\"\n                        features<\/em>=\"*\"\/>\n            <\/plugins>\n            <ui jcr:primaryType<\/em>=\"nt:unstructured\">\n                <inline\n                        jcr:primaryType<\/em>=\"nt:unstructured\"\n                        toolbar<\/em>=\"[crop#launch,rotate#right,history#undo,history#redo,fullscreen#fullscreen,control#close,control#finish]\">\n                    <replacementToolbars\n                            jcr:primaryType<\/em>=\"nt:unstructured\"\n                            crop<\/em>=\"[crop#identifier,crop#unlaunch,crop#confirm]\"\/>\n                <\/inline>\n                <fullscreen jcr:primaryType<\/em>=\"nt:unstructured\">\n                    <toolbar\n                            jcr:primaryType<\/em>=\"nt:unstructured\"\n                            left<\/em>=\"[crop#launchwithratio,rotate#right,flip#horizontal,flip#vertical,zoom#reset100,zoom#popupslider]\"\n                            right<\/em>=\"[history#undo,history#redo,fullscreen#fullscreenexit]\"\/>\n                    <replacementToolbars jcr:primaryType<\/em>=\"nt:unstructured\">\n                        <crop\n                                jcr:primaryType<\/em>=\"nt:unstructured\"\n                                left<\/em>=\"[crop#identifier]\"\n                                right<\/em>=\"[crop#unlaunch,crop#confirm]\"\/>\n                        <map\n                                jcr:primaryType<\/em>=\"nt:unstructured\"\n                                left<\/em>=\"[map#rectangle,map#circle,map#polygon]\"\n                                right<\/em>=\"[map#unlaunch,map#confirm]\"\/>\n                    <\/replacementToolbars>\n                <\/fullscreen>\n            <\/ui>\n        <\/inplaceEditingConfig>\n    <\/cq:inplaceEditing>\n<\/jcr:root><\/pre>\n\n\n\n
        3. The unique aspect of the file is the <parameters><\/code> node that sets the resourceType to wknd-spa-vue\/components\/banner<\/code>.<\/p>\n\n\n\n
        <parameters\n    jcr:primaryType=\"nt:unstructured\"\n    sling:resourceType=\"wknd-spa-vue\/components\/banner\"\n    imageCrop=\"\"\n    imageMap=\"\"\n    imageRotate=\"\"\/><\/code><\/pre>\n\n\n\n

        Most component\u2019s do not require a _cq_editConfig<\/code>. Image components and descendants are the exception.<\/p>\n\n\n\n
        Extend the Dialog<\/h2>\n\n\n\n
        Our Banner<\/code> component requires an extra text field in the dialog to capture the bannerText<\/code>. Since we are using Sling inheritance, we can use features of the Sling Resource Merger<\/a> to override or extend portions of the dialog. In this sample a new tab has been added to the dialog to capture additional data from an author to populate the Card Component.<\/p>\n\n\n\n
        1. In the ui.apps<\/code> module, beneath the banner<\/code> folder, create a folder named _cq_dialog<\/code>.<\/li>
        2. Beneath _cq_dialog<\/code> create a Dialog definition file .content.xml<\/code>. Populate it with the following:<\/li><\/ol>\n\n\n\n
          <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<jcr:root xmlns:sling=\"http:\/\/sling.apache.org\/jcr\/sling\/1.0\" xmlns:granite=\"http:\/\/www.adobe.com\/jcr\/granite\/1.0\" xmlns:cq=\"http:\/\/www.day.com\/jcr\/cq\/1.0\" xmlns:jcr=\"http:\/\/www.jcp.org\/jcr\/1.0\" xmlns:nt=\"http:\/\/www.jcp.org\/jcr\/nt\/1.0\"\n    jcr:primaryType=\"nt:unstructured\"\n    jcr:title=\"Banner\"\n    sling:resourceType=\"cq\/gui\/components\/authoring\/dialog\">\n    <content jcr:primaryType=\"nt:unstructured\">\n        <items jcr:primaryType=\"nt:unstructured\">\n            <tabs jcr:primaryType=\"nt:unstructured\">\n                <items jcr:primaryType=\"nt:unstructured\">\n                    <text\n                        jcr:primaryType=\"nt:unstructured\"\n                        jcr:title=\"Text\"\n                        sling:orderBefore=\"asset\"\n                        sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/container\"\n                        margin=\"{Boolean}true\">\n                        <items jcr:primaryType=\"nt:unstructured\">\n                            <columns\n                                jcr:primaryType=\"nt:unstructured\"\n                                sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/fixedcolumns\"\n                                margin=\"{Boolean}true\">\n                                <items jcr:primaryType=\"nt:unstructured\">\n                                    <column\n                                        jcr:primaryType=\"nt:unstructured\"\n                                        sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/container\">\n                                        <items jcr:primaryType=\"nt:unstructured\">\n                                            <textGroup\n                                                granite:hide=\"${cqDesign.titleHidden}\"\n                                                jcr:primaryType=\"nt:unstructured\"\n                                                sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/well\">\n                                                <items jcr:primaryType=\"nt:unstructured\">\n                                                    <bannerText\n                                                        jcr:primaryType=\"nt:unstructured\"\n                                                        sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/form\/textfield\"\n                                                        fieldDescription=\"Text to display on top of the banner.\"\n                                                        fieldLabel=\"Banner Text\"\n                                                        name=\".\/bannerText\"\/>\n                                                <\/items>\n                                            <\/textGroup>\n                                        <\/items>\n                                    <\/column>\n                                <\/items>\n                            <\/columns>\n                        <\/items>\n                    <\/text>\n                <\/items>\n            <\/tabs>\n        <\/items>\n    <\/content>\n<\/jcr:root><\/code><\/pre>\n\n\n\n
          <\/p>\n\n\n\n
          The above XML definition will create a new tab named Text<\/strong> and order it before<\/em> the existing Asset<\/strong> tab. It will contain a single field Banner Text<\/strong>.<\/p>\n\n\n\n
          The dialog will look like the following:<\/p>\n\n\n\n
          <\/p>\n\n\n\n
          \"\"<\/figure><\/div>\n\n\n\n
          Observe that we did not have to define the tabs for Asset<\/strong> or Metadata<\/strong>. These are inherited via the sling:resourceSuperType<\/code> property.<\/p>\n\n\n\n
          Before we can preview the dialog, we need to implement the SPA Component and the MapTo<\/code> function.<\/p>\n\n\n\n
          Implement SPA Component<\/h2>\n\n\n\n
          In order to use the Banner component with the SPA Editor, a new SPA component must be created that will map to wknd-spa-vue\/components\/banner<\/code>. This will be done in the ui.frontend<\/code> module.<\/p>\n\n\n\n
          1. In the ui.frontend<\/code> module create a new folder for Banner<\/code> at ui.frontend\/src\/components\/Banner<\/code>.<\/li>
          2. Create a new file named Banner.js<\/code> beneath the Banner<\/code> folder. Populate it with the following:<\/li><\/ol>\n\n\n\n
            <template>\n  <div class<\/em>=\"Banner\">\n    <h4>{{bannerText}}<\/h4>\n    <div class<\/em>=\"BannerImage\">\n      <img\n        class<\/em>=\"Image-src\"\n        :src<\/em>=\"src\"\n        :alt<\/em>=\"alt\"\n        :title<\/em>=\"title ? title : alt\" \/>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nexport default <\/em>{\n  name: 'Banner',\n  props: {\n    src: {\n      type: String\n    },\n    alt: {\n      type: String\n    },\n    title: {\n      type: String\n    },\n    bannerText: {\n      type: String\n    }\n  }\n}\n<\/script>\n\n<style scoped<\/em>>\n\n<\/style>\n<\/pre>\n\n\n\n
            Update map-components.js to include the Banner component:<\/p>\n\n\n\n
            MapTo('wknd-spa-vue\/components\/banner')(Banner, {\n  emptyLabel: 'Banner',\n  isEmpty: function <\/em>(props) {\n    return <\/em>!props || !props.src || props.src.trim().length < 1\n  }\n})<\/pre>\n\n\n\n
            1. At this point the project can be deployed to AEM and the dialog can be tested:
              $ cd aem-guides-wknd-spa-vue<\/code>
              $ mvn clean install -PautoInstallSinglePackage<\/code>
              <\/li>
            2. Update the SPA Template\u2019s policy to add the Banner<\/code> component as an allowed component<\/strong>.
              <\/li>
            3. Navigate to a SPA page and add the Banner<\/code> component to one of the SPA pages<\/li><\/ol>\n\n\n\n
              Add Java Interface<\/h2>\n\n\n\n
              To ultimately expose the values from the component dialog to the Vue component we need to update the Sling Model that populates the JSON for the Banner<\/code> component. This will be done in the core<\/code> module that contains all of the Java code for our SPA project.<\/p>\n\n\n\n
              First we will create a new Java interface for Banner<\/code> that extends the Image<\/code> Java interface.<\/p>\n\n\n\n
              1. In the core<\/code> module create a new file named BannerModel.java<\/code> at core\/src\/main\/java\/com\/adobe\/aem\/guides\/wkndspa\/vue\/core\/models<\/code>.<\/li>
              2. Populate BannerModel.java<\/code> with the following:
                <\/li><\/ol>\n\n\n\n
                package com.adobe.aem.guides.wknd.spa.vue.core.models;\n\nimport com.adobe.cq.wcm.core.components.models.Image;\nimport org.osgi.annotation.versioning.ProviderType;\n\n@ProviderType\npublic interface BannerModel extends Image {\n\n    public String getBannerText();\n\n}<\/code><\/pre>\n\n\n\n
                <\/p>\n\n\n\n
                This will inherit all of the methods from the Core Component Image<\/code> interface and add one new method getBannerText()<\/code>.

                <\/p>\n\n\n\n
                Implement Sling Model<\/h2>\n\n\n\n
                Next, implement the Sling Model for the BannerModel<\/code> interface.<\/p>\n\n\n\n
                1. In the core<\/code> module create a new file named BannerModelImpl.java<\/code> at core\/src\/main\/java\/com\/adobe\/aem\/guides\/wknd\/spa\/vue\/core\/models\/impl<\/code>.<\/li>
                2. Populate BannerModelImpl.java<\/code> with the following:<\/li><\/ol>\n\n\n\n
                  package com.adobe.aem.guides.wknd.spa.vue.core.models.impl;\n\nimport com.adobe.aem.guides.wknd.spa.vue.core.models.BannerModel;\nimport com.adobe.cq.export.json.ComponentExporter;\nimport com.adobe.cq.export.json.ExporterConstants;\nimport com.adobe.cq.wcm.core.components.models.Image;\nimport org.apache.sling.models.annotations.*;\nimport org.apache.sling.api.SlingHttpServletRequest;\nimport org.apache.sling.models.annotations.Model;\nimport org.apache.sling.models.annotations.injectorspecific.Self;\nimport org.apache.sling.models.annotations.injectorspecific.ValueMapValue;\nimport org.apache.sling.models.annotations.via.ResourceSuperType;\n\n@Model(\n    adaptables = SlingHttpServletRequest.class, \n    adapters = { BannerModel.class,ComponentExporter.class}, \n    resourceType = BannerModelImpl.RESOURCE_TYPE, \n    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL\n    )\n@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)\npublic class BannerModelImpl implements BannerModel {\n\n    \/\/ points to the the component resource path in ui.apps\n    static final String RESOURCE_TYPE = \"wknd-spa-vue\/components\/banner\";\n\n    @Self\n    private SlingHttpServletRequest request;\n\n    \/\/ With sling inheritance (sling:resourceSuperType) we can adapt the current resource to the Image class\n    \/\/ this allows us to re-use all of the functionality of the Image class, without having to implement it ourself\n    \/\/ see https:\/\/github.com\/adobe\/aem-core-wcm-components\/wiki\/Delegation-Pattern-for-Sling-Models\n    @Self\n    @Via(type = ResourceSuperType.class)\n    private Image image;\n\n    \/\/ map the property saved by the dialog to a variable named `bannerText`\n    @ValueMapValue\n    private String bannerText;\n\n    \/\/ public getter to expose the value of `bannerText` via the Sling Model and JSON output\n    @Override\n    public String getBannerText() {\n        return bannerText;\n    }\n\n    \/\/ Re-use the Image class for all other methods:\n\n    @Override\n    public String getSrc() {\n        return null != image ? image.getSrc() : null;\n    }\n\n    @Override\n    public String getAlt() {\n        return null != image ? image.getAlt() : null;\n    }\n\n    @Override\n    public String getTitle() {\n        return null != image ? image.getTitle() : null;\n    }\n\n\n    \/\/ method required by `ComponentExporter` interface\n    \/\/ exposes a JSON property named `:type` with a value of `wknd-spa-vue\/components\/banner`\n    \/\/ required to map the JSON export to the SPA component props via the `MapTo`\n    @Override\n    public String getExportedType() {\n        return BannerModelImpl.RESOURCE_TYPE;\n    }\n\n}<\/code><\/pre>\n\n\n\n

                  Notice the use of the @Model<\/code> and @Exporter<\/code> annotations to ensure the Sling Model is able to be serialized as JSON via the Sling Model Exporter.<\/p>\n\n\n\n
                  BannerModelImpl.java<\/code> uses the Delegation pattern for Sling Models<\/a> to avoid rewriting all of the logic from the Image core component.<\/p>\n\n\n\n
                  Observe the following lines:<\/p>\n\n\n\n
                  @Self\n@Via(type = ResourceSuperType.class)\nprivate Image image;<\/code><\/pre>\n\n\n\n
                  <\/p>\n\n\n\n
                  The above annotation will instantiate an Image object named image<\/code> based on the sling:resourceSuperType<\/code> inheritance of the Banner<\/code> component.<\/p>\n\n\n\n
                  @Override\npublic String getSrc() {\n    return null != image ? image.getSrc() : null;\n}<\/code><\/pre>\n\n\n\n
                  <\/p>\n\n\n\n
                  It is then possible to simply use the image<\/code> object to implement methods defined by the Image<\/code> interface, without having to write the logic ourselves. This technique is used for getSrc()<\/code>, getAlt()<\/code> and getTitle()<\/code>.<\/p>\n\n\n\n
                  Open a terminal window and deploy just the updates to the core<\/code> module using the Maven autoInstallBundle<\/code> profile from the core<\/code> directory.<\/p>\n\n\n\n
                  Putting it all together<\/h2>\n\n\n\n
                  1. Return to AEM and open the SPA page that has the Banner<\/code> component.<\/li>
                  2. Update the Banner<\/code> component to include Banner Text<\/strong>:<\/li><\/ol>\n\n\n\n
                    \"\"<\/figure>\n\n\n\n
                    Populate the component with an image:<\/p>\n\n\n\n
                    \"\"<\/figure>\n\n\n\n
                    Save the dialog updates.<\/p>\n\n\n\n
                    You should now see the rendered value of Banner Text<\/strong><\/p>\n\n\n\n
                    Congratulations!<\/h2>\n\n\n\n
                    Congratulations, you learned how to extend an AEM component using the and how Sling Models and dialogs work with the JSON model.<\/p>\n","protected":false},"excerpt":{"rendered":"
                    *This article was modeled from the current Adobe React SPA documentation. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. Understanding how to extend an existing component is a powerful technique to customize and expand the capabilities of an AEM SPA Editor implementation. Objective…<\/p>\n","protected":false},"author":2,"featured_media":620,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,36],"tags":[21,41],"_links":{"self":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/581"}],"collection":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/comments?post=581"}],"version-history":[{"count":2,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/581\/revisions"}],"predecessor-version":[{"id":621,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/581\/revisions\/621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media\/620"}],"wp:attachment":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media?parent=581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/categories?post=581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/tags?post=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}